First Person Games - Part 1

This won't exactly teach you how to make a flash version of virtua - cop but, it's a basic way to make a first person shooter, with a hand that moves - adding a bit more realism to the game. My art work is rubbish - but that's not important - the concept behind how the game works is. This is the same method I used to make one of my first, first person shooters. Part 1 covers making the hand, gun, the sights and actions for shooting.

Move your mouse over the movie above, and the gun sight will follow your mouse. Press the left mouse button and you'll fire the gun.

Nothing amazing, but it's the foundation that's important. You go ahead an draw your own desert eagle (extremely powerful handgun) and cooler looking sights.
First off make the movie 3 frames long (just to give some space). Make 2 layers called Gun and Sights:

On the Gun layer, draw a hand holding a gun as best as you can. It's best to use the pencil tool with smooth option for the hand. I drew a sleeve and a button on the sleeve. Group the shapes. Press CTRL+ALT+S to scale the hand and gun to whatever size you want.

Press F8 to convert to symbol and select movie clip. Give it a name. Also give it an instance name. In this example I've given it the name "gun". (You should be in the habit of giving instance names to your movie clips).

Position the hand and gun where you want on the y axis of the stage. If you have some untidy bit at the end of your hand, move the clip so these bits are off stage (don't worry no one will see what's off stage - we'll get to that another time) or use the select tool (the solid black arrow), select the untidy bits and delete them.

Double click on the gun movie clip. The main timeline should change to the gun's timeline. Insert 2 more frames (so there are 3). Put a stop(); in the first frame. Click in the second frame and press F6 to insert a keyframe. Here, draw a small spark or flame. Drag that to the front of the gun to give the effect of flare from the barrel.

Also drag the flame and the hand with the gun, down a little for recoil. On the second frame in frame properties - CTRL - F3 if it's not already visible, set a sound for a gunshot and set the Sync for Event. (Go to File ---> Import to Library to import a sound. There is a gunshot sound in the source files for this tutorial).

Now that's done, return to the main scene (click on Scene above the stage).

Click on the sights layer. Draw your sights. The ones I did were just two
lines in the form of an x and a circle around them. Group it - CTRL+G, press
F8 and convert it into a movie clip. Give it a name and an instance name.

Now for the actions. Click on the gun movie clip and press F9. This brings up the actions window.

Enter the following:

onClipEvent (enterFrame) {
_x = _root._xmouse;
}
onClipEvent (mouseDown) {
play();
}

Explanation:

onClipEvent (enterFrame)
Every frame do the following:

_x = _root._xmouse;
The x of the hand and gun will be the x of the mouse

onClipEvent (mouseDown)
When the left mouse button is down do the following:

play();
Play the next frame(s) of this clip.

Now click on the sights movie clip and press F9 and enter the following code:

onClipEvent (load) {
Mouse.hide();
}
onClipEvent (enterFrame) {
_x = _root._xmouse;
_y = _root._ymouse;
if (_y>=210) {
_y = 210;
}
}

Explanation:

onClipEvent (load)
When this clip loads do the following:

Mouse.hide();
Hide the mouse cursor

onClipEvent (enterFrame)
You should know now

_x = _root._xmouse;
The x of the sights will be the x of the mouse

_y = _root._ymouse;
The y of the sights will be the y of the mouse

if (_y>=210) {
_y = 210;
}

If the y of the sights is greater than or equal to 210, then y equals 210, in other words the y can't be more than 210. This is to stop the sights falling below the gun or on the gun which would be unrealistic as you wouldn't shoot on, or below the gun. You may need to adjust this depending on the size of your movie.

And that's it. When you test your movie, you should be able to move the sights around, shoot, and the gun should follow at the bottom of the screen.

Of course this is just the basic set up of the game. You could add a more snazzy effect to the shooting, like a cartridge being ejected, etc. In later tutorials I hope to add in some enemies, background, scoring, timer and ammunition system. Or maybe something totally different. It all depends on feedback on this tutorial and if people want the others.

Hope you learnt something and can apply this to your games. Note: The effect of the sights, following the mouse can also be used for your own custom pointers in Flash.

Partners Flash Templates Free Web Templates FREE professional web templates Website templates Free Web Templates Graphic Design Tutorial Guide Flash Templates Flash Templates and Web Templates