Flash MX First Person Shooter Game Tutorial

In this Flash tutorial we shall set out the basics for a First Person Shooter Game (hereafter called an fps).

• We shall do the basics of attaching the gun sights to the mouse movement and hiding the standard mouse icon,
• Making bullet holes in the background,
• creating a gun firing sound,
• and testing for a hit on a very basic moving target.

Later on, I will write a more complex tutorial to fill in the details.

Flash Tutorials in Video Format - Watch them now at LearnFlash.com  

Create the hit area button for the game

Let's start.

1. Choose the rectangle tool and drag a rectangle to cover the whole stage.
2. Select the rectangle and hit key F8 and create a button. Call it "hitArea".
3. Open the library and double click on the hitArea button.
4. Go to the first frame and hit key F6 to create 3 more keyFrames.
5. Delete the first 3 frames of the button and leave the "hit" frame. This is going to be an invisible button and when the mouse is clicked , the gunfire sound will play and a bullet hole will appear in the background.
6. Select the hitArea button on the main stage and in its properties window, call its instance name "hit1".

Load the gunfire Sound

1. Find or edit a gunfire sound.
2. Select menu item "File" - "Import to library" and select the audio file. The audio file will appear in the library.
3. Right click on the audio file and select "linkage".
4. Tick the "export for Actionscript" textbox and in the identifier box, write "gunfire".
5. Lock the frame that the hit button is on and create another layer and call it "code".
6. Hit the F9 key to open the Actions window. Write this code :

7. // gunfire sounds
   var gunfire = new Sound();
   gunfire.attachSound("gunfire");
   // When mouse is clicked, start sound 
   _root.hit1.onPress = function() {
    gunfire.start();
   }
   

Create the Gun Sights for the game

1. Create another layer and call it "sights".
2. Draw a gun sight however you want.
3. Select the drawing and press F8 to make a movieclip.
4. Call it "gun".
5. With the gun still selected name it "gun" in the instance name texbox in the properties window.
6. Lock its frame and go to the "code" layer and add this under the code we entered earlier :

7. // initialise the movie
   _root.onLoad = function() {
    // hide the mouse
    Mouse.hide();
   };
   // loop code
   _root.onEnterFrame = function() {
    //put cross hairs to mouse coords
    _root.gun._x = _root._xmouse;
    _root.gun._y = _root._ymouse;
   };
   
   

8. Hit keys Control + Enter to test the movie. The gunshights should follow the mouse. and when you click the mouse, your gunshot sound should play.

Make the bullet holes

1. Create a new layer and draw a 20 pixel circle.
2. Select it and hit key F8 , create a new MovieClip, call it "bullet".
3. Name it "bull" in the instanceName textbox.
4. With the bullet hole movieclip selected, write this code in the Actions Window:
5. 
   

   onClipEvent(load){
    this._x = _root._xmouse;
    this._y = _root._ymouse;
   }
   

6. It should say "Actions - Movie Clip" at the top of the Actions window and not "Actions - Frame".
7. Now select The "code" layer and rewrite the code to this:
8. 
   

   var i;
   // gunfire sounds
   var gunfire = new Sound();
   gunfire.attachSound("gunfire");
   _root.hit1.onPress = function() {
    gunfire.start();
    i++;
    //  create bullet holes
    _root.bull.duplicateMovieClip("bulletNew", i);
    if (i == 10) {
     i = 0;
    }
    
   };
   // initialise stuff
   _root.onLoad = function() {
    // hide the mouse
    Mouse.hide();
   };
   //loop
   _root.onEnterFrame = function() {
    //put cross hairs to mouse coords
    _root.gun._x = _root._xmouse;
    _root.gun._y = _root._ymouse;
     
   };
   

Make the Target MovieClip

1. Make a new layer and call it target.
2. On it , draw some sort of target. I just made a square 50x50.
3. Select it and create a Movieclip, call it target_mc in the InstanceName textbox.

Make the explosion for the game

1. In the library , double clik on the gunsight movieclip.
2. Select the first frame and hit key F6 to create another keyframe on frame 2.
3. Delete the contents on frame 2 and draw some sort of explosion. Just a red splash should do.
4. Create another layer ,
5. make a keyframe on frame 1 and
6. put this code in :
7. 
   

   stop();
    

Now lets finish off the coding for the hitTest on the target and the moving of the target. For now , we will just move it across the screen.
Go back to the main timeline and select the code layer and delete what was in there and put this in:

var i;
// gunfire sounds
var gunfire = new Sound();
gunfire.attachSound("gunfire");
_root.hit1.onPress = function() {
 gunfire.start();
 i++;
 // make bullet holes 
 _root.bull.duplicateMovieClip("bulletNew", i);
 if (i == 10) {
  i = 0;
 }
 // hit test on target
 if (_root.target_mc.hitTest(_root._xmouse, _root._ymouse, false)) {
  // play explosion
  _root.gun.gotoAndPlay(2);
  // send target off stage
  _root.target_mc._x = 0;
  _root.target_mc._y = random(400);
 }
};
// initialise stuff
_root.onLoad = function() {
 // hide the mouse
 Mouse.hide();
};
//loop
_root.onEnterFrame = function() {
 //put cross hairs to mouse coords
 _root.gun._x = _root._xmouse;
 _root.gun._y = _root._ymouse;
 // target move
 _root.target_mc._x += 10;
 // if it goes offstage, send it stage left
 if (_root.target_mc._x<0 || _root.target_mc._x>Stage.width) {
  _root.target_mc._x = 0;
  _root.target_mc._y = random(400);
 }
};

It is a pretty lame movie but it shows you the basics of a first person shooter game in Flash MX. Next tutorial, we will refine it a lot more and make a real game. So have a good think about it and experiment with it by yourselves in the meantime. Create some targets and make them pop up here and there. Experiment with a scoring system and think about adding further levels. Do it yourself and impress us all with your efforts.

Game Resources

Flash MX2004 tutorials
"Flash MX Bible" by Robert Reinhardt
Download the file here

source www.video-animation.com/flash_32.shtml