Multimedia Web Programming using Flash and ActionScript
ITApps 2010/11
HO-13: Creating a Simple Racing Car Game in Flash
Objectives


To learn how to create a simple interactive game and score counter in Flash.
To extend your understanding of programming in ActionScript 3.0, including the using
of ‘.as files’ and ‘packages’.
Setting up the Files
The first thing you are going to do is create a background for your movie which looks like a
racing track/circuit to which you will add a racing car:
1. First of all you need to download the starter file mpho13_start.zip into a new folder
called mpho13. This file contains a number of pre-prepared graphic images that you will
use to create the car game.
2. Open the flash file and modify the document so that it is 640 x 500 pixels in dimension and
set to 24 fps. Chose a suitable background colour (grey or brown, as this will be the colour
of the race track).
3. Save the document as RacingGame.fla in your sub-folder mpho13.
4. Next create a new ActionScript file and save this as RacingGame.as, in the sub-folder
mpho13. Note: So far you have simply added ActionScript code to an Actions layer on the
timeline of the main movie. But as you will discover in this handson exercise, you can also
create your ActionScript code in a separate .as file. This can then be used to control your
Flash movie (.fla file). However, you must remember to save your .as and .fla files in the
same folder.
Setting up the Car Graphic
5.
6.
Open your RacingGame.fla and make sure you have a copy of the Car movieclip in your
library as you will need this during the game. Note: this will be called dynamically from the
code.
Drag a copy of the Ground movieclip from the library on to the stage. As this will form a
static background for the game it doesn’t have to be generated by your ActionScript code.
Set its x and y to 0.0 and give it an instance name: land_mc under properties. Note: if you
wanted to, you could create your own track by drawing a green square and erasing the
road. Then make sure all the grass is grouped and converted in to a movieclip. You could
also add a start/finish line, but not in land_mc as the track must be clear for the hit test.
Getting the external code to link
7.
8.
Because the ActionScript is contained in an external .as file you will be using public
functions and classes enclosed in a package tag.
You can think of packages as the directories and subdirectories of class files, helping to
organise them. Only one class can be used per package. A package is a special type of
namespace (commonly used in .net) that is guaranteed to be known at compile time and
organises your class files. Packages give structure, preven duplication of names and allow
you to bundle class definitions together, facilitating code sharing. Public/internal/protected/
private are access modifiers. They control which external classes have access to them.
Open your .as file and insert the following code
package {
/*call
import
import
public
}
}
all event and display libraries*/
flash.events.*;
flash.display.*;
class RacingGame extends MovieClip {
HO-13: Creating a Simple Game in Flash
Page 1 of 6
Multimedia Web Programming using Flash and ActionScript
ITApps 2010/11
9.
Similarly to .net and Ajax we have to call/ load the specific libraries we need. (* calls all
under the events and display categories). Using "*" in an import statement is like using a
wildcard when listing a directory, all the classes/files in that directory are included.
10. Next label the Document class in the properties panel RacingGame in the fla file.
Note: that the program offers to add it to the swf if it doesn’t match the .as public class or
the .as hasn’t yet been saved. The Document class must be public, match the file name
and the class of the root.
Adding car to the stage
11. You now need to call in the Car movieclip from the Library and set its starting position,
which you will do within a function.
12. Move to your .as file and insert the following code:
package {
/*call all event and display libraries*/
import flash.events.*;
import flash.display.*;
public class RacingGame extends MovieClip {
// Create the littlecar MovieClip from Car
var littlecar:MovieClip = new Car();
public function RacingGame() {
// Add the littlecar to the stage and give it starter settings
addChild(littlecar);
littlecar.x = 550;
littlecar.y = 370;
littlecar.rotation = -90;
}
}
}
Movement – Cursor Keys
13. The car should now be on the stage but you can’t control it. So you need to insert code
that enables the user to control the car using the cursor keys.
14. To do this you need to insert the following code under the RacingGame public class:
public class RacingGame extends MovieClip {
// Set vars for key codes.
static const upKey = 38;
static const downKey = 40;
static const rightKey = 39;
static const leftKey = 37;
// Set vars to keep track of which keys are pressed. Boolean true or false,
true if key pressed.
private var keyPressedRight:Boolean;
private var keyPressedLeft:Boolean;
private var keyPressedUp:Boolean;
private var keyPressedDown:Boolean;
// Create the littlecar MovieClip from a pre-made Car() MovieClip in flash
var littlecar:MovieClip = new Car();
public function RacingGame() {
}
}
HO-13: Creating a Simple Game in Flash
Page 2 of 6
Multimedia Web Programming using Flash and ActionScript
ITApps 2010/11
15. This code assigns the key numbers (ASCII key code values that are used to identify the
keys in ActionScript) and sets the keypress variables as Boolean, so it can be only true or
false, in this case up or down.
16. Next add the following functions to ‘listen’ for the key movement:
// This function sets the Boolean vars based on whether the relevant key has
been pressed
public function keyDownListener(e:KeyboardEvent):void {
switch (e.keyCode) {
case leftKey :
keyPressedLeft=true;
break;
case rightKey :
keyPressedRight=true;
break;
case upKey :
keyPressedUp=true;
break;
case downKey :
keyPressedDown=true;
break;
}
}
// This function sets the Boolean vars based on whether the relevant key has
not been pressed
public function keyUpListener(e:KeyboardEvent):void {
switch (e.keyCode) {
case leftKey :
keyPressedLeft=false;
break;
case rightKey :
keyPressedRight=false;
break;
case upKey :
keyPressedUp=false;
break;
case downKey :
keyPressedDown=false;
break;
}
}
17. Event Listeners allow objects to become active and listen for specific instructions. This
code uses a pair of listeners to look for key press and release. These are called with the
public function RacingGame:
public class RacingGame extends MovieClip {
// Set vars for key codes.
static const upKey = 38;
static const downKey = 40;
static const rightKey = 39;
static const leftKey = 37;
HO-13: Creating a Simple Game in Flash
Page 3 of 6
Multimedia Web Programming using Flash and ActionScript
ITApps 2010/11
// Set vars to keep track of which keys are pressed. Boolean true or false,
true if key pressed.
private var keyPressedRight:Boolean;
private var keyPressedLeft:Boolean;
private var keyPressedUp:Boolean;
private var keyPressedDown:Boolean;
// Create the littlecar MovieClip from a pre-made Car() MovieClip in flash
var littlecar:MovieClip = new Car();
public function RacingGame() {
// Set event listeners to track key presses for both up and down
stage.addEventListener(KeyboardEvent.KEY_DOWN,keyDownListener);
stage.addEventListener(KeyboardEvent.KEY_UP,keyUpListener);
}
}
18. Now these are defined you need to assign some action to these keys to alter the car’s
movement. You could just +1 to the x or y co ordinates to move the car but creating a
speed variable would produce more realistic car movement. You will also rotate the car
when the left and right keys are pressed. These in-game adjustments will be added to an
event function.
Movement – Car Speed
19. The next step involves adding a looping function to handle the speed changes, detection
of collisions and scoring within the game:
// This is the main game/animation loop
public function StageController(e:Event):void {
// This rotates the car if key is pressed, only works if speed has a value
if (keyPressedLeft) {
littlecar.rotation -= speed;
}
if (keyPressedRight) {
littlecar.rotation += speed;
}
// This increases the car's speed if the up key is pressed
if (keyPressedUp) {
speed += 1;
}
// Decreases car's speed if down key is pressed, slow decrease for realism
if (keyPressedDown) {
speed -= 1;
} else {
speed *= .9;
}
// Caps speed
if (Math.abs(speed) > 20) {
speed *= .6;
}
HO-13: Creating a Simple Game in Flash
Page 4 of 6
Multimedia Web Programming using Flash and ActionScript
ITApps 2010/11
// This moves the car forward based on car's angle
//Works out angle of car so moves with front first
var scangle:Number = littlecar.rotation * (Math.PI / 180);
// car's angle in radians
var ax:Number = speed*Math.cos(scangle);
// Move the car on the X axis
var ay:Number = speed*Math.sin(scangle);
// Move the car on the y axis
//Hit test with land, ! means NOT
if (!land_mc.hitTestPoint(littlecar.x + ax, littlecar.y + ay, true)) {
littlecar.x += ax;
littlecar.y += ay;
} else {
//if not touching land free to move
speed *= -.3;
}
}
20. You then need to initiate this from within the RacingGame function:
public function RacingGame() {
// Set the game/animation loop
stage.addEventListener(Event.ENTER_FRAME, StageController);
// Set event listeners to track key presses for both up and down
stage.addEventListener(KeyboardEvent.KEY_DOWN,keyDownListener);
stage.addEventListener(KeyboardEvent.KEY_UP,keyUpListener);
}
21. The car should now freely move within the track lines, but stop at the land edge. This is
due to the hit test shown below, so when the land is not touching the car its x and y
movement are unrestricted:
//Hit test with land
if (!land_mc.hitTestPoint(littlecar.x + ax, littlecar.y + ay, true)) {
littlecar.x += ax;
littlecar.y += ay;
} else {
//if not touching land free to move
speed *= -.3;
}
PowerUps
22. A hit test can also be used to decipher if the car has hit power up objects, which can be
used to give a score or change its speed.
23. In your .fla file create a coin, 20 x 20 pixels in dimension, and convert it to a movieclip
called PowerUp.
24. Also create a patch of oil or puddle, 45 x 45 pixels in dimension, and convert it to a
movieclip called PowerDown.
25. Next set these as variables, that we can call in within the game, below the car movie
variable definitions:
26. Within:
public class RacingGame extends MovieClip {
HO-13: Creating a Simple Game in Flash
Page 5 of 6
Multimedia Web Programming using Flash and ActionScript
ITApps 2010/11
// Create the littlecar MovieClip from a pre-made Car() MovieClip in flash
var littlecar:MovieClip = new Car();
// Create the coin MovieClip from a pre-made PowerUp() MovieClip in flash
var coin:MovieClip = new PowerUp();
// Create the oil MovieClip from a pre-made PowerUp() MovieClip in flash
var oil:MovieClip = new PowerDown();
27. Within:
public function RacingGame() {
// Add the littlecar to the stage and give it starter settings
addChild(littlecar);
littlecar.x = 550;
littlecar.y = 370;
littlecar.rotation = -90;
addChild(coin);
coin.x = (Math.random()*560)+40;
coin.y = (Math.random()*420)+40;
addChild(oil);
oil.x = (Math.random()*560)+40;
oil.y = (Math.random()*420)+40;
28. Within:
public function StageController(e:Event):void {
if (coin.hitTestObject(littlecar)) {
coin.x = Math.random()*400+50;
while (land_mc.hitTestPoint(coin.x, coin.y, true)) {
coin.x = (Math.random()*560)+40;
coin.y = (Math.random()*420)+40;
}
//Every PowerUp hit adds to speed
speed += 4;
}
if (oil.hitTestObject(littlecar)) {
oil.x = Math.random()*400+50;
while (land_mc.hitTestPoint(oil.x, oil.y, true)) {
oil.x = (Math.random()*560)+40;
oil.y = (Math.random()*420)+40;
}
//Every Puddle hit deducts from speed
speed -= 4;
}
}
29. You should now be able to interact with powerups/powerdowns whilst the car goes around
the track.
HO-13: Creating a Simple Game in Flash
Page 6 of 6