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 Flash^R 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.

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).
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.
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.
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.)
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

	Diane Cipollo BellaOnline's Flash and Animation Editor