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

Clairvoyance: 08:00 PM

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


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

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