Flash game creation tutorial – part 1 (with AS3 classes)

October 31, 2008 • Actionscript 3, Flash, Game design by Emanuele Feronato • 23 Comments

Old readers should remember Flash game creation tutorial – part 1… it’s an ond AS2 tutorial about the creation of a game like Ball Revamped and its sequels.

Later Tim Edelaar coded it into AS3 in Step by step AS3 translation of Flash game creation tutorial – part 1, but with the whole code in a single class, and now it’s time for me to release the AS3 version of the tutorial using classes.

We are going to use three actionscript files: as3circle.as for the game, circle.as for the hero (the ball) and keys.as for keyboard input.

keys.as is the same class used in Introduction to AS3 classes so you can understand the importance of writing classes: I won’t have to worry for keyboard input anymore (well… as long as I am using arrows and space keys)

How to link classes

Linking classes is very important in AS3, that’s how you should manage class linking:

This is the movie properties panel:

Writing as3circle in the Document class field will set as3circle.as as the main class file.

This is the circle object properties panel:

Writing circle in the Class field will set circle.as as the class file for the circle object.

Now your .fla file and the three .as files must be in the same path.

And this is the code for every file… I don’t think there is any need to comment it because it was already commented in dozens of posts… anyway if you need comments, just ask for them in… the comments.

as3circle.as file:

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
28
29
30

package {
	import flash.display.Sprite;
	import flash.events.Event;
	public class as3circle extends Sprite {
		public var keyboard_input:keys;
		public var circle_hero = new circle;
		public function as3circle() {
			addChild(circle_hero);
			circle_hero.init();
			var keyboard_sprite = new Sprite();
			addChild(keyboard_sprite);
			keyboard_input = new keys(keyboard_sprite);
			stage.addEventListener(Event.ENTER_FRAME,on_enter_frame);
		}
		public function on_enter_frame(event:Event) {
			if (keyboard_input.is_left()) {
				circle_hero.apply_force(-1,0);
			}
			if (keyboard_input.is_right()) {
				circle_hero.apply_force(1,0);
			}
			if (keyboard_input.is_up()) {
				circle_hero.apply_force(0,-1);
			}
			if (keyboard_input.is_down()) {
				circle_hero.apply_force(0,1);
			}
		}
	}
}

circle.as file:

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
28
29
30
31
32
33
34
35
36
37
38

package {
	import flash.display.Sprite;
	import flash.events.Event;
	public class circle extends Sprite {
		private var x_speed:Number;
		private var y_speed:Number;
		private var power:Number;
		private var friction:Number;
		private var gravity:Number;
		public function circle() {
			addEventListener(Event.ENTER_FRAME, movement);
		}
		private function movement(e:Event) {
			x+=x_speed;
			y+=y_speed;
			rotation += x_speed;
			y_speed += gravity;
			x_speed *= friction;
			y_speed *= friction;
			if (x>500 || x<0 ||  y >400 || y<0) {
				init();
			}
		}
		public function apply_force(x_force,y_force) {
			x_speed += (x_force*power);
			y_speed += (y_force*power);
		}
		public function init() {
			gravity = 0.1;
			power = 0.66;
			friction = 0.99;
			x_speed = 0;
			y_speed = 0;
			x = 250;
			y = 200;
		}
	}
}

keys.as file

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

package {
	import flash.events.KeyboardEvent;
	public class keys {
		private var press_left = false;
		private var press_right = false;
		private var press_up = false;
		private var press_down = false;
		private var press_space = false;
		public function keys(movieclip) {
			movieclip.stage.addEventListener(KeyboardEvent.KEY_DOWN, key_down);
			movieclip.stage.addEventListener(KeyboardEvent.KEY_UP, key_up);
		}
		public function is_left() {
			return press_left;
		}
		public function is_right() {
			return press_right;
		}
		public function is_up() {
			return press_up;
		}
		public function is_down() {
			return press_down;
		}
		public function is_space() {
			return press_space;
		}
		private function key_down(event:KeyboardEvent) {
			if (event.keyCode == 32) {
				press_space = true;
			}
			if (event.keyCode == 37) {
				press_left = true;
			}
			if (event.keyCode == 38) {
				press_up = true;
			}
			if (event.keyCode == 39) {
				press_right = true;
			}
			if (event.keyCode == 40) {
				press_down = true;
			}
		}
		private function key_up(event:KeyboardEvent) {
			if (event.keyCode == 32) {
				press_space = false;
			}
			if (event.keyCode == 37) {
				press_left = false;
			}
			if (event.keyCode == 38) {
				press_up = false;
			}
			if (event.keyCode == 39) {
				press_right = false;
			}
			if (event.keyCode == 40) {
				press_down = false;
			}
		}
	}
}

And we have our oooold game running in AS3 with classes.

