g
Printer Friendly Version

editor  
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.




Flash and Animation Site @ BellaOnline
View This Article in Regular Layout

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.



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


BellaOnline Editor