Monthly Archives: July 2009

Working with Flash and Flash Builder in the same project

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.
projectsettings_01
projectsettings_02
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.
package_explorer_01
publish_settings_01
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.
publish_settings_02
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.run_configuration_01
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.