Download the source code and enjoy.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (13 votes, average: 4.54 out of 5)
Loading ... 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 23 comments

  1. Robin

    on October 31, 2008 at 2:56 pm

    Awesome Emanuele! Hope to see more tutorials about it in the future :D

  2. dim

    on October 31, 2008 at 3:19 pm

    man, youre rss is giving me an error and i can’t subscribe :/

  3. Jerry Young

    on October 31, 2008 at 3:58 pm

    I guess I need to get a newer version of Flash and begin learning AS3. Great tutorial as always.

  4. Daniel Rodriguez

    on October 31, 2008 at 7:33 pm

    AS3 rocks! :D
    Just love OOP.

  5. oliver_l1

    on October 31, 2008 at 10:18 pm

    AS2 NO MORE!

  6. Kelvin Luck

    on October 31, 2008 at 11:02 pm

    One thing I’d mention is that it is considered best practices for all class names to begin with an uppercase letter.

    @dim – I had the same problem but if you copy and paste the URL directly into google reader (or whatever RSS reader you use) then it works fine…

  7. Adam

    on November 1, 2008 at 11:02 am

    For those still using AS 2, it’s worth noting that classes and all of the functionality shown in this tutorial are available in AS 2. Just look up classes in the Learning Actionscript 2 ebook that comes with Flash (found in the help docs or on the Adobe site if you don’t have it).

    There are some differences in syntax (packages for example are declared in the class name in AS 2 and of course event handlers are specified differently) but it could quite easily be adapted.

    In fact, AS 3 added very little new functionality to the OOP side of Flash (some namespaces and a few other features). It was more of a redesign which has resulted in improved performance and consistency.

  8. Mini Chris

    on November 2, 2008 at 7:42 am

    Hey Emanuele is it just me or does AS3 things seem to run slower. I thought they were meant to be faster =(

    And also im trying to learn how to hitTest using colors so if my character falls and lands on a black(#000000)bitmap it hitTest’s and sets yspeed to 0 to stop him from falling, but i cant understand how to do that.

    Also im trying to figure out how to make destructible environment but im not getting anywhere with that.

    Have you got any points or another place that has something easy to understand on these things? I cant manage to find any.

  9. Mini Chris

    on November 2, 2008 at 7:43 am

    and also im using AS2 but will learn AS3 if i have to, to make it possible.

  10. AS3 Flash game creation tutorial - part 2: coins : Emanuele Feronato

    on November 4, 2008 at 4:15 pm

    [...] the previous step I showed you how to create a simple “move-the-ball” game using AS3 [...]

  11. My first adventure into Actionscript 3.0 at

    on December 14, 2008 at 8:43 pm

    [...] here’s my little game-esque thingamajig created with Actionscript 3.0 by following this tutorial by Emanuele Feronato (Yes, it’s a translation of an older AS2 [...]

  12. Monkeyfetus

    on January 4, 2009 at 1:01 am

    I need the commented code. Specifically, I need help understanding lines 9-12 on keys.as

    I understand it’s purpose: to allow access to the stage, but I’m not sure exactly how it works. When and what is the movieclip variable passed to the function?

    Explaining lines 5 and 10-12 of as3circle.as would help too.

    I could just copy-paste your code into my game and get on with it, but I’m trying to learn something by recreating it, and I’m stuck. My “key_down” function isn’t being called.

  13. Monkeyfetus

    on January 5, 2009 at 12:54 am

    Nevermind. I think I found out what I’ve been doing wrong. I didn’t realize that line 12 of as3circle.as calls the function defined on line 9 of keys.as

    I named my “keys” function something different than my “Keys” class, which caused the function to never be called, leaving me with no listeners on the stage.

    Aside from that, though. You really should comment your code better. As tedious as it is, it is also very helpful for anybody looking at your code, or if you yourself are trying to improve it. I’m really in no place to lecture you, though.

  14. tomdeaap

    on April 21, 2009 at 4:26 pm

    Can you please explain the keys class, I don’t really undestand what the is_? functions do… What’s the return for ….

  15. Meh_c00kie

    on May 30, 2009 at 5:49 pm

    Hi I tried this but it dosent work with animated MCs how do you fix this?

  16. Prandini

    on August 8, 2009 at 8:27 am

    Great example!

  17. jose

    on July 24, 2010 at 1:10 am

    if it wasn’ for your tutorials i would have never started to make asc3 flash games less gettin good at it. thx a lot

  18. De Leon

    on August 12, 2010 at 4:57 am

    Can you post, tell me where to see the comments or send me the comments for the AS in each class.

    Thanks
    De Leon

  19. Create a Flash game like Pixel Purge step 1 – player movement - Emanuele Feronato

    on September 21, 2010 at 11:35 pm

    [...] the player are perfectly centered on the stage. Then, when the ship moves, in a way very similar to Flash game creation tutorial – part 1 (with AS3 classes), the background scrolls in the opposite way, keeping the ship centered in the screen, until it gets [...]

  20. Hiran

    on November 12, 2010 at 8:49 pm

    thanks a lot, not only for this, but for all his tutorials really are very good, simple and complete, congratulations and thank you again.

  21. Simon Wallström

    on December 8, 2010 at 6:37 pm

    Hey Guys!
    I´m having some trouble with this in Flash cs5. I did exactly like the tutorial apart for some different filenames but i´m still getting an error. It says that “init is not a function” in my main.as file…any ideas?

  22. Jeremy

    on January 30, 2011 at 8:55 am

    I apologize in advance if I screw up some terminology here, I’m very new to coding and I’m still in the process of learning myself. However, after analyzing the code, I believe I can help you understand those functions.

    The is_? functions you are referring to are set as public so they can be accessed outside of the keys class. An instance of the keys class has been used in the as3circle class.

    as3circle has an enter frame function running and checks the value of each one of those functions every time the frame is entered.

    For example, line 16 of as3circle:

    “if (keyboard_input.is_left()”

    is checking if that is true or false. The .is_left portion calls the public function is_left located on line 13 of the keys class. When it calls that function, the function runs through and the “return” does just that.

    Line 14 says “return press_left;” and it checks the value of the variable “press_left” and gives that value to whatever called the function. In this case, that would be line 16 of as3circle. If it’s true, then the force is applied. If it is false, it skips that function and moves on to the next one.

    I hope this helped!

  23. clint

    on June 1, 2011 at 6:07 pm

    all that code and fiddling only to get an ugly circle drop from the middle of the stage and loops!!!?!?!??!

< >