Browse Source
Download Source
Discuss Tutorial

With this tutorial, you will learn to create a simple Hello World application using Flash Builder. Flash Builder is an incredibly powerful IDE built on top of Eclipse. If you are interesting, head over to Adobe's Flash Builder Page to check it out. Unlike FlashDevelop, Flash Builder is not free. However, they offer a trial version if you're not sure whether to invest or not.

To start out, we will assume you have purchased and installed Flash Builder on your machine. Let's begin by lauching Flash Builder.

The first thing we want to do is to create a workspace for our project. Generally, you'll find things are easiest if you create a single workspace for your flash projects, and all your games reside inside that single workspace. This allows you to switch between working on them quickly, and have easy access to the code of other projects in the same workspace.

If when you launched you got the start page, go to File -> Switch Workspace -> Other... If this is your first time launching it, you'll likely get the workspace window when you launch, and won't need to go through the menu. The menu should look something along the lines of:


The Workspace Window

Start by clicking the Browse... button and create a directory on your hard drive that you want to use for your workspace. Each of your projects will be placed into its own folder in this directory. Once you've done this, hit OK.

The first thing we're going to want to do is create a new project. Do this by going to File -> New -> Actionscript Project. In the window that pops up, you'll see Flex SDK Version near the bottom. Check Use a specific SDK and check if the dropdown contains 4.6 or later. If it does, feel free to skip the next couple paragraphs. If it doesn't, keep reading.


Creating a new project without Flex 4.6+

Axel takes advantage of some of the latest and greatest features in flash, and for that you'll need at least version 4.6 of Flex. To get it, click here to visit the Flex Download Page and download it. It's over 300MB, so it may take a little while to finish.


Download Flex

Once it completes, you'll have a zip file of Flex. We're going to want to extract it somewhere we'll remember. For this tutorial, I'm going to use C:\Flex\. So pick a location, and extract the entire contents of the zip file to that directory.


Your flex directory should look similar to this

Now that we've got flex on our computer, we'll need to tell Flash Builder where to find it. Go back to your Flash Builder new project window, and to the right of the Flex selection, you'll find a Configure Flex SDKs... link, click that. You'll be brought to the Flex preferences window. On the right side, click the Add... button. Now, click browse, and browse to the directory you installed Flex in. The name will likely automatically fill in, but if not, name it after the version of Flex that you downloaded. Then hit OK.


Give it the location you installed Flex at

You've not got Flex 4.6+ installed!

Now that we've got Flex 4.6+ installed, hit okay, and you'll be back at your new project window. Specify 4.6 as your SDK. Now, give your project a name of Hello World FB. You should be able to leave the rest of the settings as they are (assuming they are the same as the following screenshot).


New Project

Hit finish, and your new project will be created! You should be presented with the basics of a new project: Your main file code will be in the main panel, and your project hierarchy and file outline panels should be on the left.

The first thing we want to do is to include the Axel library in our project so we can create our Hello World game. Visit the Download Page and grab the latest stable version of Axel. After downloading, you'll want to extract the org and com folders and place them in your src directory in Flash Builder. The easiest way to do this is to simply drag the org and com folders from the Axel file you downloaded and extracted onto the src folder in the Flash Builder window. Once you've done this, if you expand the org and axgl folders, your project window should now look like:


Your project panel with Axel imported

Now it's time to get your first program compiled. If you look at the code to your Main.as file (double click it in the project panel if it's not already open), you should see the following:

Main.as
ActionScript 3 Code
1
2
3
4
5
6
7
8
9
10
11
12
package
{
    import flash.display.Sprite;
    
    public class Main extends Sprite
    {
        public function Main()
        {
            
        }
    }
}

Let's change this a little, so that we can print out the string Hello World. Change the code in the file to match the following:

Main.as
ActionScript 3 Code
1
2
3
4
5
6
7
8
9
package {
    import flash.display.Sprite;
    
    public class Main extends Sprite {
        public function Main():void {
            trace("Hello world!");
        }
    }
}
Tip
You might noticed that the location of the brackets changed. Some programmers prefer to put them on their own line, while others prefer to put them on the previous line. For these tutorials I will choose to follow the style of placing them at the end of the lines.

The only thing we did other than change the bracket style is to add a trace("Hello World!"); to the contructor (function Main). Now, the next step will be test your project this far. In the menu, go to Run -> Run Configurations. On the left side, you should see your project as Main under the Web Application section. If it's not selected already, click it. On the right you will see the project name (Hello World FB), and the application file should say src/Main.as. What we need to do is to tell Flash Builder to run your program using the flash debugger. Uncheck Use default under URL or path to launch. Now click Browse.... Navigate to the bin-debug folder within your project (by default you should already be there), and double click Main.swf. Now click Apply and click Run. If you get a blank white Adobe Flash Player 11 window pop up, congratulations! If it doesn't work, then you'll need to ugprade your flash player debugger.

Tip
You can also access run configurations by clicking the black arrow next to the green circle with a white triangle in it on the toolbar

