|
[ Download this article in eBook form ]
Learn how to make a Flash game within minutes
with no prior scripting
knowledge!
This step-by-step guide will show you how to make an entertaining
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.
As a special thank you for reading this article I’m giving the complete
source of game.fla, which you can use for whatever purposes you want, private
or commercial. You must however give credit to GameInnovator.com for using any
part of the source in your projects. This flash file is made for ActionScript 2.0.
Download the game source code here
Help decide what information you want to see about flash game design by letting us know what you love best about creating flash games.
Fill in a quick, 7-question survey and we'll be able to provide you with the best possible information
suitable to your needs.
What do you love best about designing flash games?
Without further ado, let us fire up our favorite Flash tool. There are
many tools available, however I recommend using Adobe Flash CS4 as it is currently the best flash tool available.
Adobe Flash CS4 Professional - Full
... and after working on your game do not forget to take a break. Learn some new poker tips and develop a texas holdem strategy that will help you win.
Did you know you can win at keno in just minutes when you learn the keno odds and probabilities at GamblingCity.net!
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
co lour 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 registration point as appropriate. For this tutorial you should set the registration point to be in the center for all move clips.
4. Set the behavior as Movie Clip and choose an appropriate name. This name
is not the instance name. Click here
for an illustration.
5. Select the new Movie Clip. 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.
Click here for a screenshot of a
possible set up scene.
Let’s make things happen
We’ll create some basic behaviors 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 < 640) {
Also, change the line:
} else if (Key.isDown(Key.LEFT)) { to:
} else if (Key.isDown(Key.LEFT) 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 < 0){xmove = Math.abs(xmove)}
if(this._y > 480){ymove = Math.abs(ymove) * -1}
if(this._y < 0){ymove = Math.abs(ymove)}
}
Try running the game now. The alien should select a random direction and speed
and bounce around the stage.
You should move the explosion, alien laser and player projectile off of the
stage. This is because these are the templates that will be copied whenever
necessary and so they will remain throughout the entire game.
Setting the score
Lets add some texts to display the score. Select the text tool and create two text objects in one of the corners, stacked on top of each other. Write "Score:" in the top one and "High Score:" in the bottom one.
Make sure that they are long enough to accommodate the text along with the score in a single line.
Change the properties in both text objects to be dynamic text. Set the "var" property to score in the score text and highscore in the highscore text.
The "var" property is the name of the root variable that the text objects will pull their data from to display. For example, if the score variable is "score: 50" then that's what the score text will display.
A new hope
Time to give our ship some offensive weaponry.
Select the frame that you are working in. This should be the first one on the
left.
Go to the Actions panel at the bottom and insert the following code:
//The stuff below this will only be executed once on this frame
//This will set the score and highscore to 0 on application start
scorenumber = 0;
highscorenumber = 0;
//This will create the arrays which basically stores stuff in numbered slots
Explosions = new Array();
BadShots = new Array();
PlayerShots = new Array();
//This is to create the unique IDs
PShotID = 0;
BShotID = 0;
ExplosionID = 0;
//This is to create the playershot timer, so that it only shoots when ready
PShotTimer = 0;
//This one is required because each instance works on its own "layer"
//Instances cant be on the same layer, hence the use of a unique ID
UniqueID = 10;
//This is to stop from entering the next frame in our timeline
stop();
//This stuff runs 30 times a second
this.onEnterFrame = function()
{
//timer goes down every time the frame is entered again
if(PShotTimer > 0){
-- PShotTimer;
}
//test for space key down
if(Key.isDown(Key.SPACE))
{
if(PShotTimer < 1)
{
//increment
the unique id and id for playershots
PShotID
= PShotID + 1;
UniqueID
= UniqueID + 1;
//loop
back to 1 if there are many shots existing
if
(PShotID == 10) {PShotID = 1}
//run
function to make shot
PlayerShots[PShotID]=
MakeObject("PShot",PlayerShotT,UniqueID,PlayerShip._x,PlayerShip._y);
//Set
the timer so that the player must wait 10 frames before firing again
PShotTimer
= 10;
}
}
}
//function to work out distance between objects
md = function (x1, y1, x2, y2)
{
x = x1 - x2
y = y1 - y2
var thing =Math.sqrt((x * x) + (y * y))
if (thing == 0) {thing = 999}
return(thing);
}
//making instances or "copies" of the templates
MakeObject = function(instname,template,id,x,y)
{
// make temporary variable
var temp;
//assign name
var name = instname + id;
//make new instance from template
var temp = template.duplicateMovieClip(name, id);
//set its x and y coordinates
setProperty (name, _x, x);
setProperty (name, _y, y);
//return the object to whatever called this function
return temp;
}
Double-click on your explosion that you made. Now convert the explosion again
into a Symbol and choose Graphic. You should now have a Graphic
within a MovieClip for your explosion.
Create an animation to your liking that basically plays out the explosion from
start to finish. On the last frame, put this code in:
this.onEnterFrame = function()
{
this.removeMovieClip();
}
This will remove the explosion once it finishes its animation. Click here
for an example.
This won’t however remove the original explosion, only the instance.
This is why you should keep this object away from the stage so that it is not
seen.
Go back to your scene by clicking something along the lines of Scene1 on the
top left.
Select the player’s projectile and insert the following code:
//this is triggered when the clip loads
onClipEvent (load)
{
xmove = random(5) - random(5); //comments can also
go after statements
ymove = (random(5) + 15) * -1; //this sets the ymovement
randomly
}
//this is triggered every time a new frame is entered, in this case 30 times
a sec
onClipEvent (enterFrame)
{
//lets move the player's shot around
this._x = this._x + xmove;
this._y = this._y + ymove;
//destroy this if it reaches the top
if(this._y < 0){this.removeMovieClip();}
//test to see if this is colliding with the alien
col = _root.md(_x, _y, _root.Alien._x, _root.Alien._y)
//you can change 40 to another number if shots seem
to pass through
if(col < 40)
{
//increments the IDs and creates
an explosion
//notice that _root. is put
in front
++ _root.UniqueID
++ _root.ExplosionID
_root.Explosions[_root.ExplosionID]
= _root.MakeObject("Explosion",_root.ExplosionT,_root.UniqueID,_root.Alien._x,_root.Alien._y);
//"resets" the alien
_root.Alien._x = random(640)
_root.Alien._y = random(480)
_root.Alien.xmove = random(15)
- random(15); //comments can also go after statements
_root.Alien.ymove = random(15)
- random(15); //this sets the ymovement randomly
//increases the score by one and updates the score variable for the text
++_root.scorenumber;
_root.score = "Score " + _root.scorenumber; //puts a string and number together
//destroys this instance
//once the instance is gone,
no further actions can be performed
this.removeMovieClip();
}
}
Run the game now and use SPACEBAR to shoot. By now your ship
moves around, shoots and blows up the alien on a direct hit. Only a couple more
pieces of code left!
The alien strikes back
Aliens never come in peace, so select the alien and insert this
code at the bottom, but before the end “}” brace:
//this is to get the alien to fire randomly
fire = random(20);
//one in 20 chance of firing every frame!
if(fire == 1)
{
_root.BShotID = _root.BShotID
+ 1;
_root.UniqueID = _root.UniqueID
+ 1;
//run function to make shot
_root.BadShots[_root.BShotID]=
_root.MakeObject("BShot",_root.AlienShotT,_root.UniqueID,_root.Alien._x,_root.Alien._y);
}
The bottom of the alien’s code should look something like this:
Finally, select the alien’s laser and add this code:
//this is triggered when the clip loads
onClipEvent (load)
{
xmove = random(5) - random(5); //comments can also
go after statements
ymove = (random(5) + 15); //this sets the ymovement
randomly
}
//this is triggered every time a new frame is entered, in this case 30 times
a sec
onClipEvent (enterFrame)
{
//lets move the player's shot around
this._x = this._x + xmove;
this._y = this._y + ymove;
//destroy this if it reaches the top
if(this._y > 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 < 25){
//increments the IDs and creates an explosion
//notice that _root. is put in front
++ _root.UniqueID
++ _root.ExplosionID
_root.Explosions[_root.ExplosionID] = _root.MakeObject("Explosion",_root.ExplosionT,_root.UniqueID,_root.PlayerShip._x,_root.PlayerShip._y);
//"resets" the player's ship
_root.PlayerShip._x = random(640)
//checks to see if score greater than highscore, then updates
if(_root.scorenumber > _root.highscorenumber)
{
_root.highscorenumber = _root.scorenumber;
_root.highscore = "High Score: " + _root.highscorenumber;
}
//resets the score to 0 and updates text
_root.scorenumber = 0;
_root.score = "Score " + _root.scorenumber;
//destroys this instance
//once the instance is gone, no further actions can be performed
this.removeMovieClip();
}
}
Congratulations, you now have a functional game! Of course, this article barely
scratches the surface of what is possible with Flash.
Addicting and complex games can be made with the wonderful tool known
as flash, and as your first glimpse into Flash game design
I hope it has been enjoyable.
As for what to do next, I suggest adding in a nice background in a layer underneath
the current layer to get rid of the dull white, and perhaps to examine some
of the commented code that has been used.
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.
Written By Damien D
The source code is free for private and commercial purposes. However, no part
of this page can be reproduced on another website without the written permission
from GameInnovator.com
Get source code & commentary of a flash adventure game
Source code and commentary of a flash adventure game: Cavern Escape
Get the source code and see the commentary for the award-winning flash adventure game Cavern Escape. |
