Shooting Gallery

 
     
  1. Start with a new document and set its size to 540x480 this way it fits nicely into any size resolution.

2. Drawing your gun.
I like to start with this simply because however my gun comes out kind of sets the mood for the rest of the game.
For the basis of this tutorial I'm not going to get all fancy when drawing this but you can.
Below is what i came up with.


3. Now we need to make this gun fire when we click. so lets select our gun and convert it to a symbol by pressing f8 or going to
Modify > Convert to Symbol. Then select Movie clip and name it Gun like below


4. Double click on our newly created movieclip to enter its sub timeline, this way we can animate our gun firing.

5. Now insert a keyframe into frame 2, then click back on frame 1.

6. After clicking on frame 1. Hit f9 or go to Window > Actions to open up your Actions panel. Then we are going to insert a stop command with the code below.
stop();
What This Code Means: This simply stops the animation on this timeline from going past frame 1.

Note: Make sure you see a little "a" appear in frame 1 of your timeline.


7. Click on frame 2 and move your gun down a little and add a small flame at the end of the gun, making it look like it's firing.
We DON'T want to insert a stop code here because we want the gun to return to frame 1 after "firing" so to say. Frame 2 is also
where you would add a firing sound if u wanted one in your game. Adding sounds will be in following tutorials
Here is what I drew. I never said i was an artist.


8. Click on the back arrow to return to the main timeline.


9. Time to make our gun fire when we click the mouse. Select your gun Movie clip and give it the instance name of "gun". This is very important. without this the gun will do nothing. Here is what the left side of your properties bar should now look like.


10. Open up the Actions panel with f9 and insert this code.
onClipEvent (mouseDown) {
_root.gun.play();
 }
What This Code Means: This code means that when the event mousedown (your mouse button is pressed down) we want the flash file to return to the main level of the timeline (_root) then look into the Movie clip called gun and play its timeline, which is the timeline we made in steps 5-8. (our gun firing)

11. Test your movie (ctrl + Enter) and see if when you click your mouse your gun fires regardless of where you are aiming.

12. Draw your crosshairs, for this i am going to just take 2 lines and make them like a plus sign. you can make yours how you want. Below is mine.


13. After you have finished drawing the crosshairs select it and covert it to a symbol by pressing f8. Name it crosshair and make it a Movie clip. if you are wondering why we make them Movie clips instead of graphics its because you cant add actionscript to a graphic.


14.Its time to make the crosshair we just drew replace our mouse. To do this click on your crosshairs and then open up the Action panel with f9. Then add this code.
onClipEvent (load) {
startDrag("", true);
Mouse.hide();
}
What This Code Means: This code means that when this movieclip is loaded we want the mouse to start dragging our crosshairs and then hide the mouse so we can only see the crosshairs.

15. If we test our game (ctrl+enter) our should crosshairs move instead of our mouse and the gun should fire when we click.

Note: Time to make the gun move with the crosshairs. We are going to make it move side to side but not up and down.

16. Click on your crosshairs and give it the instance name of "aim" I like short and sweet names for everything that way im less likely to spell them wrong in my code.


17. Click on your crosshairs and open up the Actions panel (F9), we should already see our code to make it move now lets make the crosshairs move the gun. so add this code below the other codeing
onClipEvent (enterFrame) {
 _root.gun._x = _root.aim._x;
}
What This Code Means: This code means that when our movie enters this frame, which it does over and over, we want it to make the x axis coordinate for the gun the same as for the crosshairs. makeing them move side to side together.

Check: Test the movie again (ctrl + Enter) to make sure that the crosshairs move, the gun moves, the gun fires, and they mouse is hidden.

Note: Now we have our gun all ready for combat now its time to make the enemys. For this tutorial we will be making the easiest enemy to make, a circle moveing across the screen, but it will move with actionscript. This is because it saves file size and makes our timline easier to manage, plus its nice to know how to do. There will be tutorials later on on how to make more advanced enemys.

18. Make a circle using the circle tool and make it whatever size you like, select it and covert it to a symbol (f8). Make it a Movie clip and name it "target".


19. Click on the target change its instance name to circle.


20. Click on the circle and open up the Actions panel for it (f9). Then insert this code.
onClipEvent (enterFrame) {
if (this._x <= 500) {
 this._x += 10;
 }
else {
 this._x = 30;
 }
}
What This Code Means: this code means that everytime we enter this frame we want to check to see if the circles x cordinant is less than or equal to 500. If it is then we want to move the target 10 px to the right. If its not then we want it to move the target to the point on the x axis where x is 30.

Note: change that number 10 to a higher number to make it move quicker and a lower number to make it move slower.
Note: the code this._x += 10; is the same thing as saying this._x = this._x + 10 its just shorthand.
Note: the word "this" in the code just means the movieclip that the code is on. for this case its a shortcut for typing out target.

Check: If you test your movie and you should have your target moving along with everything before.

21. Time to make our circle (target) explode after 4 shots. To do this double click on our circle to enter its timeline. Then insert a keyframe in frame 2 and click back on frame 1. This is similar to what you did in step 5.

22. Open up the Actions panel for frame 1 by clicking on frame 1 and pressing f9. Then insert this code.
stop();
What This Code Means: This simply stops the animation on this timeline from going past frame 1.

23. Click back on frame 2 so we can destroy our target. For this tutorial we are going to make the target show bullet holes and eventually disapear. Click on frame 2 because thats were we are going to draw abullet hole on our circle.

24. Select the circle tool and set the stroke to 0 and the fill to a dark grey. then draw a small cirlce somewhere on the target like below.


25.Drag some of the edges of the circle (the bullet and the target) to make it look more like it was actually hit. heres what mine looks like. I know it doesnt have any detail I will let you guys make that.


26. Insert another keyframe into frame 3 and then click back on frame 2. Open up the actions panel (f9) and insert this code
stop();
Note: we are adding these stops so that later on when we add the code to the main cricle itself everytime we click on it it will play 1 frame, making it look like its getting shot.

27. Repeat steps 23 and 24 two more times so that your last frame has 3 bullet wholes in it.

28. Insert a blank keyframe into frame 5. so that after 4 hits the target is gone. If done correctly your circle's timeline should look like this.


29. Click on frame 5 and open up the actions panel, then insert this code.
_root.circle._x=30;
What This Code Means: This just says that when we reach this frame we want the target to reappear at the 30 pixel mark on the x axis.

30. Time to make this actually do something. right now its all made but if you have tested the movie you will noticed it doesnt play it when we click. Before we continue we must return to the main timeline by hitting the back arrow.


31. Now open up the actions panel for the circle by clicking on the circle and pressing f9. Then insert this Action Script.
on (press) {
this.play();
}
What This Code Means: This means that when we click on the target we will go to "this", which is the circle, and play its timeline, which was those 5 frames from earlier.

Check: The Action Script on your circle should look like this.
onClipEvent (enterFrame) {
if (this._x<=500) {
 this._x += 10;
} else {
 this._x = 40;
}
}
on (press) {
this.play();
}
And Your Done!
  
     
 

Your project is to modify the movie you just made to act like this one: