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

Finishing the Blinkie with Flash Motion Tweens


When we last worked on the Flash blinkie animation, we had just finished the text effects. The last text effect to occur in the animation was the appearance and disappearance of the website name “J3 Designs”. It disappears off the stage to the left with a Timeline Transition Effect (Transition 3 on the Timeline). There was a reason for this and you are about to find out what that reason was.

Remember that, as part of the design details, we have those two ladybugs. Well, it’s time to put them to work. When we built the layers to our blinkie project, we added the gold ladybug to the Bug 1 layer. Now, the first thing that we will do is add the second ladybug to a new layer which we will call Bug 2. We want this red ladybug to appear from under the cameo. Therefore, we will need to place the new layer under the Static Details layer.

Open blinkie2.fla into Flash CS3 and let’s get to work. We want the ladybug to start moving from under the cameo as the website name starts to disappear. We want it to look like the text is disappearing because of the ladybug. So we will add this new ladybug on Frame 110, which is when the text starts to disappear.

  1. Click File – Import – Import to Library to open the Import dialog box and add the red ladybug to our Library.

  2. Add a new layer under the Static Details layer and name it “Bug 2”. Add a Keyframe (Insert – Timeline – Keyframe) to Frame 110. Drag the red ladybug from the Library to under the cameo and out of sight for now.

    We want this ladybug to move to the left until it disappears off the stage as the text disappears. So, we want the ladybug all the way to the left and off of the stage by the time we reach Frame 160.

  3. Click on Frame 160 on the Bug 2 layer, add a Keyframe and drag the red ladybug to the left and all the way off the stage. Right click between Frame 110 and 160 and choose Create Motion Tween from the pop-up menu.

    Test the movie and you should see the text disappear as the ladybug moves over it. Once the red ladybug is off the stage, we will move the gold ladybug (Bug 1 layer) up and to the right until it also disappears off the stage.

  4. Click on Frame 160 on the Bug 1 layer and add a Keyframe for the starting point for the gold ladybug’s animation. Let’s use 20 frames to move the gold ladybug off the stage. Click on Frame 180 and add a Keyframe. Move the gold ladybug up and off the stage.

  5. Right click between Frame 160 and 180 and create a Motion Tween. Click on Frame 180 and add a Frame to the Static Details and Background layers to make the contents on these layers visible again.

    Finally, we want to move the gold ladybug back to its original position at the bottom left of the stage. But we don’t want the bug to move down from the top of the stage. We want it to move up from under the stage. So we need to first place the gold ladybug at the left and under the stage. Then all we need to do is move it upward back into its original position so that the animation can repeat. We will use 10 frames to move the ladybug back into place.

  6. Go all the way back to Frame 1 on the Bug 1 layer and select the gold ladybug. Click Edit – Copy to save the original position of the gold ladybug.

  7. Still on the Bug 1 layer, add a Keyframe to Frame 190. Click Edit – Clear to remove the gold ladybug that is already there. Then, click Edit – Paste in Place to put the gold ladybug back to the original position.

  8. Still on the Bug 1 layer, click on Frame 181 and add a Keyframe. Then, remove the gold ladybug that is already there. Put the gold ladybug back into the original position on this frame (Paste in Place). Then, drag this ladybug to under the stage. Add a Motion Tween between Frame 181 and 190 which will move this ladybug up and onto the stage.

  9. Click on Frame 190 and add a Frame to the Static Details and Background layers to make the contents on these layers visible again.

Test and save the blinkie as blinkie3.fla. Then publish your blinkie as a .swf file and enjoy your new blinkie.


Join us in the Flash forum to discuss this project.

J3 Designs




Add Finishing+the+Blinkie+with+Flash+Motion+Tweens to Twitter Add Finishing+the+Blinkie+with+Flash+Motion+Tweens to Facebook Add Finishing+the+Blinkie+with+Flash+Motion+Tweens to MySpace Add Finishing+the+Blinkie+with+Flash+Motion+Tweens to Del.icio.us Digg Finishing+the+Blinkie+with+Flash+Motion+Tweens Add Finishing+the+Blinkie+with+Flash+Motion+Tweens to Yahoo My Web Add Finishing+the+Blinkie+with+Flash+Motion+Tweens to Google Bookmarks Add Finishing+the+Blinkie+with+Flash+Motion+Tweens to Stumbleupon Add Finishing+the+Blinkie+with+Flash+Motion+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
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