Adobe Flex
Working with Flash and Flash Builder in the same project
by Alberto González on Jul.27, 2009, under ActionScript, Adobe AIR, Adobe Flash, Adobe Flex, Coding, Tips & Tricks
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.
Filter an ArrayCollection and don’t lose the original data
by Alberto González on May.02, 2009, under ActionScript, Adobe AIR, Adobe Flex, Coding, Tips & Tricks
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
New releases from ServeBox
by Alberto González on Apr.22, 2009, under Adobe Flex, New Releases
ServeBox team has released a new version of the ActionScript Foundry framwerork. The new version 2.1.0 brings some fixes and add numerous new functionalities. The framework is now compatible with Spring ActionScript ( prana ). Improvements are listed below :
ServeBox has also released a new version of Flex Plugin for Maven. The new version 2.2.0 contains a lot of new improvements :
You can find more on the ServeBox.org team’s blog.
ServeBox Releases Foundry 2.0 [ Flex / Java framework ]
by Alberto González on Dec.08, 2008, under ActionScript, Adobe Flex, Java, New Releases
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.
Adobe Flex 3 and AIR certification exam now available.
by Alberto González on Nov.01, 2008, under Adobe AIR, Adobe Flex, General, New Releases, Training
Well, good news for everyone who was waiting for the new certification in Flex 3 or AIR.
Few days ago Adobe released the ACE certification exam for Flex 3 and AIR (just one exam for both of them) and you can get all the information in certified community at Adobe.com.
The price of the exam is US$ 150 as usual and right now is only available as Certification exam and just in Pearson VUE not re-certification exam.
I don’t really know if there will be re-certification for Flex 3 because it’s an enterprise Technology and because the AIR certification is included in the exam, not just Adobe Flex.
Good luck everybody.
Versión en español de este por la pueden encontrar en -> http://riactive.com/2008/11/01/flex-3-y-air-certification-nuevo-examen-de-certificacion/.
