How to Make a Flash Game

If you've been wondering how to get started with flash game development, then wonder no more. To get started all you need to do is download the latest flash development tool, Flash CS5 from Adobe. Don't worry, I know $250 seems steep, but you can quickly get up and running with the 30 day trial. If that's not long enough to get you started you might want to try something a bit easier fist.

How To Make a Flash Game: Where to get CS5

I should tell you before we get started that the demo version requires you to register with your first and last name as well as E-mail address, but as I mentioned it's well worth it. To begin simply go to Adobe's demo download page. Once you have arrived click on the download link and you will be asked a few questions. Once you have answered all the questions you will be taken to the download page where a javascript downloader will begin to download the files. If for some reason the downloader fails you will be given the option to manually download the two files.

How To Make a Flash Game: What's next?

To simplify things a bit for you I suggest downloading the source code for my recent game based off of the old source code I found on Game Innovator it's a bit outdated and intended for CS4, but it will do. You can download my source with a Halloween theme here, or download the original source from Game Innovator. Now that you have CS5 and the source code to work with let's begin explaining what everything does.

How To Make a Flash Game: The source.

To start off you should open up the source code using CS5 and right click on any of the objects on the screen. Once in the right click menu, click on "Actions" now what you're looking at is a script. This script controls the various things this object can do. Without this script the object just sits there. Ok the first thing you should notice at the top of this is the function "onClipEvent". The onclipevent function basically means that once that "video" is created it will begin performing the commands inside. If you are familiar with C++ it's kind of like your "main loop".

How To Make a Flash Game: Starting a fresh build.

Now that you have a glimpse at what your source should look like it's time to create a fresh empty pallet and recreate the code. First click on "File" >> "New" >> "Action Script 2.0". Now that you have an empty pallet, let's tell it what size we want, the background color, and FPS. To do this, simply click on "Modify" >> "Document" and a window will pop up. At the top of this window you should see "height" and "width" each with a editable text block next to them.

How To Make a Flash Game: Setting resolution, BG color, and FPS.

For the purposes of this article we will choose 640 x 480. Below the resolution tab you will find a background color tab and a FPS "hyper-link". Click the background color tab and a color pallet comes up. You can choose to make the empty pallet any color you like, my preference is black. Now click on the "blue 24 hyper-link" and a editable text block will appear in its place, type 30 to set the FPS for this "game" to 30. Click OK before closing the window or your settings won't be saved.

How To Make a Flash Game: Your first object.

Now that you have set the resolution BG color and frame rate you need to put something on your screen. Click on "File" >> "Import" >> "Import to stage" >> "Filename" you can use pretty much any picture here. If you get too caught up on the appearance for your first game; you may spend a lot of time doing art rather than programming it. You should now have a picture in the middle of your empty window; you may click on it and move it around if you like.

If you were to run this program right now the object you placed would do nothing. However, you can now change that simple object into a "Symbol". In easier to understand terms; a symbol is something that interacts with the user in some way.

How To Make a Flash Game: Symbols.

To convert an object into a symbol right click on the object then click "Convert to symbol" you are now given a pull down list in a window with the option to make it a "Movie", "Button", or a "graphic" for most applications the "Movie" setting will do nicely. Once you turned your object into a symbol you can begin creating a script for it.

How To Make a Flash Game: The script.

No, I don't mean a game story line type script ... I'm referring to the lines of code that will control each of your objects. The first thing you need to do is right click on an object in your scene and click on "Actions" This will bring up a text window where you can write a script to make your object move, create other objects, or wait for key input. This is where it gets a little complicated. Code snippet time.
-----------------------------------------------------------------------------------

onClipEvent(enterFrame)

{

if(Key.isDown(Key.RIGHT) and this._x < 640) {

//this will move the player 15 units to the right

this._x = this._x + 15;

} else if (Key.isDown(Key.LEFT) and this._x > 0) {

//this will move the player 15 units to the left

this._x = this._x - 15;

}

}

* This is a simple script allowing only two movements left and right.

if(Key.isDown(Key.RIGHT) and this._x < 640)
----------------------------------------------------------------------------------------

This command simply checks a pre-built function "Key.isDown" this function tests whether the key is pressed and reports back a 1 or a 0. The Key.Right variable indicates that the key we are checking is the "Right arrow key" and the "and" statement implies one more check before the command is performed. This checks if the object is inside the screen boundaries before moving it.

As you are writing CS5 will give you other parameters you may use, but remember they all have to start with "Key"

-----------------------------------------------------------------------------------------
this._x = this._x - 15;

-----------------------------------------------------------------------------------------
This command simply adds 15 to the coordinates applied to your Symbol. "this" is a built in variable, meaning the object you are scripting inside of. Replace this._x with this._y for top and bottom coordinates.

Ok so that's a simple movement script taking input from the player, and moving your character accordingly. The next thing you need is some kind of enemy right? A simple AI that isn't very intelligent is easy enough you simply need movement, and random firing. Let's look at that script for a minute.

-----------------------------------------------------------------------------------------
//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 first section sends the Symbol to a random position within the boundaries on loading. "xmove" is a random variable which we will use later to make the object move. Random is a prebuilt function that generates a random number up to your seed value in parenthesis. "onClipEvent(Load)" dictates that these commands will only be run when this object is created.

----------------------------------------------------------------------------------------

//this is triggered everytime 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;

------------------------------------------------------------------------------------------

This part of the script allows your enemy to move using the random numbers created earlier by simply adding the random number generated to the x and y coordinates. The function "onClipEvent (enterFrame)" tells the computer to repeat these ever frame as long as it remains in this frame... slightly confusing I know, but to simplify. Since CS5 operates as a movie maker, as well as program creator; you have movie frames and frames shown per second. This is referring to frames per second.

