This step by step guide will show you how to create a Flash game quickly and easily.
This article is for people who are just starting to use Flash tools to create interactive things. This article will take you from a blank flash document to an action game in minutes, with anything difficult explained in common, everyday language that you can skip if you want.
So, without further ado, let’s activate our favorite 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 apps and movies. This program is like a user-friendly version of Macromedia Flash, and I’ve used this versatile tool to easily create a variety of applications.
setting the scene
Create a new flash document (File/New menu) and save it as game.fla. This is the layout file that will contain the layout and content of the game.
If you get stuck somewhere in this tutorial, there is a finished game.fla at the bottom of this page that can be downloaded to see how things should look.
Change the document properties (Modify/Document menu) so that the dimensions are 640 by 480 and the frame rate is 30 frames per second. The background color is supposed to be white.
We’ll start by creating the 5 starter items needed for the game to work.
Draw the player’s ship, the alien, the player’s projectile, the alien’s laser, and an explosion in the same frame and layer.
Convert each drawing to a movie clip with its own instance name. Below I will explain in more detail how this is done. More advanced folks can skip right to instance naming.
How to convert a drawing to 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 version of Flash. Choose “Convert to Symbol”. Alternatively, you can use the shortcut by pressing F8.
3. Set the behavior to 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 as required.
The instance names are below:
The player ship video clip 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 of 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 should be used as templates for copies of themselves. This will be explained later.
let’s make things happen
Next, we’ll create some basic behaviors for our Movie Clip objects.
At the moment, the player’s ship is not very responsive. Let’s change that.
Left-click on the player’s ship to select it. Go to the Actions panel at the bottom and enter 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;
}
}
Below I will give an explanation of what this code means. Feel free to skip this explanation if you don’t want to get too involved in ActionScript.
A bit about ActionScript:
onClipEvent(enterFrame){} This is basically a wrapper called a function. This container contains the code that will be executed within it. The function is not executed or executed until something else tells it to. “onClipEvent” is the name of the function. Flash reserves some names like “onClipEvent” for certain things to work correctly.
The text between the two square brackets “(” and “)” are the parameters that are passed to the function. Parameters are passed from the source that executed them. There can be more than one parameter, for example, “(var1,test2)”. These parameters can normally be used inside the function. The parameters will be described in more detail later.
What’s between the braces “{” and “}” is the actual code inside the function being executed.
Things like “this._x= this._x + 15;” are called statements. Declarations are pieces of code that tell something to do something else. Usually there is at most one statement on each line. Each statement must end with “;” so Flash knows when the statement ends.
Flash ignores comments, but it helps the coder know what his code is doing. Comments begin with “//” 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 what is in parentheses is true. If everything is true, the code in braces is executed.
else if (Key.isDown(Key.LEFT)) {} This can only come after the “if” statement or another “else if” statement. Basically, if the things in the above test are false, then the things in this “else if” statement are tested. If the test in parentheses is true, then the code in braces is executed.
This little piece of code will allow you to move the ship from left to right. Preview your flash animation (CTR-ENTER) and try to move the ship with the left and right arrow buttons.
The ship can move out of bounds, so we need to add 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’s ship must stay within the limits.
Now would be a good time to place the player’s ship at the bottom of the stage, as it will shoot upwards.
It’s time to give the alien some life. Select the alien and place this code in the ActionScript part:
// this is triggered when the clip is loaded
onClipEvent(load)
{
xmove = random(15) – random(15); //comments can also go after declarations
ymove = random(15) – random(15); // this sets the movement and random
this._x = random(640); //this sets the x and y position to random
this._y = random(480);
}
// this is triggered every time a new frame is entered, in this case 30 times per second
onClipEvent(enterFrame)
{
//let’s move the alien
this._x = this._x + xmove;
this._y = this._y + ymove;
//bounce the alien if it’s 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 space key down
if(Key.isDown(Key.SPACE))
{
if(PShotTimer 480){this.removeMovieClip();}
// test to see if this is hitting the player
col = _root.md(_x, _y, _root.PlayerShip._x, _root.PlayerShip._y)
//you can change 40 to another number if the shots seem to go through
yes (column here
I hope you have enjoyed following this guide as much as I have enjoyed writing it.
Once you’ve had a chance to sit down and absorb this article, please send us your comments and suggestions; your comments are greatly appreciated.
Written by Damien D.
