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
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA


dailyclick
All times in EST

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

Animating Flash Filters in Motion Tween


At this point, we have a nice candle flame FlashR animation. However, the viewer can still notice the repeat in the animation. We can fix this by lengthening the Tween. Also, we will add a glow to the bottom of the candle and animate that glow.

First we will add more frames to our Tween. One way to do this is to copy the Tween frames from one layer and paste them onto another layer. You might ask yourself how this is different from the repeating animation we have now. The trick is to reverse the Tween frames for the new layer so that the animation plays in reverse. This will make it more difficult for the viewer to recognize the repetition.

1. Click on Frame 1 of the back_glow layer. From the Menubar, click Edit � Timeline � Copy Frames.

2. Add a new layer at the top of the Timeline. The first Tween ends on Frame 56 and we want this Tween to begin immediately. Add a Keyframe to Frame 57.

3. Click on Frame 57 and click Edit � Timeline � Paste Frames. Flash will duplicate the Tween. You will notice that the name of the new layer has been changed to back_glow. You might want to add a "2" to the name to indicate that this is the second Tween.

4. Now right-click on the Tween and choose Reverse Keyframes.

Repeat this for the flame_shape and flame_glow layers.

Now we can add our glow at the bottom of the candle. We have an empty layer called bg that we can use for the glow.

5. Rename the bg layer to bottom_glow. Set the Fill color to #fe7705 and the Stroke to null.

6. With the Oval tool, draw an oval under the candle. Convert the oval to a movie clip called "bottom_glow".

To turn the oval into a glow we will add a blur filter.

7. In the Filters panel, add a Blur filter. Set the Blur X and Y settings to 56px and the Quality to High.

One last touch is to add a small shadow at the bottom of the candle.

8. Add a new layer just above the bottom_glow layer and name it "shadow".

9. Set the Fill color to #000000 and draw a small oval at the bottom of the candle.

10. Convert the oval to a movie clip called "shadow".

11. Add the Blur filter to this movie clip. Set the Blur X and Y to 16px and the Quality to High.

Add a motion Tween to the bottom_glow layer. Now we can animate the bottom_glow movie clip. We will use the Tween spans that we just created for the flame as a guide. Move along the Timeline stopping at each Keyframe on the flame Tween. Add a Keyframe to the bottom_glow Tween span. Change the size of the bottom_glow movie clip at each Keyframe.

One final step is to do a little organizing in the Library. We want all the assets for this candleFlame fla in the candleFlame Assets folder. Drag the shadow and bottom_glow movie clips into this folder.






Join us in the Flash forum.




Add Animating+Flash+Filters+in+Motion+Tween to Twitter Add Animating+Flash+Filters+in+Motion+Tween to Facebook Add Animating+Flash+Filters+in+Motion+Tween to MySpace Add Animating+Flash+Filters+in+Motion+Tween to Del.icio.us Digg Animating+Flash+Filters+in+Motion+Tween Add Animating+Flash+Filters+in+Motion+Tween to Yahoo My Web Add Animating+Flash+Filters+in+Motion+Tween to Google Bookmarks Add Animating+Flash+Filters+in+Motion+Tween to Stumbleupon Add Animating+Flash+Filters+in+Motion+Tween 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
Particle System - Emitter Shape Parameters

Motion Particle Systems - Introduction

Particle Fog in Motion 5 - Scene Graphics

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