Designing the structure of a Flash game – AS3 version

Abot a year ago I published Designing the structure of a Flash game with everything you needed to know to design the structure of a game.

Now it’s time to make the same thing with AS3, using classes.

With classes the whole thing seems less intuitive, but once mastered the base concept, you will use this example as a template for your games.

In this game, we have four screens: the splash screen, the info screen (how to play), the game itself and the game over screen… but you can easily add as many screens as you want.

First, let’s make a diagram of the game:

In the picture you can see the four game screens, and arrows indicate the possible transitions between a screen and another… so from the splash screen you can go to the info screen but you can’t go directly to the game over screen.

The main class is the_game (so our main file will be while all other objects and classes are listed in the library table. Refer to red numbers to see where I used the objects during the game.

Looking at the linkage column, it’s clear we’ll have four more actionscript files:,, and

Let’s see them all:

This represents the whole game.

Lines 4-7: Declaring the game screens assigning them the proper class

Lines 8-10: This is the main function, that simply calls a function that will show the splash screen

Line 11: Here it is such function: show_splash

Line 12: The core of the function: I am assigning the splash_screen variable declared at line 4 a new splash object. Look at the this parameter: I am using it to “remember” who called the class, in this case this = the_game.

Line 13: Checking if I have the how_to_play_screen on stage. This could be possible because I can reach the splash screen from the info screen.

Line 14: If true, I will remove the screen from stage…

Line 15: … and unset the variable. This is very important because removeChild, as the name suggests, just removes the sprite from the stage, but it’s still active as variable.

Line 17: Finally, I put the splash screen on stage.

All remaining lines do quite the same, assigning variables, adding and removing sprites according to what they have to accomplish.

Now it’s time to see, the code for splash class

Line 6: Declaring a variable called main_class of the_game (the main class) type.

Line 7: Main function, look at the passed_class variable of the_game type passed as parameter: that’s where ends the paramter passed at line 12 in

Line 8: Remembering the class I came from

Lines 8-9 Adding a couple of listeners to the buttons to check when the player clicks on the “play” or “how to play” buttons.

Line 12: Function to be executed when the player clicks on the play button

Line 13: The core of this file: I call play_the_game function in the main class. I know what’s the main class thanks to main_class variable.

Then the function will act like the show_splash one explained before, adding and removing sprites and calling other classes.

The other classes work in the same way as splash, so they do not need comments.

And that’s what you’ll get:

Download the source and enjoy. Feel free to add a leaderboard screen, a credit screen and so on. Send me and I’ll publish it.

  • Thanks, this is very helpful!

    Getting it all on one screen, with nothing on stage is the tricky thing for me :)

  • This is a good beginner method but I think the most efficient way of dealing with UI is some kind of ‘ScreenManager’ class.

    Where you can have a method like ‘changeUI(newUI)’ that will do all the work for you, including hiding the old screen and displaying a new one.

  • sam

    Sorry if i’m being ridiculously stupid (new to AS3) but whereabouts did you set the location for the buttons in the code? I don’t see how that part was done…

    Other than that, cheers very much – your tutorials are very helpful!

  • Nathan

    I tried making a game this way, but I see a problem, how do you make the keyboardEvent work if i say:

    addEventListener(KeyboardEvent.Key_DOWN, KeyDown);

    it doesn’t work

    if you say:


    it works?


  • RJ

    I think there should be a wy to get to the menu either from the in-game screen or game-over one. Or even both

  • I prefer using script in timeline to control gameflow rather than using script itself. BTW, very good AS3 style.

  • Pippo

    sorry emanuele…

    but you’re not following naming convention for object oriented programming.

  • sam

    In re: to my comment:
    I’m a muppet, ignore it – didn’t think to see if the buttons had been placed within the screen movie clips… (e.g. Splash Screen, Game Over Screen)

  • Pingback: Weekly Shared Items - 19. December, 2008 « toxin 2.0()

  • I assume that the first class to get run it; how does this class constructor get called? -Thanks, Dave

  • Tom


    Like above I’m trying to get the keyboardEvent work. If I use:

    addEventListener(KeyboardEvent.Key_DOWN, keyDownHandler);
    this.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);

    the program runs but doesn’t respond to key presses.

    If I use:

    stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);

    I get TypeError: Error #1009:

    Can anyone help??

    Thanks, Tom

  • ellison

    I get the same error too
    TypeError: Error #1009:

  • Edward

    To make the keyboard class work from stage events, the game_itself class should most likely be a document class.

    When you use addChild() on the objects, they will be a part of the document class, and thus should receive keyboard events from the stage. It should work properly and you can use keyboard as well as mouse commands then.

    Simply modify your Flash document class, when you click the empty stage, it’ll be in the properties window (usually at the bottom). Type in your the name of your main class there.

  • Arc

    Thanks for this diagram.

    at Pippo: :)

    I actually use Emanuele’s naming convention, in my opinion, I find it far more readable than that “oop naming convention” you pointed out.

  • Pingback: Designing the structure of a Flash game - AS3 version - Part 2 : Emanuele Feronato()

  • Adam

    i keep getting errors saying the following because the word this keeps causing problems:

    1136: Incorrect number of arguments. Expected 0.

  • samuvagyok

    The code in the article is same as code. I think it’s a mistake..
    Helpful one, thanks!

  • Thanks for the tutorial. I have one question.

    Does unsetting the variable (i.e. splash_screen = null) remove the listeners inside that movieclip?

  • Cesar The Brave

    Hi Emanuele,

    in the source code box above, the source for is the same as the source for!

    Thanks for this tutorial

  • sebastian

    This tutorial is helpful but i was wondering how do you add sound to this?

  • chire

    I made an example of this, but with fresh files.

    im having a problem.

    when i play my project, i just see blank screen.
    how does the main flash file know that there has to be an instance of “the_game” main class?

  • e

    “The other classes work in the same way as splash, so they do not need comments.” If they work in the same way, you should be using a base class and inheritance, not this sort of copy-and-paste hackery. This article doesn’t show much knowledge of programming or of structure.

  • Pingback: Criando a estrutura de um jogo em flash – 1ª parte « Tentativa de Programação()

  • Pingback: creare gioco online - Forum di Tom's Hardware()

  • Thanks for the tutorial. I have one question.