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

October 31, 2008 by Emanuele Feronato
Filed Under Actionscript 3, Flash, Game design • 16 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 (9 votes, average: 4.44 out of 5)
Loading ... Loading ...
If you found this post useful, please consider a small donation.
» 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.

16 Responses to “Flash game creation tutorial – part 1 (with AS3 classes)”

  1. Robin on October 31st, 2008 2:56 pm

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

  2. dim on October 31st, 2008 3:19 pm

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

  3. Jerry Young on October 31st, 2008 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 31st, 2008 7:33 pm

    AS3 rocks! :D
    Just love OOP.

  5. oliver_l1 on October 31st, 2008 10:18 pm

    AS2 NO MORE!

  6. Kelvin Luck on October 31st, 2008 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 1st, 2008 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 2nd, 2008 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 2nd, 2008 7:43 am

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

  10. Monkeyfetus on January 4th, 2009 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.

  11. Monkeyfetus on January 5th, 2009 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.

  12. tomdeaap on April 21st, 2009 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 ….

  13. Meh_c00kie on May 30th, 2009 5:49 pm

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

  14. Prandini on August 8th, 2009 8:27 am

    Great example!

Leave a Reply




Trackbacks

  1. AS3 Flash game creation tutorial - part 2: coins : Emanuele Feronato on November 4th, 2008 4:15 pm

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

  2. My first adventure into Actionscript 3.0 at on December 14th, 2008 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 [...]

flash games company