Building Games in Flash5 Part1: Player Movement and Fire - Page 5

Now lets add in some weapon fire.

What we will do is create a movie clip that looks like spaceship laser fire. Whenever the Ctrl key is pressed we will duplicate this movieclip, set its location to the same location as the spaceship and then, within a loop, increase the movieclips x-position until it goes off the screen.

First up we need to draw some laser fire. On a new layer draw some laser fire, a couple of blue lines should do the job, select the laser graphic, convert to a MovieClip (F8) and set the instance name to laser.

Now we need to add some new code to the spaceship clip event code.
Select the spaceship movie clip and choose Window>Actions to open up the Actionscript window. Add in the lines _root.laser._visible=false; and laserCounter++; so that the onClipEvent(load) code is now:

onClipEvent(load){

  moveSpeed=10;
  _root.laser._visible=false;
 laserCounter=1;

}

The first of these two new lines makes the laser invisible when the spaceship first loads. Why? because this will be our source laser clip. Whenever the user presses the Ctrl key we will duplicate this movie clip to create a new laser fire. Think of it as the mold from which we produce all the laser fire, this is the original movie clip and what gets fired across the screen every time Ctrl is pressed is a 'duplicate'.

The second line is just setting a counter variable equal to one. We'll use this variable next.

Right, we've mentioned that the laser will be fired when the Ctrl key is pressed, now let's add in this code into the spaceship clipEvent. The following code goes directly after the line
onClipEvent (enterFrame) { in the actions window for the spaceship.

if (Key.isDown(Key.CONTROL) {
 laserCounter++;
 _root.laser.duplicateMovieClip( "laser"+laserCounter, laserCounter );
 _root["laser"+laserCounter]._visible=true;

	} 

This code is run when the Ctrl key is pressed. The code does three things. It adds one to the laserCounter variable, it duplicates the laser movie clip and makes the new, duplicated clip, visible.

The laserCounter++; bit adds one to the variable laserCounter. NB: ++ means 'increase by one', so the line is the same as laserCounter=laserCounter+1.

The second line duplicates the movie clip and gives this new duplicated clip the name 'laser' plus the value of the laser counter variable and sets the clips depth to the value of the laser count variable. So if _root.laser.count is equal to 4 then the new movie clip will have the name laser4 and the depth of 4.

The third line of code within the curly brackets makes the new duplicated clip visible. You may not have seen this syntax before. It uses array style referencing for objects and is especially useful if you want to reference a dynamically created object name. It's kinda similar to how eval was used back in Flash 4. For example: _root.laser._visible can also be written _root["laser"]._visible
The normal dot syntax wont let you write _root."laser"+laserCounter._visible - its incorrect. But you can do it using array notation, using square brackets!

We are almost at the end now, we just need to add some clip event code to the laser movie clip.

Select the laser movie clip, and choose Window > Actions to open the Actionscript window.

Type the following code:

onClipEvent (load) {

  laserMoveSpeed=20;
  this._y=_root.spaceship._y; 
  this._x=_root.spaceship._x+80;

}

Its some onClipEvent(load) code again. This time its associated with the laser movie clip so it will be run when the laser movieclip first appears on the stage. The code is also run whenever the laser movie clip is duplicated. When you duplicate a movieclip you duplicate the graphics, frames and all code associated with the movie clip. Each new duplicated movie clip has its own copy of the original movie clips code. And each duplicated movie clip runs its copy of the onClipEvent(load) code when its loaded or duplicated.

So what do those three lines do?
The first line just sets a new variable called laserMoveSpeed equal to 20. This will be the number of pixels that the laser moves per frame. The second line sets the y-position of the laser (or duplicated copy of the laser) to the same y-position as the spaceship.
The third line sets the x-position of the laser (or duplicated copy of the laser) to the same x-position as the spaceship plus 80. We add 80 because the x-position is for the center of the spaceship and it looks funny to have the laser coming from the center. Adding 80 makes it look like its coming from the front.

Now some enterFrame code:

onClipEvent (enterFrame) {

  this._x+=laserMoveSpeed;
  if (this._x>600){
    this.removeMovieClip();
  }

}

This code moves the laser movie clip (or duplicated copy of the laser) to the right of the screen. When the x-position gets greater than 600 it removes itself.

In a little more detail: the first line sets the x-position of the laser movie clip (or duplicated copy of the laser) to the current x-position plus laserMoveSpeed. As we set laserMoveSpeed to 20 this means that the x-position increases by 20 every frame.
The next lines are an if statement, which simple removes the laser movie clip if its x-position is greater than 600.

And that's it - if you followed carefully you should have a spaceship that you can move around the screen using the arrow keys and fire lasers with the Ctrl key. Hopefully you will also understand what the code is doing.

If you didn't get it working the final version can be downloaded

The next tutorial will build on this base to create a full game. We will add in scrolling backgrounds and some enemy spaceships to shoot at :)

Also thanks again to Olorin and MadSci for their assistance.

all the best, David.