Getting Started with FlashDevelop3 and AS3

Aha! Finally. Time for my first tutorial: Getting up and running with FlashDevelop3.

Firstly, FlashDevelop 3 only runs on Windows XP/Vista, and requires the .NET 2 runtime. Additionally, to compile AS3 code you will need the Java 1.6 runtime and the Adobe Flex SDK. Ok, let’s go!

Part 1 – Downloading, Installing, and Compiling a SWF

Let’s begin by setting things up and compiling our first SWF.

1. Download the Adobe Flex SDK (just the Flex 3 SDK, not Flex Builder), and unpack it somewhere easy to find (C:FlexSDKFlex3).
2. Download the latest version of FlashDevelop, install it and run it.
3. Create a New Project, under ActionScript 3 choose Default Project, and give it a name (“hello”).
4. In the Project Panel expand the “src” folder and open up “Main.as”
5. In the constructor add the code: trace(“hello world!”);
6. Hit Ctrl-Enter (or F5). A dialog should pop up asking if you’d like to open the AS3 context settings. Click “OK”.
7. In the “Flex SDK Location” input field enter the path from step 1 (or browse to it).
8. Hit Ctrl-Enter again. This should compile your code into a SWF and launch it in a tab. The Flex 3 compiler does incremental compiling, so the first compile might take a while, but subsequent compiles should be much faster.
9. Make a “whooping” noise! “hello world!” should be displayed in the Output panel. You’ll find the SWF sitting in the “bin” folder. Notice that the project panel let’s you look into the guts of your SWF.. pretty damn sweet!

Part 2 – Some Adjustments

By default, FlashDevelop launches SWFs in it’s own version of the Flash Player. At the time of this writing, the player doesn’t perform quite as well as the official debug version of the Adobe Flash Player (besides, we want all the goodness of the very latest Flash Player!). Also, I find the tabbed view weird. So let’s change our setup a bit.

1. Head on over to Adobe downloads, “Download the Windows Flash Player 9 Projector content debugger” and put it somewhere easy to find (C:FlexSDKFlashPlayer)
2. Back in FlashDevelop, go to the main menu, click “Tools” and select “Program Settings” (or hit F10)
3. In the left panel, under “Plugins” select FlashViewer, and point the “External Play Path” to the debug player executable from step 1.
4. While you’re there, change the “Movie Display Style” to “External”. Click “Close”.
5. At the top of the Project Panel click the “Project Properties” button (third from the left).
6. Under “Test Movie” change the selection to “Play in external player”, and click “OK”.
7. Hit Ctrl-Enter. Make the universal “Whazzamm” sound!

Part 3 – Attaching Assets to the Stage

Perhaps “hello world!” is not that thrilling for you. Fine.

1. Create a folder called “lib” inside your project folder (alongside “bin” and “src”).
2. Fire up Adobe Flash CS3 and create a new Flash File (Action Script 3.0).
3. Save it inside the “lib” folder from step 1 and call it “assets.fla”.
4. In the Flash IDE grab the Oval tool and draw a circle.
5. Select the circle and convert it to a symbol by hitting F8 (or right-click and select “Convert to Symbol…”).
6. Give it the name “Circle” and expand the Linkage panel by clicking “Advanced”.
7. Under “Linkage” tick “Export for ActionScript” and click “OK”.
8. Open up your Publish Settings (Ctrl-Shift-F12), deselect “HTML”, and flip to the “Flash” tab
9. Tick “Export SWC”, click “Publish” and click “OK”.
10. Save the file and close the Flash IDE.
11. Flip back to FlashDevelop, and expand the “lib” folder in the Project Panel.
12. Right-click “assets.swc” and select “Add To Library”.
13. Replace our “trace” statement with the following code:
    var circle:Circle = new Circle();
    addChild( circle );
14. Hit Ctrl-Enter. Loudly exclaim “Golly, this is the biznis!”.

Part 4 – Extending Assets, Adding Interactivity

Perhaps a plain old circle on the stage doesn’t really do it for you. You want some motion. You want some interactivity. Some filters. Fine then. Let’s do it..

1. In the Project Panel, right click the “src” folder, select “New” “Class”, name it “ReactiveCircle” and click “OK”.
2. Head to the end of the line “public class ReactiveCircle”, type “extends”, hit Space and select “Circle”.
3. In the constructor type “filters = [new DropShadowFilter()];”
4. On the next line type “addEventListener(” and press Ctrl-Alt-Space (this enables autocompletion for all available classes, not just the imported ones). Start typing “MouseEvent” but hit Enter as soon as you see it selected. Complete the statement with “.CLICK, onClick);”
5. Move your cursor back onto the word “onClick”, press Ctrl-Shift-1 and hit Enter.
6. Inside the generated event handler add the code: x += 10;
7. Flip back to the Main class and change:
   var circle:Circle = new Circle();
   to
   var circle:ReactiveCircle = new ReactiveCircle();
8. Hit Ctrl-Enter. Click the circle. Shout “Kapoww!”

Ok, it’s not a fully fledged RIA, but it should be enough to get you started.

Happy Flashing!

FlashDevelop hello project