Creating a shooting game using flash 8
This tutorial is about creating a shooting game using Flash 8. Although this
tutorial does take you step by step how to create the finished game, it does
require some basic knowledge of Flash, e.g. how to add a keyframe, convert
something into a symbol, create a button, adding a layer, etc.
Some basic action script concepts
Functions
What is a function and how it is implemented in ActionScript 1.0/2.0. A function is
an operation that Flash must execute each time it is called.
In order to execute that operation, you must first tell FLASH three things:
1- what is the name of the function
2- how to do the operation
3- call the function when needed
A function is something like somebody that you have trained to do a specific task
(like for example cleaning the dishes), and when you call him, he knows that your
dishes need to be cleaned; it’s just a stupid example, of course this person
doesn’t exist!
Let’s give an example of a FLASH function: suppose you want FLASH to execute
an addition of two numbers a and b. As said earlier, we need to do three things:
1. Give a name to the function:
We could call it a fancy name like abracadabra and it would work but if I want to
remember quickly what this function does, I’d rather give it an expressive name;
what do you think of “addab”? Pretty obvious, isn’t it?
In FLASH language ,called ActionScript, one way of giving a function a name is
just writing this in the ActionScript panel:
function addab (a,b)
It just tells flash that the word after the word function is the name of the function;
notice that the word function must be written exactly like it is, otherwise flash
won’t recognise it. For example don’t write it with capitals!
In programming language, the word function is called a keyword. Notice that it
becomes blue when it is written without mistake, so avoid giving variables a
name like that, otherwise flash will be confused!
The letters a and b between brackets are called arguments; it just tells FLASH
that the operation that we want him to do is going to be applied to the variables a
and b.
2. Define the operation
Well, programming is no more than teaching a computer to do things; it is not as
smart as you (see above, you , for example, you know that an operation name
with small or capital letters is probably the same! The computer doesn’t!).
Further more, if somebody gives you two numbers a and b and then tells you
“addab”, you’ll probably guess that he wants you to add the two numbers!
Unfortunately, for the computer, you have to tell it exactly what to do with the two
numbers!
Here is how:
var a:Number;
var b:Number;
var s:Number;
function addab(a,b)
{
s=a+b;
}
The first two lines tell flash that the variables a and b are numbers (to you, it is
obvious that you can add only numbers, but for the computer, it is not) .
The third line tells to flash where we are going to store the result of the operation,
that’s to say the sum; (you could call it whatever you want like sum, mysum,
etc…anything except the keywords above).
Then there is a line where we open a curly bracket; it is the way we tell flash
where the operation begins; usually, this curly bracket is placed in the same line
after the argument, but I prefer to place it underneath; the reason why is that you
have to close your function with another curly bracket, and believe me, 50% of
the time you forget); this way, it is very clear and fast to check: for every open
curly bracket, there’s got to be a close curly bracket after it.
When you are learning a programming language (flash is no exception!), you
have to develop your own tricks to simplify your work (yes, programming is not
always clear…).
3. Call the function
It’s time to call our function and make it work; once we have done all the above,
all we have to do to make it work is to call its name.
The name is not enough, we have to add the argument (the two numbers that we
want to add, let’s say for example 12 and 5):
addab(12,5);
Flash will know exactly what to do!
Test
It's time to try our function; open a new Flash document and double-click on the
first layer to call it ‘Actions’.
Then click on the first frame and open the Actions panel. You can do this several
ways, either click (Window/Actions on the top panel), or right click on the frame
and click ‘actions’, or for a shortcut press F9;
Write our code (or select it and paste it):
var a:Number;
var b:Number;
var s:Number;
function addab(a,b)
{
s=a+b;
}
addab(12,5);
trace(s)
Notice that I added a line [ trace(s)] that just tells flash to write the result of our
operation in the output window so we can check our result.
Now play your movie (with the top menu Control/Test Movie or ctrl +Enter) and
you should see in the output window the result 17.
Try other numbers in the arguments to verify that it works with any number. Try
also to write a function that adds 3 numbers: I'm sure you can! Just apply what
we have done above!
Variables
Variables are the basic storage unit in ActionScript. Variables are identifiers that
hold values of any data type. Variables can be created, changed, and updated. A
variable will have two parts the name and the value. The values they store can
be retrieved for use in scripts. For example
var x = 10;
In the above example 'x' is the name of the variable and 10 is the value of the
variable. You always need to initialize the variable before it is using.
Variable Names
A variable name must be a valid identifier. Also it cannot be any special words
like true, false, null, and undefined. Also a variable name must be unique with in
the scope. You should not use any ActionScript element as the variable name.
Lesson 1 – layout
(Step 1) Create a new Flash document.
(Step 2) Make the stage 550*300 pixels and set the frames per second (FPS) to
25.
(Step 3) Click on settings.
(Step 4) Click on the import/export button.
(Step 5) Navigate to your game folder and to the Flash settings folder.
(Step 6) Select Flash 8 Settings and click on open.
(Step 7) You should notice that your current profile will now have been changed.
This saves time, rather than changing everything manually.
(Step 8) Click ok.
(Step 9) Creating the main menu
Change layer 1 to ‘welcome’. The design of the first page is totally up to you. Try
and be creative with your design, but it should contain the following:


Title
Instructions for playing the game
A play game button. (at this stage there is no action script on the button)
(Step 10) Add a new layer and give it the name ‘hero’. Insert a new black
keyframe on frame 2 of the hero layer. This where the main game will be played!
For this tutorial, I am going to leave the canvas colour white, however, if you felt
like being more creative, you could change the colour and design a nice layout
for the game. Maybe something like below.
(Step 11) Import the superman GIF image from the game pack onto the stage
(2nd frame of the hero layer). Resize the image to something more suitable. For
this tutorial I am resizing to 183 x 86 pixels.
(Step 12) Convert it to a Movieclip and give it an instance name of "hero".
(Step 13) Insert a new layer and call it actions. This is where the actions for most
of the game will be placed.
(Step 14) Add the following action script to the keyframe shown above (frame 1
of actions layer).
_root.onEnterFrame = function() {
moveHero(5);
};
So whenever a new frame starts (every 25th of a second) the function moveHero
will start with the parameter 5. Please do some background reading on
parameters and functions explained above to get a better understanding of this.
(Step 15) Still in the actions pane, add the following action script to enable your
character to move using the keyboard.
function moveHero(speed) {
//check if key is down
if (Key.isDown(Key.UP)) {
_root.hero._y -= speed;
} else if (Key.isDown(Key.LEFT)) {
_root.hero._x -= speed;
} else if (Key.isDown(Key.DOWN)) {
_root.hero._y += speed;
} else if (Key.isDown(Key.RIGHT)) {
_root.hero._x += speed;
}
}
function moveHero(speed) {
//check if key is down
if (Key.isDown(Key.UP)) {
_root.hero._y -= speed;
} else if (Key.isDown(Key.LEFT)) {
_root.hero._x -= speed;
} else if (Key.isDown(Key.DOWN)) {
_root.hero._y += speed;
} else if (Key.isDown(Key.RIGHT)) {
_root.hero._x += speed;
}
}
_root.onEnterFrame = function() {
moveHero(5);
};
(Step 16) Your code should look like the above.
First there is a parameter called "speed". Remember we put 5 there earlier?
Well, that means the hero's speed will be 5 pixels per 25th of a second. So a bit
of quick math’s and the hero will move at 125 pixels/second.
A simple if statement is used which basically says if key is down key up, key left,
key right and key down. Rather than just writing loads of if statements, else if has
been used. This is so the hero only moves if it's being told to go one way and no
other way. You do not have to do this but I think it can make the game a bit
better. _root.hero command tells the action script what character to move and the
speed. Remember earlier when we set the function for speed?
(Step 17) At the moment, if we were to test our movie, it would flick between
frames. We need to sort this before we test our movie. Name the hero layer
frame “game” (on the second frame of the hero layer – at the bottom properties
panel) shown in the screenshot below.
(Step 18) Click on the button you created earlier and add the following action
script.
on (press) {gotoAndStop("game");
}
(Step 19) Add a stop to the first frame of the welcome layer (type stop();).
(Step 20) Click on control and test your movie. You should be able to start your
game using the button on the first page and move your character with the arrow
keys.
The next stage of this tutorial will look at how to make the character shoot using
the space bar.
(Step 21) Click on insert, new symbol and select movie clip. Give it the name
bullet. You also need to export for ActionScript and export in first frame (do this
by clicking advanced to bring the options below).
(Step 22) Click ok and draw your bullet next to the marker. (The cross) I have
decided to keep things simple for this tutorial, but if you like you can make things
more complicated. Even download a bullet image from the internet to use.
(Step 23) Click back on scene 1.
(Step 24) Click back on the actions keyframe (1st frame) and add the following
actions.
if (Key.isDown(Key.SPACE)) {
fireBullets();
}
}
We covered this sort of thing last time. When the spacebar is pressed, the
function fireBullets is called. Now we need to add the function.
var i;
function fireBullets() {
i++;
var newname = "bullet"+i;
_root.attachMovie("bullet", newname, i*100);
_root[newname]._y = _root.hero._y+13;
_root[newname]._x = _root.hero._x+55;
_root[newname].onEnterFrame = function() {
var bullet_speed = 7;
this._x += bullet_speed;
if (this._x>555) {
this.removeMovieClip();
}
};
}
Before the function even starts the variable "i" is set without a value and each
time the function is called this variable increases by 1. A name "bullet"+i is made
and then we come to the attachMovie function. This attaches a movieclip from
the library and gives it a new name. "bullet" tells flash which Movieclip to attach,
the next parameter is the name of the new movieclip and the last parameter is
Depth, which you don't need to worry about for this sort of game.
Next, the new movieclip is put to the correct x and y relative to the hero (that's
what the "+13" etc. is for: adjust those values to fit the size of your hero).
Now to make the bullet move. An OnEnterFrame function for the new bullet is
called. "bullet_speed" is the speed of your bullet, which is added to the _x value
of the bullet to make it move. And finally, if the bullet goes of the screen to save
speed the bullet is removed with removeMovieClip.
function moveHero(speed) {
//check if key is down
if (Key.isDown(Key.UP)) {
_root.hero._y -= speed;
} else if (Key.isDown(Key.LEFT)) {
_root.hero._x -= speed;
} else if (Key.isDown(Key.DOWN)) {
_root.hero._y += speed;
} else if (Key.isDown(Key.RIGHT)) {
_root.hero._x += speed;
}
if (Key.isDown(Key.SPACE)) {
fireBullets();
}
}
var i;
function fireBullets() {
i++;
var newname = "bullet"+i;
_root.attachMovie("bullet", newname, i*100);
_root[newname]._y = _root.hero._y+13;
_root[newname]._x = _root.hero._x+55;
_root[newname].onEnterFrame = function() {
var bullet_speed = 7;
this._x += bullet_speed;
if (this._x>555) {
this.removeMovieClip();
}
};
}
_root.onEnterFrame = function() {
moveHero(5);
};
(Step 25) Your code should look like the above. Test your movie.
(Step 26) At the moment, the bullets are not coming out of where I would like. To
solve this you need to go back into the bullet movie clip and change the position
of the bullet.
You will need to experiment with this in order to get it right where you want. Keep
previewing your game to see where the bullet is coming out of.
This is now the end of session 1. In the next session you will be creating objects
for the hero to shoot and creating collision detections.