By: Marc Hampson

January 14th, 2004

Reader Rating: 7.5

Have you ever fancied venting your frustration virtually on targets of your choice, building your own space-invaders game, or even becoming a member of the mob and shooting it out in downtown Chicago? Well, using this simple tutorial as a basis, anything is possible!

In this tutorial, we're going to use Flash MX and ActionScript to build a customisable shoot-em-up (you can download the completed swf and fla files here [1]). You will also need access to Photoshop or a similar paint package to create your graphics. You may already have something suitable, or decide to use something from the Web. If you do decide to use images other than your own, be sure to check the copyright.

A moderate amount of programming knowledge is helpful throughout this tutorial, but is not essential. All areas of ActionScript code are explained.

With that out of the way it's time to get started. First things first: a pot of coffee! While this tutorial isn't difficult, some of the concepts may take some time to fully understand if you're a new programmer. You can, of course, just copy the code into Flash and change the relevant variables. But, if you're going to personalise it in the future, why not take the time to understand it now?

How the Game Works

While this is far from an advanced tutorial in building a Flash game, there are a few elements that put it into the intermediate category.

The game has 3 targets. These targets are placed in an array, and are then selected at random. With only 3 targets, I can't guarantee you'll never play the same sequence more than once, but the random feature helps make it interesting. Each target has 2 other graphics associated with it. The first is an 'Active Target' graphic -- a simple red border to indicate which target to aim at; the second is a black box to cover it, indicating it's no longer in the game. Of course, using your own imagination, you can do a lot better than these quick ideas!

Graphics

As I've just mentioned, a lot of the graphical side of things is down to you. You can be as creative as you like -- but, at the very least, you're going to need the following:

• A target image
• A cross-hair to aim
• An active target image
• An image to indicate the target is destroyed

Your target can be any image you like -- and, in its simplest form, a cross-hair is just a non-filled circle with vertical and a horizontal lines intersecting in its centre. This will give you an exact co-ordinate for your bullet. As for the last two graphics in the list, well -- they can be just as simple.

I'll assume you're going to use the same image for each of the three targets we build. The active target image is a non-filled red square that can fit around the target; for the destroyed target image, you'll just need a black square that will cover the image. In Flash, you can either create the square, then delete the centre fill, or simply create it with a transparent fill. But, as this tutorial isn't about image creation, we shan't dwell too much on the subject.

Let's assume you've created and saved the images described above -- now we can begin building our Flash movie.

Build the Flash Movie

Launch Flash MX and, if you've not already done so, open a new file. Click on Save, and name your Movie (you could be original and call it shootemup.fla).

Now, name your layer 'Targets', and in frame 1, import your target image to the stage.

File-import or (ctrl+R [pc])–[Browse for image]-Open

With your target on the main stage, make sure it is selected and make it into an individual movie clip (F8 [pc]). When the 'Create Symbol' dialog box appears, name the movie clip (MC) 'target', and make sure the 'Movie Clip' radio button is selected. In the 'Property Inspector', name the instance 'target1'. While you're at it, drag another two instances of the TargetMC onto the stage and give them instance names of 'target2' and 'target3' respectively. Click on frame 2 and press (F5) to copy the frame over. We'll stick with three static targets for now – though, beyond this tutorial, how many targets you add and how they move is completely up to you.

Create another layer, name it 'Text', and in frame 1, use the text tool, setting the option to 'Dynamic Text', to create 2 boxes of about 30 characters in size along the top of the screen. Font size and colour are up to you. You may also want to spend some time sizing and aligning.

Select the 'single line' and 'border around text' options from the Property inspector. In the properties instance field, name these 'hits' and 'info' respectively. Move to frame2 on the timeline, and create a new keyframe (F6) Then, in an appropriate bit of white space on the stage, add some text along the lines of 'GAME OVER'.

