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


eCard Project - Flash CS4 Object-based Tweens

In the first part of this tutorial, we set up the layers on the Timeline and decided on the lenght for our FlashR CS4 eCard animation. Now, we are ready to animate the Lights1 layer. Because all the lights are overlapping, it will be easier to select the correct object if we lock all layers that we are not working on. Click the lock icon on all but the Lights1 layer.

When the four transparent-layered images (three lights and one text) were imported on to the Flash stage, they were automatically converted to movie clips. Now we are ready to add the object-based motion tween.

1. On Frame 1 of the Lights1 layer, select the image. Right-click and choose "Create Motion Tween". Flash will add a Tween Span with 12 frames. We want to match the length of the BG layer. Click and drag the Tween Span to Frame 75.

2. Go to Frame 12 and select the movie clip. Go to the Properties panel and to the Color Effect pane. Use the drop-down menu to set the Style to Alpha. Then use the slider control to set the alpha to zero. This will make the movie clip invisible and "turn off the lights".

3. To turn the lights back on, we first need to go to Frame 24 (see chart below). With the movie clip still selected, set the alpha back to 100. On Frame 36, set the alpha to zero and on Frame 48, set the alpha back to 100. On Frame 60, set the alpha to zero and on Frame 72, set the alpha to 100.

LayerFrame 1Frame 12Frame 24Frame 36Frame 48Frame 60Frame 72

4. As you can see from the chart, we want to alternate the Lights2 layer with the Lights1 layer. Repeat the previous steps for the Lights2 layer but start by setting the alpha to zero on Frame 24. Click the lock icon on all but the Lights2 layer.

5. The Lights3 layer will be the same as the Lights1 layer. But, begin on Frame 36 and set the alpha to zero. Click the lock icon on all but the Lights3 layer.

6. Test your movie and you should see the Xmas lights alternate on and off every second.

Now, we are ready to animate the Let It Snow text layer. Click the lock icon on all but the Let It Snow layer. The animation will be the text dropping down from the top of the stage. We want the text to be static for a few frames at the end of the animation so that the viewer has the opportunity to read the message. Lets make the text static from Frame 60 to 75.

7. Go to Frame 1. Drag the text image to the top and off the stage. Right-click on the image and create a motion tween. Drag the Tween Span to Frame 59. Drag the text back into place. To keep the text static and visible, we need to add frames at the end from Frame 60 to 75. Right-click on Frame 75 and choose Insert Frame from the menu. Here is the new Timeline.

8. Test your movie. You should see the text move slowly onto the stage from the top and sit there until the animation repeats. Save your working file.

Join us in the Flash forum.

Add eCard+Project+%2D+Flash+CS4+Object%2Dbased+Tweens to Twitter Add eCard+Project+%2D+Flash+CS4+Object%2Dbased+Tweens to Facebook Add eCard+Project+%2D+Flash+CS4+Object%2Dbased+Tweens to MySpace Add eCard+Project+%2D+Flash+CS4+Object%2Dbased+Tweens to Del.icio.us Digg eCard+Project+%2D+Flash+CS4+Object%2Dbased+Tweens Add eCard+Project+%2D+Flash+CS4+Object%2Dbased+Tweens to Yahoo My Web Add eCard+Project+%2D+Flash+CS4+Object%2Dbased+Tweens to Google Bookmarks Add eCard+Project+%2D+Flash+CS4+Object%2Dbased+Tweens to Stumbleupon Add eCard+Project+%2D+Flash+CS4+Object%2Dbased+Tweens 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