Flash MX First Person Shooter Game Tutorial

Download the file here
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.

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