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

Home Improvement
Women's Fashion
Small Office/Home Office
Holiday/Seasonal Cooking
Crafts for Kids

All times in EST

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


Transition Timeline Effect in Flash CS3

In this tutorial, we will build the design that we planned out in the previous tutorial onto the layers of the FlashR Timeline. Then, we will work on the first of the animations for the advertising blinkie. Although there are easier ways to create this animation, such as ActionScript, this tutorial is about Timeline Effects in Flash CS3. So, we will use Timeline Effects to create our animation. Open Flash CS3. Our blinkie will be 150 x 50 pixels. Set these measurements for the Document Properties.

  1. We will put the grunge background on the first layer. Rename Layer 1 to “Background” and import the grunge graphic onto the stage (File – Import – Import to Stage).

  2. Repeat the last step to create our second layer which will contain the lace and cameo. Insert a new layer on the Timeline and name it “Static Details”. Import the lace and cameo PNG to the stage.

  3. Repeat this step again. Add a third layer and name it “Bug 1”. Import the PNG containing the first ladybug onto the stage.

    Now we have all the design elements in place and we can work on our first text effect. This will be a combination of two Transition Timeline Effects that will first fade-in the designer’s name onto the stage and then fade-out, leaving the space open for the next animation.

    We will eventually animated the ladybugs and we want them to move over the top of any text. Therefore, we need to add our text layers above the grunge background and below the lace and cameo.

  4. Add a new layer above the Background layer. Flash will name this layer “Layer 4”. Use the Text tool to add the designer’s name in the empty space above the lace. For the example, I used the Arial font because the text will be so small on the blinkie and Flash doesn't handle small text well. Arial will be easier to read. Click Control – Test Movie to check the placement of the designer’s name.

    Now, we will copy/paste the same text onto the second text layer. We will use the Paste in Place command to be sure that the text on each layer is perfectly aligned. (We could also use the Copy Frames feature for this task.)

  5. On Layer 4, select the text and click Edit – Copy from the Menubar. Add a new layer which will become Layer 5. On this new layer, click Edit – Paste in Place to add the text.

    We should now have two text layers named “Layer 4” and “Layer 5”. Turn off the visibility on Layer 5. We will work on Layer 4 first.

Next →

Join us in the Flash forum to discuss this project.

J3 Designs

Add Transition+Timeline+Effect+in+Flash+CS3 to Twitter Add Transition+Timeline+Effect+in+Flash+CS3 to Facebook Add Transition+Timeline+Effect+in+Flash+CS3 to MySpace Add Transition+Timeline+Effect+in+Flash+CS3 to Del.icio.us Digg Transition+Timeline+Effect+in+Flash+CS3 Add Transition+Timeline+Effect+in+Flash+CS3 to Yahoo My Web Add Transition+Timeline+Effect+in+Flash+CS3 to Google Bookmarks Add Transition+Timeline+Effect+in+Flash+CS3 to Stumbleupon Add Transition+Timeline+Effect+in+Flash+CS3 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
Animation Software Terms

Why Hype 3.5 and Pro

Tumult Hype and Pro Intro

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

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

BellaOnline Editor