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 use C:\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 src and 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.as and make sure that it extends flash.display.Sprite. Click Finish.
• Create a folder named build in 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.as file 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 MyAS3Project for the Project field, your class src/MyApp.as for the Main Class field and type in build/MyApp.swf for 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.as and 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!

Tags: Actionscript, FDT, Flash, Flex SDK

This entry was posted on Saturday, April 5th, 2008 and is filed under Actionscript, FDT, Tutorials. You can leave a response, or trackback from your own site.