Designing the structure of a Flash game – AS3 version

December 17, 2008 • Actionscript 3, Flash, Game design by Emanuele Feronato • 24 Comments

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 the_game.as) 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: game_over.as, how_to_play.as, splash.as and the_game_itself.as.

Let’s see them all:

the_game.as

package {
	import flash.display.Sprite;
	public class the_game extends Sprite {
		public var splash_screen:splash;
		public var play_screen:the_game_itself;
		public var game_over_screen:game_over;
		public var how_to_play_screen:how_to_play;
		public function the_game() {
			show_splash();
		}
		public function show_splash() {
			splash_screen = new splash(this);
			if (how_to_play_screen) {
				removeChild(how_to_play_screen);
				how_to_play_screen = null;
			}
			addChild(splash_screen);
		}
		public function show_how_to_play() {
			how_to_play_screen = new how_to_play(this);
			removeChild(splash_screen);
			splash_screen = null;
			addChild(how_to_play_screen);
		}
		public function show_game_over() {
			game_over_screen = new game_over(this);
			removeChild(play_screen);
			play_screen = null;
			addChild(game_over_screen);
 
		}
		public function play_the_game() {
			play_screen = new the_game_itself(this);
			if (splash_screen) {
				removeChild(splash_screen);
				splash_screen = null;
			}
			if (how_to_play_screen) {
				removeChild(how_to_play_screen);
				how_to_play_screen = null;
			}
			if (game_over_screen) {
				removeChild(game_over_screen);
				game_over_screen = null;
			}
			addChild(play_screen);
		}
	}
}

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 splash.as, the code for splash class

package {
	import flash.display.Sprite;
	import flash.display.SimpleButton;
	import flash.events.MouseEvent;
	public class splash extends Sprite {
		public var main_class:the_game;
		public function splash(passed_class:the_game) {
			main_class = passed_class;
			play_button.addEventListener(MouseEvent.CLICK, on_play_button_clicked);
			how_to_button.addEventListener(MouseEvent.CLICK, on_how_to_button_clicked);
		}
		public function on_play_button_clicked(event:MouseEvent) {
			main_class.play_the_game();
		}
		public function on_how_to_button_clicked(event:MouseEvent) {
			main_class.show_how_to_play();
		}
	}
}

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

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.

how_to_play.as

package {
	import flash.display.Sprite;
	import flash.display.SimpleButton;
	import flash.events.MouseEvent;
	public class how_to_play extends Sprite {
		public var main_class:the_game;
		public function how_to_play(passed_class:the_game) {
			main_class = passed_class;
			play_button.addEventListener(MouseEvent.CLICK, on_play_button_clicked);
			back_button.addEventListener(MouseEvent.CLICK, on_back_button_clicked);
		}
		public function on_play_button_clicked(event:MouseEvent) {
			main_class.play_the_game();
		}
		public function on_back_button_clicked(event:MouseEvent) {
			main_class.show_splash();
		}
	}
}

the_game_itself.as

package {
	import flash.display.Sprite;
	import flash.display.SimpleButton;
	import flash.events.MouseEvent;
	public class the_game_itself extends Sprite {
		public var main_class:the_game;
		public function the_game_itself(passed_class:the_game) {
			main_class = passed_class;
			die_button.addEventListener(MouseEvent.CLICK, on_die_button_clicked);
		}
		public function on_die_button_clicked(event:MouseEvent) {
			main_class.show_game_over();
		}
	}
}

game_over.as

package {
	import flash.display.Sprite;
	import flash.display.SimpleButton;
	import flash.events.MouseEvent;
	public class the_game_itself extends Sprite {
		public var main_class:the_game;
		public function the_game_itself(passed_class:the_game) {
			main_class = passed_class;
			die_button.addEventListener(MouseEvent.CLICK, on_die_button_clicked);
		}
		public function on_die_button_clicked(event:MouseEvent) {
			main_class.show_game_over();
		}
	}
}

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.

Rate this post: 1 Star

(17 votes, average: 3.94 out of 5)

Loading ...

Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.

Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 24 comments

FrozenHaddock

on December 17, 2008 at 7:58 pm

Thanks, this is very helpful!

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

on December 17, 2008 at 9:54 pm

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

on December 17, 2008 at 10:08 pm

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

on December 17, 2008 at 11:27 pm

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:

stage.add…

it works?

help?!
RJ

on December 18, 2008 at 12:45 am

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
Lanogame

on December 18, 2008 at 9:28 am

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

on December 18, 2008 at 1:58 pm

sorry emanuele…

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

http://www.atomicobject.com/pages/Naming+Conventions
sam

on December 18, 2008 at 7:29 pm

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)
Weekly Shared Items - 19. December, 2008 « toxin 2.0

on December 19, 2008 at 9:13 am

[...] Designing the structure of a Flash game – AS3 version [...]
David

on December 22, 2008 at 5:17 am

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

on December 23, 2008 at 7:05 pm

Hi.

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

addEventListener(KeyboardEvent.Key_DOWN, keyDownHandler);
or
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

on December 28, 2008 at 6:39 am

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

on December 28, 2008 at 10:52 pm

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

on December 30, 2008 at 10:49 am

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.
Designing the structure of a Flash game - AS3 version - Part 2 : Emanuele Feronato

on January 2, 2009 at 10:47 pm

[...] added some new features to Designing the structure of a Flash game – AS3 version game template and wanted to share the result with [...]
Adam

on January 13, 2009 at 12:53 am

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

1136: Incorrect number of arguments. Expected 0.
samuvagyok

on January 14, 2009 at 11:44 am

The game_over.as code in the article is same as the_game_itself.as code. I think it’s a mistake..
Helpful one, thanks!
S
Yu-Chung Chen

on March 26, 2009 at 5:04 pm

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

on March 27, 2009 at 1:12 am

Hi Emanuele,

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

Thanks for this tutorial
sebastian

on May 12, 2009 at 7:33 pm

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

on June 16, 2009 at 3:04 am

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

on January 7, 2010 at 6:41 pm

“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.
Criando a estrutura de um jogo em flash – 1ª parte « Tentativa de Programação

on April 28, 2011 at 6:21 am

[...] menus de um possível jogo, com os botões e as telas e tudo mais. Estou usando como guia o site do Emanuele Feronato, que apesar do nome, é [...]
creare gioco online - Forum di Tom's Hardware

on September 12, 2011 at 6:18 pm

[...] [...]

Emanuele Feronato

italian geek and PROgrammer

Designing the structure of a Flash game – AS3 version

This post has 24 comments

FrozenHaddock

substence

sam

Nathan

RJ

Lanogame

Pippo

sam

Weekly Shared Items - 19. December, 2008 « toxin 2.0

David

Tom

ellison

Edward

Arc

Designing the structure of a Flash game - AS3 version - Part 2 : Emanuele Feronato

Adam

samuvagyok

Yu-Chung Chen

Cesar The Brave

sebastian

chire

e

Criando a estrutura de um jogo em flash – 1ª parte « Tentativa de Programação

creare gioco online - Forum di Tom's Hardware

Flash Game Development by Example

Flash games don’t have to suck!

Protect from Flash decompilers

Top categories

All categories