1+: Interactive Animation (Afterburner)

This tutorial builds on Part 1 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 move the player.

Prerequisites: Please complete Tutorial 1 first.

Tools & Techniques: frame navigation, animating movement (motion tween), brightness effects.

We will start with the Ship symbol. Navigate inside the symbol to edit its contents.

You can do this by either double-clicking inside the 'player_mc' symbol on stage, or double-clicking the movie clip icon next to the 'Ship' symbol in the Library.

My 'Ship' was created across 3 layers to make for easier editing later, though your own may be simply drawn in one layer.

Add two new layers (image bottom-left)

  • The first layer should be placed at the top and will contain any ActionScript and labels. I've called this 'actions'.
  • The second I've called 'flame' should be placed on the bottom so it will be behind the ship components. This will be where we place our rocket flame or afterburner effect

Extending Frames (image bottom-right)

  • The ship layers ('ship-bits', 'ship-body', and 'ship-fins') will extend with standard frames to a length of 3.
  • Insert an additional 3 'blank keyframes' on both the newly created actions layer and flame layers.

One line of code needs adding to each of the 3 frames to stop each from cycling through its timeline. Insert the same code below on the actions layer for each frame.


You will need to label each frame, select Frame 1 on the 'actions' layer and navigate to the 'Properties' panel. Give this the label name 'static' as below.

On Frame 2 of the same layer, give the name 'forward'.

Select Frame 3 on the ‘actions’ layer and label this one 'reverse'.

Your timeline should look like the image below once we've place in some symbols for the forward and reverse actions.

In the new ‘flame’ layer, on Frame 2 draw your flame effect. See the images above to see what mine looks like. I used the oval tool to create a base, and then cut into it with equal ovals.

Make it a symbol called “Flames”.

With the ‘Flames’ symbol selected, make this a symbol called “Burner”.

You will now have nested symbols, with ‘Flames’ inside ‘Burner’, inside ‘Ship’, which in turn is on the stage. If you traverse inside each symbol the header should be as follows:

You wish to navigate to the ‘Burner’ symbol that holds the symbol named ‘Flames’ as below.

Insert a Frame around 10 frames into the timeline (right-click on the frame and select ‘Insert Frame’).

Next add a motion tween by right clicking on the frames (or the symbol) and selecting ‘Create Motion Tween’.

On the 5th frame (select it on the timeline) use the ‘Free Transform’ tool to shrink the symbol from the left-hand side.

You want the right side to stay where it was so it emits from the spaceship exhaust. Since Flash Pro became Animate the free transform resizes from the centre.

To fix the right side while using the transform tool, drag the white circle that marks the 'centre of rotation' and move it to the right edge. You are now free to transform.

With the symbol still selected, navigate to the properties panel and under the ‘Color Effect’ tab, select the ‘Brightness’ style, and set this to 30%. See below for what you will now have

Navigate to the final frame and return the shape close to its original size (I’ve kept it just a little off to make a smoother effect) and change its brightness closer to zero (I selected 10%).

Your ‘Burner’ symbol now animates the ‘Flames’ symbol which itself is static. The effect we’re going for is pulsating, but you could play with other effects too.

Exit the ‘Burner’ symbol and return to the ‘Ship’ symbol.

Select Frame 3 on the ‘actions’ layer and create an oval on this layer as shown below.

Similar to the burner effect, we are going to convert this circle a symbol called “Glow” and then convert again into a symbol called “Thruster”. See below for the header when we go inside each of the nested symbols.

Return to the ‘Thruster’ symbol as below.

Similar again to the “Burner” symbol, add the 10 frames, create a motion tween, and select frames 5 and/or 6. I changed the ‘Brightness’ to 60% here. The first and final frames will have Brightness set to 60%. This is shown below with all brightness colour effects.

Exit the symbol, returning to the ‘Ship’ symbol. Select Frame 4 in the ‘actions’ layer and label it “thrust-up”. Ensure the ‘flame’ layer is a blank Keyframe.

Return now to your stage and enter your original ActionScript from the previous tutorial. You need to edit the code in 'function 'playerMovement' to reflect the snippet below:

function playerMovement(event:Event):void 
  if ( left && !right && player_mc.x > 0)
    player_mc.x -= speed;
    player_mc.gotoAndStop("reverse");  //new
  else if( right && !left && player_mc.x < stage.stageWidth)
    player_mc.x += speed;
    player_mc.gotoAndStop("forward"); //new
  } //the following else-if is also new
  else if (!right)