logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

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.

Next →






Join us in the Flash forum.




Add Flash+Candle+Flame+Tween+Animation to Twitter Add Flash+Candle+Flame+Tween+Animation to Facebook Add Flash+Candle+Flame+Tween+Animation to MySpace Add Flash+Candle+Flame+Tween+Animation to Del.icio.us Digg Flash+Candle+Flame+Tween+Animation Add Flash+Candle+Flame+Tween+Animation to Yahoo My Web Add Flash+Candle+Flame+Tween+Animation to Google Bookmarks Add Flash+Candle+Flame+Tween+Animation to Stumbleupon Add Flash+Candle+Flame+Tween+Animation to Reddit



 



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


For FREE email updates, subscribe to the Flash and Animation Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 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.

g


g features
Motion 5 Parallax Effect - The Graphics

Animate Lower Third in Motion 5

Drop Zone and Lower Third in Motion 5

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor