2+: Interactive Animation (Muzzle Flash)

This tutorial builds on Part 2 of the six-part tutorial series on building a Space Shooter. Here we will build on the game design by adding some animation effects when we fire the player's weapon.

Prerequisites: Please complete Tutorial 2 first.

Tools & Techniques: coding the visible property and coding ActionScript within symbols.

We will start with the Ship symbol. Navigate inside the symbol to edit its contents.
Create a new layer called 'MuzzleFlash' with a single Keyframe and subsequent frames across the timeline as shown below. (If you have not completed Tutorial 1+, then you will only have one frame and possibly one layer.
This tutorial will work so long as the frame is as long as the rest of the layers, be it one frame or four). I place this layer below the rest of the spaceship.

 

On this new layer, add a circle around the muzzle (gun) area.
Navigate to the 'Color' panel and select 'Radial gradient' from the drop-down.
I have selected bright yellow at either end of the gradient, with the alpha ("A:") set to 100% on the left and 0% on the right.

The size will depend on your spaceship, stage dimensions, etc. I chose a 10 by 10 pixel circle, no Stroke.

Convert this circle to a symbol named 'MuzzleFlash' of type Movie Clip.

Select your symbol on stage, and give it the Instance Name, "muzzle_mc".

Navigate inside this symbol and check your headers to ensure you are inside 'MuzzleFlash' as shown below.

While inside this symbol, right-click on Frame 4 and select 'Insert Blank Keyframe'.

Important: We're going to insert 2 lines of code inside this symbol, in this blank keyframe. This code is not with the rest of your code.

Navigate to its actions as shown below.

Add the following 2 lines of code:

stop;
this.visible = false;

The MuzzleFlash (muzzle_mc) symbol's timeline will now look like the image below.

Now exit the symbol and navigate to the stage's Actions panel. Inside the initialise() subroutine add a line to make the new muzzle_mc instance invisible:

player_mc.muzzle_mc.visible = false;

Find the 'addBullet' function and add two lines of code at the end (before the closed brace ' } '.)

The first start line will start the muzzle_mc instance playing through its timeline from frame 1, and the second line will make it visible to the user.

player_mc.muzzle_mc.gotoAndPlay(1);
player_mc.muzzle_mc.visible = true;

The muzzle_mc instance will become invisible again following its own ActionScript we placed inside the symbol on frame 4.

Test your application, and good luck!

Next try Lesson 3.