Albertx blog

This article shows how you can configure Adobe Flash and Flash Builder to work in a project. Let’s start.
I created this post ’cause I love the programming tool of Flash Builder but there are projects that need to be created mainly in Flash. So, following these steps you will be able to have all the coding advantages of the Eclipse platform and still use Flash for the visual part of the project.

1) Removing the Build Automatically option in Flash Builder: First open Adobe Flash Builder and before create any project or anything just remove the Build Automatically option located under Project -> Build Automatically. This will avoid Flash Builder to compile the code every time you save a file.
2) Create an ActionScript project in Flash Builder: Let me tell you that the project structure created by Flash Builder is very useful so we’ll try to keep it. Select File -> New… -> ActionScript project. Chose a name for the project and the location, just remember that this will be the location where all the files, including FLA and asset files, will be stored.Click Next and here we will change two fields. First, for the “main source folder” we will type src/classes and for the “output folder” it will be deploy. These two changes will help us with the Flash / Flash Builder project.You can now click Finish.


3) Change the super class of the main class to be MovieClip: This is because we’ll use this main class as the Document Class in the Flash file and if you don’t change the super class to MovieClip yo won’t be able to invoke methods like gotoAndPlay, gotoAndStop, nextFrame, stop, etc. If you don’t need to invoke this kind of methods you can leave Sprite as the super class.

package{import flash.display.MovieClip;public class MyApplication extends MovieClip{public function MyApplication(){}}}

4) Create the Fla file in Adobe Flash and place it in the right location: Open Adobe Flash, create a new Flash file and save the file under a folder named /flas that has to be at the same level of the folder named /classes. This folder is, remember, in the Flash Builder project.Once you save the file, change the publish settings in Flash and for the exported swf point to the folder named /deploy that is two levels up the folder where the fla file is stored.Export the swf, refresh the Flash Project Folders in Flash Builder and see if your project looks like this.


5) Set up the classpath in Flash and set the main class of the Flash Builder project to be the Document Class in the Flash File: Go to Publish settings in Flash, in the Flash tab locate the “Settings…” button under the script section. Once there, set the source path to be ../classes/ and then, in the field “Document Class” type the name of the class generated by Flash Builder.

6) Final steps… Run, Debug and Profile configurations in Flash Builder: Go back to Flash Builder an press the little black arrow located just next to the Run button, yes the one that seems like a music stand play button. Select Run configurations… and then we just have to change the files that Flash Builder will run when we press the Run, Debug and Profile buttons. Locate Web Application in the left side, select it and the press the “New launch Configuration…” button located in the top side of that panel. Then type any name for the configuration and the most important step is to change the files that Flash Builder will launch. We do this unchecking the option “Use defaults” in the “URL or path to launch” section and, for the new names, we’ll just change the name of the file, not all the location. We have to point to the html or swf generated by Adobe Flash located in the same folder name /deploy. We have to change the 3 fields (one per action). If we do this step right, when we press “Run”, Flash Builder will launch the files generated and compiled by Adobe Flash.
7) Enable the debug mode in the fla file: If you try to debug or profile the swf file from Flash Builder after doing the previous step, you’ll notice a message saying that the swf file was not compiled for debugging. That’s true. Unlike Flash Builder, swf files generated by Adobe Flash are not for debugging by default. If we want to enable them for debugging we have to go to publish settings, once again in Adobe Flash, and in the Flash tab just enable the option “Permit Debugging”. Recompile the swf file from Flash and try to debug the Flash Builder project. You will get no errors now. Just, DON’T FORGET TO UNCHECK THE OPTION PERMIT DEBUGGING when you deploy the final project.

Unfortunately we don’t have a way to compile a fla file to a swf without Adobe Flash so, anytime you want to compile the project you have to switch back to Adobe Flash and press Ctrl + Enter to export the swf. The advantage here is that you can code in Flash Builder and use all the features it has. The main class in Flash Builder is the Document Class in the Fla file so you can control everything from that class. Also yo can create more classes and packages all from Flash Builder. Actually you will use Flash for compiling and for adding visual information with the Flash tools.
Enjoy the article and see you soon.

Yesterday, one of my students asked me about recovering the original data of an ArrayCollection if this ArrayCollection has a filter applied.In Adobe Flex, the ArrayCollection class has a property called filterFunction. We can assign a function reference directly to this property and then apply a refresh() to the ArrayCollection instance.This is an example.

// Defining the ArrayCollection instanceprivate var ac:ArrayCollection = new ArrayCollection([{label:"Adobe Flex", data:"Fx"},{label:"Adobe Flash", data:"Fl"},{label:"Adobe After Effects", data:"Ae"},{label:"Adobe Flash Player", data:"fp"}]);//Defining the filter functionprivate function flashFilter(obj:Object):Boolean{return obj.label.toLowerCase().indexOf("flash") != -1;}//Applying the filterac.filterFunction = flashFilter;ac.refresh();