Your run configuration

To get the latest version of the flash player debugger, visit the Adobe Flash Player downloads page and download the 11.1 (or later) Projector content debugger. If you're not on windows, you'll of course need to download the appropriate file.


Download this file

This is the actual debugger, and not an install file, so save it somewhere memorable. I'm going to choose the same place as I installed Flex to (C:\Flex) for this tutorial.

Now head back to Flash Builder. Go to Window -> Preferences, and then go to Flash Builder -> Debug on the left. Under Standable Adobe Flash Player (debug version) navigate to the file you just downloaded and click OK.


Set it to your newly downloaded debugger

Now let's try to test again. Press F11 or click the green circle with a right triangle on the toolbar to debug your movie. You should now successfully get a blank white window pop up in the flash debugger!

Tip
You can change your hotkeys for debugging your project (along with pretty much everything else). See the following screenshot:

Switching keys for debugging your project

At the bottom you'll notice our hello world trace statement (if you aren't already in the console tab while running your application, click the console tab). Here is where all the trace statements will appear, which are invaluable to use when debugging your game.


Our hello world debug statement in the console

Now, what if we want to show the Hello World message in the actual game? Now we get to actually write some code!

The first thing we want to do is within Main.as let's change Main to extend Ax instead of Sprite. You'll need to import the Ax class instead of Sprite though. If you delete the word Sprite and type the word Ax and hit control+space you should get a popup showing you possible classes to import:


Quick importing as you type

Hit enter while org.axgl.Ax is highlighted and it should automatically add the import statement to the top of the file. If the popup window disappears, you can bring it back when hitting Control+Space while your cursor is at the end of the word Ax. If for some reason this isn't working for you, add the following to your class:

Main.as
ActionScript 3 Code
1
import org.axgl.Ax;

You can also now remove the flash.display.Sprite import line.

When working in Flash Builder, you'll need to provide a [SWF] tag to tell the system how big your SWF file should be, and what the default background color should be (the background color does not matter when using Axel, however). Add this line below your imports:

Main.as
ActionScript 3 Code
1
[SWF(width = "400", height = "300", backgroundColor = "#000000")]

Now that we're extending the Axel library, we'll need to initialize the game. Do this by replacing your trace statement with a super statement that looks like the following:

Main.as
ActionScript 3 Code
1
super(GameState);

The parameter tells it what State to start at. States are outside the scope of this tutorial, but you only need to know this: At any one time your game will be running in a single state. Therefore, to get our game to work, we need to tell it which state our game will run in. Let's take a quick look at what the final code of our Main.as file should look like:

Main.as
ActionScript 3 Code
1
2
3
4
5
6
7
8
9
10
11
package {
    import org.axgl.Ax;
    
    [SWF(width = "400", height = "300", backgroundColor = "#000000")]
    
    public class Main extends Ax {
        public function Main():void {
            super(GameState);
        }
    }
}

Now, to create our game state, right click on (default package) on the left in your package explorer (or go to File -> New -> Actionscript Class). This will pop up the new file window. For simplicity we're adding it to the default package, so leave the package field blank. Under name, put GameState. The rest can be left at the defaults.


Creating our GameState class

This will create and open the file in your main window. Now, fill it with the following simple code:

GameState.as
ActionScript 3 Code
1
2
3
4
5
6
7
8
9
10
11
12
13
package {
    import org.axgl.Ax;
    import org.axgl.AxState;
    import org.axgl.render.AxColor;
    import org.axgl.text.AxText;
    
    public class GameState extends AxState {
        override public function create():void {
            Ax.background = new AxColor(0, 0, 0);
            add(new AxText(10, 10, null, "Hello World!"));
        }
    }
}

Now let's talk a little bit about what this code does. At the top we're importing the classes that we're going to use. Inside of our state, the first thing we do is override the create method. This is called when the state is created. There are only two thing we want to do when the state is created: Change the background color and add our text. We change the background color to black (AxColor takes in the red, blue, and green components from 0 - 1, so 0, 0, 0 ends up as black) so that we can see our text, which by default is white. The next thing we do is add an AxText object to the screen. The first two arguments are the position, so here we are adding our text to x = 10, y = 10, where 0, 0 is in the upper left corner. The third argument is which AxFont to use. We are passing null, telling it to use the default built in font. The fourth argument is the string we want to display, which is, of course, Hello World!

Now, try testing your movie (reminder: F11, the triangle in green circle, or whatever hotkey you have set up), and you should see something similar to this:


We Are Winners!
Tip
If you get an error saying Unrecognized Windows Sockets error: 0: JVM_Bind it means you have another copy of the debug player already running. Either close it by closing the window, or click the Red Square icon near the bottom of your main Flash Builder window, on the top of your Console window that shows your trace output.

Congratulations on setting up Flash Builder, integrating the Axel library, and creating your first application! The best part? Only 24 lines of code!

Browse Source
Download Source
Discuss Tutorial