Game:

After several years of procrastinating, which I have perfected to an art form, I have decided to write tutorials for creating a full Flash game. Since creating a full game from the beginning is quite an undertaking, I have divided the various aspects of game programming into small tutorials. This tutorial will help you to create a firing mechanism.

The following animation is an early prototype of my game. Move the mouse around the animation and click the left-mouse button. You will learn, in this tutorial, how to create something similar to the following animation.

[ why is a crab firing small movie clips? - click your mouse to see for yourself ]

In an effort to save you some time in re-creating the above animation, I have provided a partial source file that includes everything except the code required to make the crab fire. Download the source file by clicking the link below:

Fire away:

1. Open the file fire_tutorial.fla which you unzipped from the above download link.
    
2. Now, we need to create the bullet that will be fired when the mouse is depressed. Ensure that you are in your bullet layer (on your timeline), and draw a small circle outside of your drawing area. You may want to zoom in to draw your circle:

[ draw a small circle outside of your drawing area ]

3. Once you have drawn your bullet, zoom out back to 100% if you zoomed in earlier. Select your bullet and look at the Properties tab. Find the boxes marked W and H and enter a value for 3 in both of them:

[ enter a value of 3 for the width and height of the circle (bullet) ]

4. Now, ensure that the circle you drew is still selected. Press F8 or go to Insert | Convert to Symbol. The Convert to Symbol dialog box will appear. Select movie clip, enter any name, and press OK.

[ convert your circle into a movie clip ]

5. With your circle now a movie clip, we need to give your newly-created movie clip an instance name. Select your movie clip, and in your Properties panel you will see the text field < Instance Name >.
   
   In the < Instance Name > text field, enter the word bullet:

[ give your movie clip the instance name bullet ]

6. It is time to add some actions to the movie clip. Right click on the movie clip and select Actions. "The Actions - Movie Clip" dialog box will appear.
    
   Copy and paste the following code into the Actions dialog box:

onClipEvent (load) { this._visible = 0; if (_root.fire == 1) { this._x = _root.crab._x; this._y = _root.crab._y; } } onClipEvent (enterFrame) { if (this != _level0.bullet) { if (_root.fire == 1) { this._y -= 5; this._visible = 1; } if (this._y<0) { this.removeMovieClip(); } } }

[ copy and paste the above code into the actions dialog box ]

7. You are almost finished. We just need to add some actions to the crab button. Right click on the crab (on the green grass) and select Actions. Copy and paste the following code into the "Actions -Button" dialog box that appears:

on (release) { _root.fire = 1; _root.i += 1; duplicateMovieClip(_root.bullet, "bullet"+i, i); }

[ copy and paste the above code into the actions dialog box ]

8. Preview the movie. You should be able to make the crab shoot bullets (the movie clip you created) each time you click your left mouse button.

While you are finished with this tutorial, I highly recommend that you go to the next page and find out how/why the code works the way it does. Not only will you find out what each line of code does, you may get a better feel of ActionScript programming so you can create your own game with a cooler firing mechanism than the one I presented.

Next Page: Code Explanation