Animating a Match in Adobe Flash

CATEGORIES: Flash, Tutorials | Cyndy Cashman | December 21, 2006

One of the most interesting aspects of animation is figuring out how create the illusions of an event. In this Flash animation, I’ll show you how to "light" a candle using Movie clip Symbols and a bit of ActionScripting.

Before beginning, you will want to play the completed animation located at the bottom of this page.

This tutorial assumes you have basic Flash skills including using the drawing tools, Properties Panel, Color Panel, and Actions Editor to add a "stop" action to a frame in a Timeline.

STEP 1: Creating a Candle

Create a new Flash document. In the Properties panel select a dark blue for the Background color and enter 15 in the Frame Rate field.

Choose Insert > New Symbol. Select Movie clip for the Type and enter "candlestick" in the name field. Click OK.

Use the Pencil or Pen tool to draw a candlestick. Select the Paint Bucket Tool (K). Open the Color Panel and select Linear from the Type menu. Select the left Gradient Color Swatch and enter the following settings: R: 88, B: 1, G: 1. Add another Gradient Color Swatch by clicking in the middle of the Color Gradient. Enter the following settings: R: 204, B: 0, G: 0. Select the right Gradient Color Swatch and enter the following settings: R: 141, B: 26, G: 1.

Click in the candle with the Paint Bucket to apply the gradient. Use the Gradient Transform Tool (F) to adjust the gradient so that it runs vertically.

STEP 2: Drawing the Flame

Insert a new layer above the current layer. Draw a flame and fill it with a radial gradient. In the Color Panel, select Radial from the Type menu. Select the left Gradient Color Swatch and enter the following settings: R: 255, B: 204, G: 0. Select the right Gradient Color Swatch and enter the following settings: R: 253, B: 252, G: 77.

Switch to the Selection Tool (V) and Control-click (PC: Right-click) on the flame. Choose Convert to Symbol. Enter "flame" in the Name field and select Movie clip for the Type. Click OK.

STEP 3: Animating the Flame

To simulate flickering you will need to make the flame grow and contract over a series of frames. You can also add realism by changing the position of the gradient highlight as the flame flickers.

Double-click the Instance of the "flame" to edit its Timeline. Insert Keyframes (F6) in Frames 5, 15, and 25. Switch to the Subselection Tool (A). In Frame 5, modify the tip of the flame so that it beds to the right. In Frame 15, bend the tip of the flame to the left. Select the Gradient Transform Tool. In Keyframes 5 and 15 adjust the position and shape of the gradient’s highlight to match the flame’s shape.

Select all of the frames in the layer by clicking on the layer name. In the Properties panel select Shape from the Tween menu. Click on the Stage to activate it. Press the Return (PC: Enter) key to see the animation. Adjust the flame’s shape and fill until you are satisfied with the effect before continuing to the next step.

STEP 4: Duplicating the Candlestick

Click Scene 1 button to return to the Main Timeline. Select the Instances of the "flame" and "candle" on the Stage. Control-click (PC: Right-click) and choose Convert to Symbol. Select Movie clip for the Type and enter "candlestick" in the Name field. Click OK.

Select the Instance of the "candlestick" if it isn’t already selected. Press Command-D (PC: Control-D) six times. You should have seven Instances of the "candlestick" on the Stage. Arrange the candlesticks across the Stage as though they were sitting on a shelf.

Note: In the example the candles are sitting on a shelf among sprigs of holly with a Christmas greeting above the display. Creating these elements and creating the play button are not covered in this tutorial.

STEP 5: Adding a Glow to the Flame

Double-click an Instance of "candlestick" to edit its Timeline.

Use the Selection Tool to select the Instance of the "flame". In the Properties panel click the Filter tab. Click the Plus button and choose Glow from the Menu. Enter the following settings: Blur x: 14, Blur y: 6, Strength: 100%, Quality: High, Color: Red, Inner glow: Checked.

Click the Plus button and choose Glow again. Enter the following settings: Blur x: 9, Blur y: 11, Strength: 119%, Quality: Medium, Color: Yellow.

In the Properties panel click the Properties tab. Enter "flame_mc" in the Name field.

Note: If you’re wondering why we gave the "flame" an Instance name "flame_mc", it is because we will be using ActionScript later to "talk" it.

STEP 6: Creating a Match

Insert a new Layer. Rename the layer "match". Select the Rectangle Tool and draw a filled rectangle in the shape of a matchstick on the Stage. Select the rectangle and Control-click (PC: Right-click) and choose Convert to Symbol. Select Movie clip for the Type and enter "matchstick" in the Name field. Click OK.

Double-click the Instance of the "matchstick" to edit its Timeline. Insert a new layer. Name it "match head". Draw a match head and fill it with a radial gradient. Select a red for the left Gradient Swatch and white for the right Gradient Swatch. Switch to the Gradient Transform Tool (F) and adjust the gradient so that the white is located at the tip of the match head.

STEP 7: Adding the Flame

You should still be editing the "matchstick" Timeline. Insert a new layer. Rename the layer "flame". Open the Library using Command-L (PC: Control-L). Place an Instance of the "flame" on the Stage over the tip of the match.

Select the Instance of the "flame". In the Properties panel click the Filter tab. Click the Plus button and choose Glow from the Menu. Enter the following settings: Blur x: 12, Blur y: 11, Strength: 119%, Quality: Medium, Color: Yellow.

Click the Scene 1 button to return to the Main Timeline.

STEP 8: Extend the Timeline

Select Frame 58 in both layers. Press F5. Insert a new layer and rename it "actions". Insert a Keyframe in Frame 58 of the "actions" layer. Add a "stop" action to the Frame.

STEP 9: Hiding the Flame

All of the candles except one will be burning. A match will light that candle.

Select the far left Instance of the "candlestick". In the Properties panel enter candle_mc in the Name field. Select Frame 1 in the "actions" layer. Open the Actions Editor. Enter the following script:

this.candle_mc.flame_mc._visible = false;

This script hides the flame in the Instance of the "candlestick" named "candle_mc" by setting the property _visible to false. The flame will remain hidden until we tell Flash to show it in Frame 27 by changing the property _visible to true.

STEP 10: Showing the Flame

Insert a Keyframe in Frame 27 of the "actions" layer. Open the Actions Editor and enter the following script :

this.candle_mc.flame_mc._visible = true;

STEP 11: Animating the Match

Insert Keyframes in Frames 20, 41, and 51 of the "match" layer. In Frame 1, move the match off of the lower-left side of the Stage. In Frame 20, move the match on top of the candlewick of the unlit candle. Select Frame 1. In the Properties panel select Motion from the Tween menu.

In Frame 51 move the match off of the right side of the Stage. Select Frame 41. In the Properties panel select Motion from the Tween menu.

Choose Control > Test Movie to see the result.