Flash Candle Flame Tween Animation

Flash Candle Flame Tween Animation
Now that we have a plan, we can build our FlashR animation. For each flame shape transformation, we will begin by changing the shape of the flame_shape movie clip. Then we will transform the two glow movie clips (flame_glow and back_glow) to match our new flame shape. We will use the Free Transform tool to change the shape of the movie clips. At this point, we won't worry about the glow at the bottom of the candle. We will work on that later.

If you have been following the tutorials for this lesson, you will remember this transformation technique from before. Starting with a basic candle flame shape, we used this technique to create several variations of the flame and then put them together to build a fire in PhotoshopR. Let's use this same technique to build our Tween animation.

Open your working file into Flash.

In order to test our animation in the Flash player, we need to have an instance of our flameAni movie clip on the stage. From the Library, drag the flameAni movie clip onto the center of the stage and double-click on the movie clip to enter edit mode. The edit mode workspace will change to display the Timeline for our movie clip. We have five layers in the Timeline, which are the flame_glow, flame_shape, back_glow, candle and bg layers. For each layer, add a blank frame (Insert � Timeline � Frame) on Frame 56.

1. For each of the flame_glow, flame_shape and back_glow layers, right-click on Frame 1 and choose Create Motion Tween. Flash will turn the blank frames into a Tween Span.

Lock all layers but the layer we are working on.

3. On the flame_shape layer, right�click on Frame 3 and add a Keyframe (Insert Keyframe � All). Select the flame_shape movie clip on the stage with the Free Transform tool. Drag the Registration point from the middle center of the movie clip to the bottom center. Reduce the height of the flame by half and then make it a little wider. Lock this layer.

4. Unlock the flame_glow layer and repeat the previous steps to reshape that movie clip. Repeat this for the back_glow movie clip.

Now, we can test the animation. From the Menubar, click Control � Test Movie � In Flash Professional. Not very impressive yet. Let's work on it some more.


Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.

Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map

Content copyright © 2022 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.