Quick Article On Making A Flash Game

This step-by-step guide will show you how to make an Flash game quickly and easily

This article is for people who are just beginning to use Flash tools to create interactive stuff. This article will take you from a blank flash document to an action game in minutes, with any tricky things explained in ordinary, everyday language that you can skip over if you want.

So without further ado, let us fire up our favourite Flash tool. There are many tools available, so I will use Macromedia Flash as it is the most universally used tool.

I recommend Sothink SWF Quicker to budding flash designers for creating flash applications and movies. This program is like an easy to use version of Macromedia Flash, and I have used this versatile tool to easily make a variety of applications.

Setting the scene

Create a new flash document (menu File/New) and save it as game.fla. This is the design file that will contain the design and content for the game.

If you get stuck anywhere on this tutorial there is a finished game.fla at the bottom of this page that can be downloaded to see what things should look like.

Change the document properties (menu Modify/Document) so that the dimensions are 640 by 480 and so that the frame rate is 30 frames a second. The background colour is assumed to be white.

We will start by creating the 5 initial objects needed to make the game work.

Draw the player’s ship, the alien, the player’s projectile, the alien’s laser and an explosion on the same frame and layer.

Turn each drawing into a Movie Clip with its own instance name. I will explain below in more detail how this is done. More advanced people can skip to the naming of the instances.

How to turn a drawing into a Movie Clip:

1. Select the drawing by dragging a box around it.

2. Convert to a Movie Clip by going to the menu and then Modify or Insert depending on the Flash version. Choose “Convert to Symbol”. Alternatively you could use the shortcut by pressing F8.

3. Set the behaviour as Movie Clip and choose an appropriate name. This name is not the instance name. Click here for an illustration.

4. Select the new Movie Clip and in the properties panel at the bottom set the instance name to whatever is needed.

The instance names are below:

The Movie Clip for the player’s ship is called PlayerShip
The Movie Clip for the alien is called Alien
The Movie Clip for the player’s projectile is called PlayerShotT
The Movie Clip for the alien’s laser is called AlienShotT
The Movie Clip for the explosion is called ExplosionT

Notice how there is a T at the end of certain instance names. This is a convenience to indicate that objects with a T at the end are to be used as templates for copies of themselves. This will be explained later.

Let’s make things happen

We’ll create some basic behaviours for our Movie Clip objects next.

At the moment the player’s ship isn’t too responsive. We’re going to change that.

Left click on the player’s ship to select it. Go to the Actions panel at the bottom and enter in the following code in the white part on the right:

onClipEvent(enterFrame)
{
if(Key.isDown(Key.RIGHT)) {
//this will move the player 15 units to the right
this._x = this._x + 15;
} else if (Key.isDown(Key.LEFT)) {
//this will move the player 15 units to the left
this._x = this._x – 15;
}
}

I’ll give some explanation below as to what this code means. Feel free to skip ahead of this explanation if you don’t want to get heavily involved in ActionScript.

A bit about ActionScript:

onClipEvent(enterFrame){} This is basically a container that’s called a function. This container holds code to be run within it. The function isn’t executed or run until something else tells it to. “onClipEvent” is the name of the function. Some names such as “onClipEvent” are reserved by Flash in order for certain things to run properly.

The text in between the two brackets “(” and “)”are any parameters that are passed to the function. Parameters are passed from the source that executed it. There can be more than one parameter eg “(var1,test2)”. These parameters can usually be used within the function. Parameters will be described in more detail later.

The stuff in between curly braces “{” and “}” is the actual code within the function that is executed.

Things like “this._x= this._x + 15;” are called statements. Statements are bits of code that tells something to do something else. There is usually at most one statement every line. Every statement must end with “;” so that Flash knows when the statement ends.

Comments are ignored by Flash, but help the coder know what their code is doing. Comments begin with a “//” and continue for the entire line.

if(Key.isDown(Key.RIGHT)) {} This is called an if statement. This is basically a test to see if the stuff within the brackets is true. If the stuff is true then the code within the curly braces is run.

else if (Key.isDown(Key.LEFT)) {} This can only go after the “if” statement or another “else if” statement. Basically, if the stuff in the previous test is false, then the stuff in this “else if” statement is tested. If the test in the brackets is true than the code within the braces is executed.

This little piece of code will let you move the ship around from left to right. Preview your flash animation (CTR-ENTER) and try moving the ship with the left and right arrow buttons.

The ship can move outside the boundaries so we need to add in a bit more code to restrict its movement.

Change the line:

if(Key.isDown(Key.RIGHT )) {

to:

if(Key.isDown(Key.RIGHT) and this._x 0) {

Preview your animation again. This time the player ship should stay within the boundaries.

Now would be a great time to place the player’s ship around the bottom of the stage, as it will be firing upwards.

Time to breathe some life into the alien. Select the alien and put this code into the ActionScript part:

//this is triggered when the clip loads
onClipEvent (load)
{
xmove = random(15) – random(15); //comments can also go after statements
ymove = random(15) – random(15); //this sets the ymovement randomly
this._x = random(640); //this sets the x and y position randomly
this._y = random(480);
}

//this is triggered every time a new frame is entered, in this case 30 times a sec
onClipEvent (enterFrame)
{
//lets move the alien around
this._x = this._x + xmove;
this._y = this._y + ymove;

//bounce the alien if it is out of bounds
if(this._x > 640){xmove = Math.abs(xmove) * -1}
if(this._x 480){ymove = Math.abs(ymove) * -1}
if(this._y 0){
– PShotTimer;
}

//test for space key down
if(Key.isDown(Key.SPACE))
{
if(PShotTimer 480){this.removeMovieClip();}

//test to see if this is colliding with the player
col = _root.md(_x, _y, _root.PlayerShip._x, _root.PlayerShip._y)

//you can change 40 to another number if shots seem to pass through
if(col here

I hope you have enjoyed following this guide as much as I have enjoyed writing it.

After you have had a chance to sit back and absorb this article, please send us your comments and suggestions – your feedback is greatly appreciated.