How to create a shooter video game in Flash step 1 head

How to Create a Shooter Video Game in Adobe Flash- Part 1

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 stay 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.

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.
var dir = 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. In part two, we'll animate our characters.

Here's a video tutorial of Part 1 of How to Create a Shooter Video Game in Adobe Flash.
Continue to Part Two of How to Create a Shooter Video Game

LIKE THIS TUTORIAL?

If so, please join over 16,000 people who receive weekly tutorials, articles, and 3 FREE COURSE VIDEOS and EBOOKS! Just click on the button below to add your name!

I'M IN!

Here are some more art lessons that you may like...

DRAWING COURSES

PAINTING COURSES

LIVE INSTRUCTION

FOR TEACHERS

ADDITIONAL