-----------------------------------------------------------------------------------------
//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)}

----------------------------------------------------------------------------------------
This section checks if each of the coordinates has reached the edge of the screen" xmove= Math abs(xmove)" turns the value of xmove into an absolute value (or a positive integer). When the number reaches a higher value then the screen size this is multiplied by -1 to make a negative integer causing it to reverse direction.

---------------------------------------------------------------------------------------
//this is to get the alien to fire randomly

fire = random(20);

* This simply creates a variable and inputs a random number which will later be used to generate random shots.

//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);

}

}

-----------------------------------------------------------------------------------
This tests the random variable fire if it is equal to 1 then it creates a shot. "_root" is the prefix used to access global variables, which are not attached to any objects, and must be used any time you want to access a variable from within an object and if the variable is programmed in the frame.

"MakeObject()" is a function that is programmed in the frame, a function only runs when called much like a C++ function. Everything inside the parenthesis after MakeObject is a variable being passed to the function which it can then use. More on this function in detail to come.

Next snippet;

This code is inside the frame. To create frame code, right click on one of the tiny rectangles next to layer one at the bottom left of the CS5 screen, and click on actions, just as you would a Symbol. Frame code will run as long as that frame remains open thus a "play()" function may be called to move on to another scene or level.

-----------------------------------------------------------------------------------
//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;

* Everything above this line is a global variable which can be accessed using the _root. Prefix from a Symbol.

//This is to stop from entering the next frame in our timeline

stop();

* The stop function prevents the program from entering the next frame where you would place a new level until it's told to.

//This stuff runs 30 times a second

this.onEnterFrame = function()

-----------------------------------------------------------------------------------
This.onEnterFrame is a prefix used in the same way on Frame scripts as onClipEvent (enterFrame) is used on object scripts. It's really simple once you jump in and try it out. I know simply reading it is confusing, but I have found the best way to really learn is to first re-write the code you see then write similar code for a new game based on what you learned. You will find it to be rather helpful.

-----------------------------------------------------------------------------------
{

//timer goes down everytime the frame is entered again

if(PShotTimer > 0){

-- PShotTimer;

}

---------------------------------------------------------------------------------
As the comment states this will cause the timer for Pshot or (player shot) to count down each frame the - prefix can be used any time you want a value to decrease by 1 every time the command is run. Conversely if you wish to add to a value then use "++" and when testing variables to see if they are equal use "=="

--------------------------------------------------------------------------------
//test for space key down

if(Key.isDown(Key.SPACE)) //

* This is an adaptation of the check key built in function, which tests whether the space key has been pressed.

{

if(PShotTimer < 1)

* Testing the variable PShotTimer using the < expression. This expression in simple mathematical terms means less than. When the timer reaches zero you will be able to fire again.

{

//increment the unique id and id for playershots

PShotID = PShotID + 1;

UniqueID = UniqueID + 1;

//loop back to 1 if there are many shots exisiting

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;

}

}

}

------------------------------------------------------------------------------------
This section again uses the function MakeObject to create a new instance. In this case it's the player's bullet. PlayerShots is an array which will store the returned value after the function is run. In an array the brackets indicate which value to place inside this array at the next open point. Whenever calling a function with a return value you need to store, you use a variable = statement. If you simply need to test the return value; you can place a function within an "if" statement like this

"if (MakeObject("Pshot",PlayerShotT,UniqueID,PlayerShip._x,PlayerShip._y) == 1){ code here}"

Doing this would run the function MakeObject then check if its return value is equal to 1 and if it was run the code within the curly brackets.
-----------------------------------------------------------------------------------

//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);

}

----------------------------------------------------------------------------------
Here we are using a simple collision detection function called from one of the objects and passed the parameters for both objects x and y coordinates. The x and y coordinates are then subtracted from one another to determine their proximity. By using the square root of each value added together you create a radius around these objects if at any point the square root combined is less than 25 you have a collision. The actual collision check will be run from the objects we want to test.
---------------------------------------------------------------------------------

//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;

}

--------------------------------------------------------------------------
This is an example of a function, the command MakeObject = function(instname,template,id,x,y) tells the compiler that this function is to be called "MakeObject" and when used will expect 5 arguments to be passed to it. instname, template ,id ,x, and y. The values from these arguments will then be populated and used within the function. Everything inside the curly brackets is the code that it will run when called. A function is expected to return a value to the script that called it. In this case it returns the value stored in the variable "temp". 2 more snippets and we will be finished with the basics of our entire game.

-------------------------------------------------------------------------
//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

}
-----------------------------------------------------------------------

As you can see we again use the random function to create a random number and make our "bullets" have a slight amount of randomness to them while still shooting in an upward direction.

----------------------------------------------------------------------
//this is triggered everytime 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)
--------------------------------------------------------------------

Here you see we call the function we explored earlier "md" passing the parameters we specified in the function x,y, and Alien_x Alien_y the function runs and returns the value of distance between the objects then checks that value to determine if it's less than 40 and runs the following code.

-------------------------------------------------------------------
{

//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();

}

}
-----------------------------------------------------------

The removeMovieClip function removes an object from the scene when called. Ordinarily the variable would be passed inside the () brackets, but it's unnecessary here because the object calling the function is the one to be removed. The remainder of this code you should be familiar with as we have covered nearly every variable type, function and call used.

---------------------------------------------------------
//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 everytime 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();

}

}
--------------------------------------------------------------------------
As you can see only the variable names changed, but the rest of this script is nearly identical to the other bullets script. This was an interesting project for me and I hope it will be for you as well. Now that you have read through it, the next step is to apply the knowledge you acquired and begin modifying it to create your own flash game. The original source code before any modifications intended for CS4 can be downloaded from Game Innovators here.