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
Heart Disease
Horror Literature
Dating
Hiking & Backpacking
SF/Fantasy Books
Healthy Foods
Crafts for Kids


dailyclick
All times in EST

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

Realistic Flash Candle Flame Animation


Still in the edit mode for the flameAni movie clip, we can make our next transformation. This time the wind will blow our flame slightly to the right.

5. Add a Keyframe to Frame 8. For the flame_shape layer, without changing the shape of the flame rotate it slightly to the right. Repeat for the other two movie clips.

Now we will make the flame taller.

6. Add a Keyframe to Frame 14. On the flame_shape movie clip drag the top center handle of the Transform tool upward to make the flame taller. Repeat this for the other two movie clips.

Now we will add a little bounce to the flame. If you watch a real candle flame, it sometimes bounces just a little. We will make it bounce a few times and with each bounce the flame will move a little to the left until it is upright again.

7. Add a Keyframe to Frame 16. Increase the height of the flame just a little. Also rotate the flame just a little to the left. Repeat for the other two movie clips.

For the following list of Keyframes, first adjust the flame_shape movie clip and then the flame_glow and back_glow movie clips to match.

Add a Keyframe to Frame 18 and rotate it to the left a little more.
Add a Keyframe to Frame 20 and shorten the flame and rotate to left a little more.
Add a Keyframe to Frame 22 and lengthen the flame a little, rotate until the flame is upright.

Add a Keyframe to Frame 27 and shorten the flame. This time instead of rotating the movie clip we will skew the flame a little to the left. Place your mouse over the transformation box between two handles. You will see the mouse change to a horizontal double arrow. Drag to skew the flame a little to the left.

Add a Keyframe to Frame 29 and lengthen the flame a little.
Add a Keyframe to Frame 31 and shorten the flame and skew the flame back to the upright position.

Add a Keyframe to Frame 33 and lengthen the flame.
Add a Keyframe to Frame 35 and shorten the flame.
Add a Keyframe to Frame 37 and lengthen the flame. But this time do not lengthen the two glow movie clips as much so that the tip of the flame shape is higher than the glow.

Add a Keyframe to Frame 42 and shorten all three movie clips to the same height, skew a little to the right.

Add a Keyframe to Frame 47 and heighten the flame. This time make the flame movie clip a little higher than the two glow movie clips.

Add a Keyframe to Frame 49 and shorten the flame.

Add a Keyframe to Frame 51 and heighten the flame, skew a little to the left.

Add a Keyframe to Frame 56 and shorten the flame about half, skew to upright position.

That was a little laborious but the result is nice. If you didn't learn anything else from this tutorial, you will know that you need to add a Keyframe each time you make a change to a Motion Tween.

← Back






Join us in the Flash forum.




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



 



RSS | 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 © 2013 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
Ken Burns Effect In Motion - Record Keyframes

Ken Burns Effect In Motion 5 - Set Up

Animated Title in Motion

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 © 2013 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor