How to Create a Video Game
using Action Script 2.0 Part 1-Setting Up Your Symbols
I will be using Adobe Flash CS 4 for this tutorial but you can use any version of
Adobe Flash that supports Action Script 2.0. (The video tutorial is further down this
page.)
We will be creating a shooter style video game with a hero, three enemies, a score
keeper, and a title screen. I will provide all of the code for you. You just need to
follow directions and be creative.
Step by Step Instructions and Codes
Step 1-Getting Started
Open up a new Flash file and select Action Script 2.0. Make sure that your
document is set on the default size which is 550 px by 400 px. Make sure that your
frame rate (fps) is between 15 and 24. Open up your library (under "Window" at
the top). Right click inside of your library and select "new symbol". Make sure that
your new symbol is a "movie clip". Name the new symbol "SpaceShip". Be sure to
name exactly the same way I have here. If you don't, your code will not work
correctly. Draw your hero on the screen. This can be a space ship, or whatever
you want. Be creative here. You can always go back and change it later though.
Align your registration, the "+" in the middle, with were you will want your bullets
to come out. If your hero has a gun, be sure to put the end of the gun in the
crosshairs of the registration.
Step 2-Add Your Hero
Go back to the main timeline. Click and drag your space ship (hero) to the stage.
Where you place your hero will determine where he will start in the game. Give it
an instance name of "Ship". Again, we need to be very specific with this. It needs
to be spelled exactly the same way that I have it here with the capital "S".
Step 3- Add Some Code
Copy and paste the following code into the actions panel of the first frame of your
main timeline...
var timer = 8;
var nrEnemies = 3;
var lives = 3;
var score = 0;
for (i = 1; i < nrEnemies; i++)
{
_root.Enemy.duplicateMovieClip("Enemy" + i, _root.getNextHighestDepth());
}
var i = 0;
this.onEnterFrame = function()
{
timer++;
if (Key.isDown(Key.RIGHT))
{
if (Ship.hitTest(550, Ship._y, true))
{
Ship._x -= 10;
}
Ship._x += 10;
} else if (Key.isDown(Key.LEFT))
{
if (Ship.hitTest(0, Ship._y, true))
{
Ship._x += 10;
}
Ship._x -= 10;
} else if (Key.isDown(Key.UP))
{
if (Ship.hitTest(Ship._x - 40, 0, true))
{
Ship._y += 10;
}
Ship._y -= 10;
} else if (Key.isDown(Key.DOWN))
{
if (Ship.hitTest(Ship._x - 40, 400, true))
{
Ship._y -= 10;
}
Ship._y += 10;
}
if (Key.isDown(Key.SPACE))
{
i++;
if(timer >= 8)
{
_root.attachMovie("Bullet", "Bullet" + i, _root.getNextHighestDepth());
_root["Bullet" + i]._x = Ship._x + 3;
_root["Bullet" + i]._y = Ship._y;
var shoot_sound = new Sound();
shoot_sound.attachSound("shoot");
shoot_sound.start();
timer = 0;
}
}
}
Now test your game by hitting "control + enter". Your ship (hero) should move around
the stage by pressing the arrow keys. It should stage on the stage and not disappear
off of the edges.
Step 4- Create Some Bullets
Right click again in your library. Create a "new symbol" again and be sure that it is a
movie clip. Name it "Bullet". Be sure to click the "export for action script" radio button.
If you don't see it, click the advanced button to see the option. In the bullet symbol,
draw your bullet. Be creative, it can be whatever. Be sure to line up your bullet with the
right side of the registration mark.
Step 5- Add Some Code to the Bullets
Add the following code to the actions panel of the first frame of the "Bullet" symbol
timeline...
this.onEnterFrame = function()
{
for (i = 0; i< _root.nrEnemies; i++)
{
if (this.hitTest(_root["Enemy" + i]))
{
_root["Enemy" + i].reset();
_root.score += 10;
this.removeMovieClip();
}
}
this._x += 12;
if (this._x> 550)
{
this.removeMovieClip();
}
}
Now test your movie. Your hero (Ship) should move around and shoot your bullets
when you hit the space bar. Pretty cool, eh? Now let's add some bad guys.
Step 5- Add Some Bad Guys
Right click in your library and create a new symbol. Again, this should be a movie clip.
Name your new symbol "Enemy". Now, draw what you want your enemy to look like.
Once your enemy is drawn, go back to your main timeline and drag your enemy to the
stage. Give you first enemy an instance name (under properties) of "Enemy0", your
second enemy should have an instance name of "Enemy1" and the third should have
the instance name on "Enemy2". Add the following code to each instance on the stage.
To do this, right click on each enemy, select "actions" and copy and paste the following
code...
onClipEvent(load)
{
function reset()
{
var timer = 12;
this._y = Math.random() * 300
this._x = 550
mySpeed = Math.ceil(Math.random() * 6) + 1;
}
reset();
}
onClipEvent(enterFrame)
{
//in every frame the enemy move left in the speed defined in the reset function.
this._x -= mySpeed;
if (this._x< -10)
{
//if the enemy is not on the screen, we reset it.
reset();
}
//if our timer is bigger than 12 we get a new
if (timer >= 12)
{
//direction to the Ship.
vardir = Math.ceil(Math.random() * 2)
//We get a random number, 1 or 2. 1 is up, 2 is down.
//Then we set timer to 0, so we only get a new dir when timer is bigger than 12
timer = 0;
}
if (dir == 1)
{
//if dir = 1, we move the ship up.
this._y -= 3;
} else if(dir == 2)
{
//if dir = 2, we move the ship down.
this._y += 3;
}
//increase timer by 1, so the timer gets equal to 12 and we get a new direction.
timer++
}
Now test the movie again. You can fly around and kill enemies, but your hero doesn't
die when it gets hit.
Step 6- Code Your Hero (Ship)
Now your ready to add code to the instance of the ship on the stage of the main
timeline.
Right click on the instance of the ship on the main timeline, select actions, and add the
following code...
onClipEvent(load)
{
function reset()
{
this._x = 100;
this._y = 150;
}
reset()
}
onClipEvent(enterFrame)
{
for (i = 0; i< _root.nrEnemies; i++)
{
if (this.hitTest(_root["Enemy" + i]))
{
_root.lives -= 1;
if (_root.lives<= 0)
{
_root.attachMovie("GameOver", "GameOver", 100)
_root.GameOver._x = 275
_root.GameOver._y = 150
this.swapDepths(10);
this.removeMovieClip();
}
reset()
for(k = 0; k < _root.nrEnemies; k++)
{
_root["Enemy" + k].reset();
}
}
}
}
Now test your movie. Your enemies will die when you shoot them, and they'll kill you
when they hit you.
Next, we will animate our characters to make the game cooler. Remember, we are
using action script 2.0.
Step by Step Instructions to Animate
Characters
Step 1-Animate Your Enemy
Open up your enemy symbol by clicking on it in the library. Go to the timeline at the
top and give the enemy symbol some keyframes by pushing "F6". Next, turn on your
onion skin in the timeline and start erasing and redrawing in the timeline to create the
animation. Now, test your movie and watch what your animation looks like.
Step 2-Animate the Hero
Now you can repeat this for your hero. Click on the hero (Ship) and add some
keyframes to it's timeline and animate your hero. In this tutorial, I am adding flames
coming from the back of my ship. Then, test your game and watch the animation.
Step 3- Animate the Bullet
If you like, you can repeat the same steps to animate the bullet, but be careful. If you
animate your bullet like I have, you need to be sure to create a new symbol (movie
clip) inside of the movie clip "bullet". Test your game and watch the animation.
Adding aBackground
Create a new layer, put it below your other layer and make a blue/white gradient
background. Right-click on the library and create a new symbol called clouds. Draw
your cloudsand animate them moving using Classic Tween. When you animate your
clouds, the clouds should start outside of the stage to the right in the first keyframe
and then outside of the stage to the left in your last keyframe. Add your clouds movie
clip onto your scene in a new layer.
Adding Sounds
To import a sound, go to "file" then "import to library". Choose the sound that you want
to import. Your sound will end up in your library.
To have music play over your game, create a new layer. Name it "sounds". Click and
drag your imported music from the library to the stage on the first frame of the
"sounds" layer. Then go the properties of that frame and loop the sound. To see how to
do this, watch the video below.
Now let's add the sound for our shooting. I'll be using a sound that already exists in
Flash. Go to "window", "common libraries" and select "sounds". Find a sound that you
like and drag it to your library. Rename your sound to "Shoot" in your library by rightclicking on it. Then right-click on the sound in your library and open up the properties
for it. Click the "export for actionscript" radio button. The identifier should change to
"Shoot".
Now, test your game and enjoy your sounds.