Flash Game Design  
 
   
 
Tutorials Articles
   
       
 
This Flash tutorial will show you how to allow the shooting of bullets in your Flash Games. Click the flash movie below to focus, press the space bar to fire missiles and the arrow keys to move.
 
Flash Tutorials
Move MC's with Keys
Dynamic Starfield
Shooting Bullets
   
 
Step 1.
For this tutorial we'll be focusing on shooting bullets dynamically from a space ship MC (movieclip), using the spacebar. First of al create a new flash document with dimensions of 25x x 220, a black background a frame rate of 30fps. Save the images below or you can use your own. Import them into Flash (File > Import > Import to Stage.
a )Spaceship   b) Bullet
 
 
Step 2.
Convert each of them into a Movieclip symbol (modify > convert to symbol), setting the spaceship's linkage identifier to "ship" and the bullet's to "bullet". Make sure that spaceship and the bullet images are at 0 for both x and y co-ordinates, inside the movieclips. Delete them both from the stage.
a)   b)
 
 
Step 3.
Name the layer on the timeline "shoot", click on the 1st frame and open up the actions panel. Firstly, we need to declare some variables for the bullets. bulletSpeed for how far the bullet will travel each frame, which in this case will be 9 pixels. bulletReady and bulletDelay will be used to check when you are allowed to fire. We need a delay so that when you press the space bar there is some distance between each bullet fired. Bullet array will be used to stop each active bullet. Lastly bullet count will be used to give each bullet an assigned number, making it unique.
 
Step 4.

Line 6 - So, now that the vaiables have been declared, we shall write a function (createBullets()) that will be called when we want to create a bullet.

Line 7 - In this function we first attach an instance of the movieclip, that we gave the identifier "bullet". Each bullet will be given a number to identify it.

Line 8 - We increase bulletCount by 1 using ++, so that next time we create a bullet it'll be called "bullet1".

Line 9 - We then want to position bulletMc at it's starting point, which is the tip of the spaceship for this tutorial. The position of the ship will changing depend on where it's moved, so we first have to find it's x position (line 9) and add it to the half the ships width minus half the bullet's width.

Line 10 - The bullet's starting y position is calculated by adding the ships y position to the bullets height.

Line 11 - Lastly for this function we add bulletMc to bulletArray.

 
Step 5.

Next we're going to create the moveBullets() function. This function will be called repeatedly, which we will write the code for later on.

Line 14 - When this function is call first of all bulletReady is checked to to see if it's set to "true" and if the Space key is pressed.

Line 15 - If these conditions are met bulletReady is set to false, so that there is a delay between the next bullet fired bullet fire. In this case it will be 0.150 seconds, as we decalred at the top.

Line 16 - The the time, the space key is pressed, is then recorded in "currentTime"

Line 17 - A bullet is created using the creatBullets() function.

Line 18 - If bulletReady is false and the space key isn't down....

Line 19 - We check to see if the time has reach the currentTime plus the delay

Line 20 - If the delay is over we set bulletReady to false again so that another bullet can be fired.

 
Step 6.

Line 23 - A for loop is used to go through every bullet movieclip

Line 24 - Each bullet movieclip's y poistion is deducted by the bullet speed, making it apear to move along.

 
Step 7.
Here is the whole of the code.
 
Step 8.
Lastly we add the moveBullet() function to the onEnterFrame() function, so that the code is executed repeatedly. As you can see the the other two functions from the previous tutorials are also there.
 
Step 9.
Next, make another new layer called "ship" and insert the code shown below. This code is from the previous tutorial Move MC's with Keys. It will attach the ship and make it controllable with the arrow keys. You can also add Dynamic Starfield code for added effect.
var speed = 6;

var shipMc = this.attachMovie("ship", "ship", 10000);

shipMc._y = Stage.height-(shipMc._height+10);

shipMc._x = Stage.width/2 - (shipMc._width/2) ;
function moveShip() {
if (Key.isDown(Key.UP)) {
shipMc._y -= speed;
}
if (Key.isDown(Key.DOWN)) {
shipMc._y += speed;
}
if (Key.isDown(Key.LEFT)) {
shipMc._x -= speed;
}
if (Key.isDown(Key.RIGHT)) {
shipMc._x += speed;
}
}

 
Step 10.
That brings us to the end of this Flash tutorial. You can download the FLA, containing the code for the ship control, bullet fire and starfield from here.
More Flash Tutorials
Full Flash Site Scrolling Gallery
 
Circular Slideshow Dynamic Menu
Shooting Bullets Rotating Gallery
 
 
 
Site Copyright © 2006 - 2009 Nick DS. All rights reserved.