g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


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

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 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 features
Subtle Animation Website Trends

Wix Editor - Background Video

Video on Wix Websites

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

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

BellaOnline Editor