Emanuele Feronato

Talking about Actionscript 3, Flash and Game development.

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.