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


dailyclick
All times in EST

Low Carb: 8:00 PM

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

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
Lights3on--offonoffon
Lights2on-offonoffon-
Lights1onoffonoffonoffon

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


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
Animation Behaviors in Motion Project

Importing Photoshop Images into Motion

Motion 3D Animation - The 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