How to compile an AS3 Project with FDT
Over the past couple of years, I’ve come to rely heavily on FDT for my Actionscript development work. An excellent plugin for the Eclipse IDE, FDT provides developers with a rich set of editing and refactoring tools unavailable in the Flash IDE. Back in the AS2 days, one can bypass the Flash IDE altogether and compile his or her SWF directly in FDT using the MTASC compiler. With the release of Flex Builder 2 (and now 3), one can compile AS3 projects directly using the Flex SDK.
Now, if you’re a fan of FDT, there’s no need to worry that you need to switch over to Flex Builder for your AS3 projects. The latest version of FDT (ver. 3), provides a way to compile your AS3 projects using the open source Flex SDK via the fcsh script. Instructions for doing so are available on the FDT forums. In this tutorial, I’m going to show you how to do so step-by-step.
1. Downloading and Installing the Flex SDK
- First you need to download and install a copy of the Flex SDK from Adobe.
- Unzip the archive and place the folder in a directory where its path contains no space. In OSX, I recommend using
/usr/local/flex_sdk_3. In Windows, you may useC:\flex_sdk_3.
I also highly recommend creating a new Workspace for your AS3 projects if you haven’t done so already.
2. Set up Eclipse/FDT Preferences
- In Eclipse, open the Preferences panel.
- In the FDT->Core Libraries settings, select the AS3 Core Libraries tab.
- Click the Fast Add… button.
- In the Type drop-down menu, select Pure AS3 (Flex 3) and for the Path field, browse to the directory where you installed the Flex SDK. In my case, I use
/usr/local/flex_sdk_3(figure 1). Click OK. - Back in the Preferences panel, make sure the Pure_AS3_Flex_3_0 core library is checked (figure 2). Click OK to exit the Preferences panel.
3. Creating a New AS3 Project
- In the Flash Explorer panel, right-click and select New->New Flash Project.
- In the New Project Wizard, make sure that in the Project Language settings, Action Script 3 is selected and set to Pure_AS3_Flex_3_0 in the drop-down menu (figure 3). Click Next.
- In the next window (figure 4), you will see that your project is automatically linked to playerglobal.swc in the Core Library. This SWC contains the Flash core library classes that you would need in order to compile an AS3 application. Click Finish.
- Next, create a source folder by right-clicking on your project and selecting New->Source Folder. Name this folder
srcand place it in the root of your project directory. - Create your application (document) class by right-clicking on your project and selecting New->Class. Name your file
MyApp.asand make sure that it extendsflash.display.Sprite. Click Finish. - Create a folder named
buildin the root of your project by right-clicking your project and selecting New->Folder. This will be the output folder for your SWF. - In my example, I’ve typed in some code to draw a 100×100 red square graphic (figure 5).
4. Setting up your Run Configurations
- Right-click on the
MyApp.asfile and select Run As->Run Configurations… - In the Run panel, with FDT AS3 Application selected, click the New icon to create a new configuration for your build setup.
- With the new configuration selected, in the Main tab, browse to your project
MyAS3Projectfor the Project field, your classsrc/MyApp.asfor the Main Class field and type inbuild/MyApp.swffor the Output field. Click Apply and then click Run. This will create a default SWF in the build folder (figure 6). - In the Start SWF tab, check the Start SWF after compilation box and browse to
build/MyApp.swf. This will allow FDT to auto-launch your SWF in the built-in SWF Viewer once it’s compiled (figure 7). Close the Run panel.
5. Compiling your SWF
- In the Flash Explorer panel, you may now compile your SWF by simply right-clicking on
MyApp.asand selecting Run As->FDT AS3 Application. - Select the SWF Viewer tab and review your SWF (figure 8).
Unlike Flex Builder, this build set up does not automatically create a html wrapper for your swf. You will have to create it yourself or use an ANT build script to automate that.
Migrating Existing AS3 Projects
If possible, change your Default Core Library to the Flex SDK as described in Section 2. This will globally set up your workspace to use the Flex SDK as the default compiler. If you do not wish to do so, you may still set it for each project by right-clicking your project and selecting Properties. Select FDT Source Folder and click the Change Core Library button to change the core library as you would in the Preferences panel (figure 9).
In addition to setting up your Run Configurations as mentioned above, also make sure that in the Flex SDK tab that the Use Default SDK radio button is checked and that its value is set to Pure_AS3_Flex_3_0 (figure 10).
Good luck and happy coding!
May 4th, 2008 at 5:52 am
Thank you so much!
I’ve been trying for days to get this to work with my existing Flex builders SDK directory (even with spaces removed). FDT just falls apart for some reason.
Installing the separate SDK as per your tutorial is the key!!
Thanks again.
July 2nd, 2008 at 6:05 am
Thanks sooo much for this this really really helped me
July 21st, 2008 at 3:06 pm
I was hoping to find the answer to a question I have about FDT. I am having trouble creating a fla file in FDT and launching it in flash. I suppose I’m lacking the knowledge right now to figure out how we’re going to use this to import existing library assets from an fla file into FDT.
Any help would be greatly appreciated. Thanks.
July 30th, 2008 at 7:01 am
Umm in regards to your question Burton, the beauty of FDT & AS3 is that no .fla is required, hence no Flash IDE is necessay
(of course you could import a project structure that contains .flas and run the app to have it compiled in the Flash IDE)
When you create an FDT project you’re working solely with classes and the compiler. For library assets, you should look into using the [Embed] metadata tag within your AS classes.
[Embed(source="photo.jpg")]
private var Photo:Class
There may be another way of importing assets into classes for Flash AS3 but this is the only way I know
cheers
July 31st, 2008 at 6:09 pm
[...] Read This: http://hubflanger.com/how-to-compile-an-as3-project-with-fdt/ [...]
August 29th, 2008 at 12:54 pm
after grabbing the latest flex_3_sdk i was getting the error
Classpath entry does not exist: playerglobal.swc
and couldn’t figure out how to direct eclipse/FDT to the latest location of the playerglobal.swc (it’s in \flex_sdk_3\frameworks\libs\player\9\playerglobal.swc vs \flex_sdk_3\frameworks\libs\player\playerglobal.swc) so i just copied the \9\playerglobal.swc up one directory and rebuilt my project.
August 31st, 2008 at 6:18 am
This is a great tutorial. I’ve been trying to figure out how to do this for a long time and it got me over the hump. My question is, how do you set things like the stage width and height, background color and framerate. I tried using
[SWF ( width = '550', height = '400', backgroundColor = '#cccccc',
frameRate = '15' ) ]
but it doesn’t seem to work. I placed it after my import statements and before the class declaration.
Casey
September 2nd, 2008 at 9:54 am
Starpause,
Make sure that the FDT->Core Library setting and your Project Properties are set to Pure_AS3_Flex_3_0 and not Flex_3_SDK. Setting it to Flex_3_SDK will cause the compiler to look for the playerglobal.swc in the wrong place.
September 2nd, 2008 at 10:11 am
Casey,
The compiler directives can be set in the Run Configurations panel (Document class->right-click->Run As->Run Configurations->Compiler Arguments tab).
September 14th, 2008 at 3:39 pm
Great tutorial! i have been looking for this for a long time!
your tutorial works fine, but i have one step left. i want to use/link an .fla also when i compile (an fla which contains two scenes and links all my classes). do you know how to do this? or should I compile it in the authoring tool and then link the .swc? If so, how do I do that?
September 16th, 2008 at 10:22 am
this is excellent! anyone know if it is possible to include an .fla in the FDT compilation? i have not been able to do this, and i suspect it is impossible? (i.e. not create an fla, but link it in the compilation process). I am using the CS3 Flash authoring tool to draw and layout my document class. Is it possible to compile this using FDT?
September 18th, 2008 at 10:42 am
Thanks for your comments BubbleBoy. This tutorial was specifically written for people who wish to compile in the FDT environment without using the Flash IDE. In an upcoming tutorial, I will demonstrate how you can compile with the Flash IDE using ANT.
September 27th, 2008 at 10:48 am
Ok! Looking forward to it! As I said, I was wondering if it is possible compile without using the Flash IDE, directly from Eclipse/FDT (while linking my .fla or corresponding .swc).
October 14th, 2008 at 7:17 am
Peng,
thank you for the tutorial !
Also it is very interesting to read about compilation with including an .fla.
Thank you in advance.
Vlad
February 20th, 2009 at 7:30 am
[...] How to compile an AS3 Project with FDT | hubflanger.com | adventures in code (tags: flex actionscript tutorial eclipse fdt) [...]