Create another layer and name it 'Actions'. Open up the panel (Window Menu-Actions or (F9 [PC]) and copy the following code into frame 1:

(ActionScript (AS) for frame 1)  
 
stop();  
//Set global highScore variables  
highScore = 0;  
 
//Set the properties for the game elements  
_root.lastFrame = false; //Stop bullets  
        //See AS for bullet MC for details  
 
setProperty(_root.crosshair, _visible, true);  
SetProperty(_root.bullet, _visible, false); //  
//Individual destroyed target images hidden until needed  
setProperty(_root.target1d, _visible, false);  
setProperty(_root.target2d, _visible, false);  
setProperty(_root.target3d, _visible, false);  
//As above. Individual highlighted target images hidden until needed  
setProperty(_root.target1Image, _visible, false);  
setProperty(_root.target2Image, _visible, false);  
setProperty(_root.target3Image, _visible, false);  
 
mouse.hide(); //hide mouse to use cross-hairs  
 
//select a target to shoot at random then add that target  
//to the array of selected targets so that it isn't used  
//again in this game.  
//When the number of direct hits against the selected  
//target has been reached. Find another random target.  
//Check whether it exists in the array. If yes, select  
//again. If no, make visible.  
 
_root.targets = new Array(); //create array on the main  
             //timeline so that it is  
             //easily accessed by all MCs  
_root.targets[0] = "target1";  
_root.targets[1] = "target2";  
_root.targets[2] = "target3"; //3 targets we are using in  
               //tutorial  
 
n = _root.targets.length; //get length of array  
 
ran = random(n); //get random number location to select from array  
 
target = _root.targets[ran]; //show random array location  
 
_root.activeTarget = target; //create target variable  
 
setProperty("_root."+target+"Image", _visible, true); //show target  
 
_root.targets.splice(ran, 1); //remove the random element  
         //from the array. splice  
         //the random number found and  
         
           //to the depth of one so only  
           //one element is removed.  
//-------------------------------------------------------//

(AS for Actions frame 2)

Click on frame 2 in the Actions layer and create a blank keyframe (F7). Then, enter the following code into the actions panel:

stop();  
 
_root.lastFrame = true; //Stop bullets  
       //See AS for bullet MC for details  
             
mouse.show(); //reshow mouse  
 
setProperty(_root.crosshair, _visible, false); //Hide cross hair  
 
target1Hits = 0; //reset the hits for each target in case another  
        //game is played.  
target2Hits = 0;  
target3Hits = 0;  
 
//-------------------------------------------------------//

Create the Cross-Hair

Create a new layer called 'aim/fire' above the 'Targets' layer. Create a new movie clip by pressing (Ctrl + F8) and name it 'crosshair'. The symbol should have opened up for editing, so create an additional layer and name it 'Actions'. In frame 1, add a stop action:

stop();

Name the original layer 'Image' and import your cross hair image into Frame 1, aligning it with the centre of the stage (represented by a cross). Now, copy this image over frames 2 and 3 by creating new key-frames (F6). On Frame 2, position the image a few pixels higher than the other two, as if to give the impression a bullet was fired. It is useful to note here that the cross hair would be much more realistic if you also imported a sound wave onto a new layer at frame 2. There are many sources for these on the Internet, but a good starting point would be www.flashkit.com [2].

Go back to the main timeline by clicking on the 'Scene 1' link underneath the timeline. Now, drag an instance of your crosshairMC from the library and position it off the left hand side of the stage. Select the MC and name it 'crosshair' in the instance field of the property inspector. Then, open the 'Actions' panel and enter the following:

(ActionScript (AS) for the cross-hair)  
 
onClipEvent(enterFrame) { //When this frame(start)of the  
          //movie is entered place this  
          //MC wherever the mouse is.  
 
this._x = _root._xmouse;  
this._y = _root._ymouse;  
}  
 
//-------------------------------------------------------//

Creating the Bullets

This has to be the easiest part of the whole tutorial. Follow the steps for creating a new symbol as described above. Create a new symbol and name it 'bullet'. Then, when you edit the MC, all you have to do is create a small black bullet hole image on frame 1, using the paintbrush. It doesn't have to be very neat. Select this, make it into a movie clip (F8), and call it 'bullet hole'. Click on frame 30 of the timeline, and press (F5) to fill in all the frames between. Then hit (F6) to make frame 30 a key-frame. With the image on the stage in frame 30 selected, go to the property inspector and change the color to 'Alpha' and '0%'.

Now, right-click in any frame between 1 and 30 on the timeline, and select 'Create Motion Tween'. This will tween the frames so that when the movie clip plays to frame 30, the bullet will slowly disappear. If you don't want this to happen, simply put the bullet image in frame 1, and leave it at that.

Now, create a new layer and name it 'Actions'. Click on frame 30 in the timeline for this layer, and create a new blank key-frame (F7). Select the 'actions' panel and put in a stop action:

stop();

Go back to the main timeline by clicking on the 'Scene 1' link as before, then drag an instance of the bullet off the left hand side of the stage near the cross hair.

Select the bullet instance on the stage, name the instance 'bullet', then enter the following in the actions panel:

(ActionScript (AS) for the bullets)  
 
onClipEvent(mouseDown) {  
 if(!_root.lastFrame) { //if not in the lastFrame  
 i++; //increase the number of i each time so that the  
   //duplicateMCs have a new depth to load to.  
 
 this.duplicateMovieClip(\\\\"bulletnew\\\\", i); //create new  
                  //duplicate  
                  //bulletMC  
   
 _root.crosshair.play(); //play the crosshair movie  
   
 }  
}  
 
onClipEvent(load) { //show bullets wherever mouse is as  
       //each new mc is loaded. Initial bullet  
       //as game loads won't show as it is  
           //hidden in the actions for the    
       //first frame.  
 
 if(!_root.lastFrame) {  
   this._x = _root._xmouse;  
   this._y = _root._ymouse;  
 }  
}  
 
//-------------------------------------------------------//

ActionScript for the Targets

Still with me? Your movie isn't exactly going to inspire as it is now. What we need to do is to start adding some actions to the targets.

The ActionScript is pretty much the same for all targets, so you can simply cut and paste. Just be aware that, when using the code for 'target2' or 'target3', you will need to find and replace 'target1' with 'target2' or 'target3'. This is all highlighted in the code to help you. You will also need to update the 'activeTarget' variable.

Select the 'Target1' instance of TargetMC on the main stage by left-clicking on it, and open up the actions panel (Window Menu-Actions or (F9 [pc]). Copy the following code into it.

(AS for individual targets)    
   
onClipEvent(mouseDown) {    
hitsNeeded = 5; //hits needed to destroy target—this    
     //can be any number you want    
   
     
//CHANGE target1.hitTest, target1Hits and activeTarget to read target2 //or target3 for other targets and target1 to read 2 or 3 as in the //array we set up.    
 if(_root.target1.hitTest(_root._xmouse, _root._ymouse, true) && (_root.target1Hits<hitsNeeded) && (_root.activeTarget == \\\\\"target1\\\\\")) {    
 //OK From the top on this one:    
     //Using the AS hitTest() method    
     //If the specified MC is clicked on and    
     //if the hits needed on this MC have not    
     //reached the maximum and    
     //*if* it is the active target (activeTarget              
       
//CHANGE target1Hits to read target2Hits or target3Hits for other //targets    
   _root.target1Hits++; //increase MC hits variable by 1    
   _root.directHits++; //increase direct hits variable    
   _root.hits.text = _root.directHits+\\\\\" of \\\\\"+hitsNeeded+\\\\\" needed.\\\\\";    //display current hits for target in a text    
     //field on the main stage    
   
 highScore = _root.highScore;    
 highScore = highScore + 10; //increase high score by                 //however many points you                 //want for a hit.    
   
 _root.info.text = highScore;    
 _root.highScore = highScore; //update the variable on    
               //the main stage    
   
//CHANGE target1Hits to target2Hits or target3Hits for other //targets    
 if(_root.target1Hits == hitsNeeded) { //if hits needed total    
               //is reached    
_root.directHits = 0; //reset direct hits counter for future          
   //targets    
   
 //CHANGE to target2Image or target3Image for other targets    
 setProperty(_root.target1Image, _visible, false);    
//hide target    
   
 //CHANGE to target2d or target3d for other targets    
    setProperty(_root.target1d, _visible, true);    
     //Show the target destroyed image    
        //Check if array is now empty    
     //If so, endgame    
   
   
 n = _root.targets.length;    
 if(n == 0) {    
   _root.gotoAndPlay(2);    
 }                    
   
 //If it wasn't empty…    
 //generate a random target    
     
 n = _root.targets.length //get the current array    
//length    
 ran = random(n); //get random number location to    
         //select from array    
   
 target = _root.targets[ran]; //create target variable    
   
 _root.activeTarget = target; //set active target    
   
 setProperty(\\\\\"_root.\\\\\"+target+\\\\\"Image\\\\\", _visible, true);    
               //show target    
   
   
 _root.targets.splice(ran, 1); //remove the random    
             //element from array    
                //so that target cannot    
             //be picked again in    
             //this game    
   
 _root.hits.text = \\\\\"target destroyed!\\\\\"; //update the    
                   //text field    
   }    
}    
}    
   
//-------------------------------------------------------//

Only 2 more things to do before you're ready to test the game and add your own elements! As I mentioned at the start of the tutorial, you'll need 2 further images for each target, to show when each is active and when it is destroyed. For this tutorial, we're just going to use simple boxes as previously described.

Creating the Active Target Images

This one's nice and simple! Just create a new movie clip called 'Active', then create a red rectangle that's big enough to cover the target with a transparent fill.

Create above the Target layer a new layer called 'Active Targets', and place three instances of this movie clip over the top of your targets in frame 1. In the property inspector, name the instances, 'target1Image', 'target2Image' and 'target3Image', respectively.

Creating the Target Destroyed Images

This is much the same as the above, really. Create a new movie clip called 'Destroyed', then create a new layer above the last one, called 'Destroyed Targets'. Add 3 instances, called 'target1d', 'target2d' and 'target3d', respectively.

That's it! Except...

If you've got this far through the tutorial, you should have all the elements in place to start playing your game. You may want to add one or two other elements, such as a "play again" button, which can be as simple as using a standard button from the common libraries bundled with Flash (Window-Common Libraries-Buttons). Put the button on frame 2, then select it and insert the following into the actions panel:

on (press) {    
 prevFrame();    
}

Along the way, you've probably thought of things you can add to the game -- what you've learnt here will only be the start. Happy gaming!

[1] http://www.sitepoint.com/examples/shootemup/shootemup.zip
[2] http://www.flashkit.com