Once the filter is applied, the ArrayCollection hides all the objects that don’t pass the validation in the function and shows the objects that do.
An ArrayCollection stores internally an instance of the Array class. You can see that in the previous example where I place an array inside the constructor of the ArrayCollection.
An ArrayCollection acts as a “wrapper” for the array instance enabling functionality that belongs to collections and lists. This functionality can be, filtering, sorting, add/remove/modify data and more.
After you filter an ArrayCollection instance the “wrapper” only shows the unhidden objects and it seems like it only has 2 elements (in my example), I mean if you test the “length” property after the filter you will see that it shows the value 2. But we know the truth, the ArrayCollection actually has 4 elements. If you want to get back this 4 elements without clearing the filter you have to deep into the ArrayCollection and find the source. This source, as I said previously, is an Array.
You will find the source using, in fact, the “source” property of the ArrayCollection. The array that will give you this property is the complete set of data that the ArrayCollection is storing without any filter. Just don’t forget that “source” is giving you an instance of an Array and not an instance of an ArrayCollection.

//continuing the previous example...//Applying the filterac.filterFunction = flashFilter;ac.refresh();//Test the length property of the ArrayCollectiontrace(ac.length); // 2//Test the source property of the ArrayCollectiontrace(ac.source) // [object Object],[object Object],[object Object],[object Object]//Test the length property of the source propertytrace(ac.source.length) // 4

Since december 1st, ServeBox.org brings together Maven Flex Plugin and ActionScript Foundry projects. AS Foundry was created in 2005. In 2007 the project turned into an open source project available on SourceForge. The new version 2.0 brings some fixes and add numerous new functionalities.
ServeBox’s ActionScript Foundry (AS Foundry) is made of productivity tools and ActionScript 3/Java framework. This framework leverage the power of both universe : Flex and Java.
Based on design patterns, the AS Foundry framework reduce the development cycle of complex applications. Indeed, you will find ready-to-use tools : data synchronization for MVC model, authorizations, internationalization, and even more ! This framework is divided into 5 librairies :
Commons : base types and tools,Foundry : MVC Framework,AirFoundry : ASFoundry extension in order to use it with Adobe AIR.Toolbox : advanced toolbox (navigation, ACL, full-text search…)Foundry-Java-Commons : Java classes created to speed up the development cycle for the client-side (Flex) and server-side (FDS-LCDS-BlazeDS).
You can use on of tutorials available on www.servebox.org to understand how Foundry works.
Just take a look at it.

Today I decided to make some posts about tips, tricks and how to do some useful things in ActionScript 3.0 for Flash CS3 and Flex 3, also for LiveCycle Data Services with Java and PHP.
This happened because I’ve been receiving some technical questions about ActionScript 3.0 in general and Flex integration with other technologies. After that, a friend of mine told me that It’ll be useful that I post those answers and some tips/tricks in my blog.
I’ll try to post once a day about this topics but I can’t promise that I will. So lets start…
I will start with one of the first things I realized that it is more difficult to do than in past versions of ActionScript. This is the generation of class instances when the class name is dynamically generated.
I will create an sample environment.Imagine that you have an application where the graphic elements in this app are created based on user decisions. This example is very common, but… What you really have to do is to create instances of a Class that, at the moment of the application initialization, you still don’t know.
Lets see…You have three classes

BlueButtonOrangeButtonGreenButton

You dont know what type of class instance will be created so you just let it to be dynamically generated. You can do this with a method inside “flash.utils” package named getDefinitionByName.
getDefinitionByName takes a string argument and try to get the whole class reference, so you could create a new instance based on this new class reference.

import flash.utils.getDefinitionByName;var ClassReference:Class = getDefinitionByName("BlueButton") as Class;var newInstance:* = new ClassReference();

You could have the “BlueButton” string inside a variable.Because at compile time you still don’t know what data type will have the “newInstance” variable, I recommend not to specify it yet. You could then get the class name and cast the variable to the correct datatype.
You can get the class name with another function inside the same package. The function name is “getQualifiedClassName”. You can pass an instance reference as the only argument and the function will give you a string with the name of the class that the instance belongs to.
Also, there is another function named “getQualifiedSuperclassName” which acts almost the same as getQualifiedClassName. The only difference is that this function gives you the name of the super class instead of the class.

import flash.utils.getQualifiedClassName;import flash.utils.getQualifiedSuperclassName;trace(getQualifiedClassName(newInstance)); // BlueButtontrace(getQualifiedSuperclassName(newInstance)); // SimpleButton

This is an example. The source code is in the “files” section of this blog.Hope you find it usefull.
Regards