Browse Source
Download Source
Discuss Tutorial

Before we can get started making awesome games, we'll first need to set up our development environment. This tutorial will cover setting up FlashDevelop with Axel to make a basic Hello World application. There are many IDEs (Integrated Development Environments) that you can choose for working on flash games, but Flash Develop is a great starting place. Not only is it free, but it's extremely simple to get up and running.

The first thing you'll need to do is head over to the Flash Develop website and download the latest version of the application. At the time of writing, the latest version is 4.0.1 RTM. Clicking download should take you to their download forum post, where you'll find the download link at the bottom.


Download link at the bottom of the forum post

Once downloaded, launch the executable and follow the steps on screen. When it asks you to choose components, make sure that FlashDevelop, Install Flex SDK, and Install Flash Player are all checked. You can also check Install Air SDK on the off chance you want to export to iOS or Android later. Hit next, and once it does its magic you'll have a shiny new copy of FlashDevelop installed and ready to use.


Your selected components should look something like this

Now that you've got FlashDevelop installed, launch it from your start menu. You should get the basic start page that is useless for the most part. We're going to dive straight in, so the first thing you should do is go to Project -> New Project. You'll get the new project window. From the list of project types, choose AS3 Project. For a name, choose Hello World FD. It will give you an option of location. If you don't mind the directory it gave you, you can stick with the default. If you'd like to put all your flash games in their own folder, feel free to change this. Leave package blank, but be sure to check Create directory for project. This checkbox will put your project in its own folder within your location directory. Your settings should look as follows:


New Project Settings

Hit OK and your project should be created. If it asks you for an author, put in your name (or alias) and hit OK. On the right side of your screen you should now have a project panel, expand the src directory and it should look as follows:


The project panel for our new project

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 Develop. 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 FlashDevelop window. Once you've done this, if you expand the org and axgl folders, your project window should now look like:


We've now included Axel in our project

The files and folders within the axgl folder are the components that make up the Axel library. We're only going to worry about a couple of them for this project, but if you're curious you can check out the Documentation Page or simply open up the files and read the comments to learn what they do.

Before we continue, we need to change our game to run with Flash Player 11.1 or later. Axel takes advantage of some newer features of Flash, so it will not be able to run under Flash Player 10. To do this, go to Project -> Properties.... In the properties window, you should also be on the Output tab; if you aren't, navigate to it now. Under Platform you'll want to ensure that the first box contains Flash Player, and then change the second box to 11.1. If you're reading this and newer versions of the flash player have been released (and you have the debug player for that version installed, of course), feel free to change the 11.1 to a newer version! While we're here, let's make a couple modifications. First, let's change the dimensions of our game to be 400x300 and the framerate to be 60. For some games a cap of 30fps is fine, but if your game is efficient enough to run at 60fps, that usually provides a much smoother experience for your players. Your window should look like this:


Our project properties

Now it okay to close out of that window.

Our next step will be to write some code! Double click the Main.as file to open it. Currently, the code inside should look something similar to:

Main.as
ActionScript 3 Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
package 
{
    import flash.display.Sprite;
    import flash.events.Event;
    
    /**
     * ...
     * @author Arkeus
     */
    public class Main extends Sprite 
    {
        
        public function Main():void 
        {
            if (stage) init();
            else addEventListener(Event.ADDED_TO_STAGE, init);
        }
        
        private function init(e:Event = null):void 
        {
            removeEventListener(Event.ADDED_TO_STAGE, init);
            // entry point
        }
        
    }
    
}

We're going to edit this a bit, as the majority of code here is useless to us. Let's start by first bringing it down to the absolute basics:

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.

Now we're ready to test it! Hit Control + Enter or F5 to open your game in debug mode. This mode is great for testing your game as you'll get all the debug output, along with stack traces if something goes wrong. If you did this correctly, a blank white Flash Player window will open up. This is to be expected, since our game doesn't actually do anything yet. But wait! Where's the Hello World we put in? In the FlashDevelop window, the layout changed to a debugging layout. If you take a look at the bottom of your FlashDevelop window, you'll see an output panel. This is the panel where all trace() commands are sent to, which you can use liberally for debugging. For our current purpose however, you should see the following:


Hello world!

Success! We've got a running program.

Tip
To launch the project, we used Control + Enter. There are other ways you can run your project, though. Hitting F5 will do the same thing, as will going to Project -> Test Project in the menu.

For this tutorial, we want to go one step further, and make Hello World appear in our game using the Axel library. Getting this to work is actually only slightly more work.

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 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.

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:

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
package {
    import org.axgl.Ax;
    
    public class Main extends Ax {
        public function Main():void {
            super(GameState);
        }
    }
}

Now, to create our game state, go to File -> New -> AS3 Document. This will pop up a new table called Untitled1.as. Let's save it, so we can name it properly. Go to File -> Save. The save dialog should automatically put you in the folder where your Main.as file is. If it didn't, navigate to that folder. Name the file GameState.as and hit save!

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 block) 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 four argument is the string we want to display, which is, of course, Hello World!

Now, try testing your movie (reminder: Control+Enter or F5), and you should see something similar to this:


We Are Winners!

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

Browse Source
Download Source
Discuss Tutorial