Transform Timeline Effect in Flash CS3

So far in this group of tutorials, we have planned the design for our advertising blinkie and create the first text effect using the Flash^R Transition Timeline Effect. In this tutorial, we will create two types of animation. One is a simple frame-based animation and the other uses the Transform Timeline Effect to morph text.

At this point, we have five layers in the Timeline. Before we begin to work on the Transform animation, we want to add a simple text animation to the design which will display some text for 20 frames. The text will say “Designer for”.

Add a new layer to the Timeline above the Transition 2 layer and name this layer “Website”. Right click on Frame 61 and add a Keyframe. With the Text tool, add the “Designer for” text to the stage.

You may need to add a Frame to the static layers in order to see the background graphics. Right click on Frame 61 of the Background layer and add a Frame. Repeat this for the Static Designs and Bug 1 layers.
We want this text to be visible for 20 frames. Right click on Frame 80 on the Website layer and add a Frame. Repeat this again for the static layers.

Now we are ready to create the Transform Timeline Effect. We will be animating the name of the website which is J3 Designs.
Add a new layer above the Website layer. This will be Layer 7. Right click on Frame 81 and add a Keyframe. Make the background graphics visible again.
With the Text tool, add the text “J 3 Designs” to the stage. Part of the Transform effect will be to gradually change the color of the text from a light color that matches the background to black. This will make the text almost invisible at the beginning of the animation and fully visible at the end. Let’s change the text color. With the text still selected, use the Eyedropper in the Color Picker to set the text to the same color as the background graphic.

Another part of the animation will be to move the text to the right 30 pixels as it becomes more visible. Therefore, we need to position our text 30 pixels to the left so that it will be centered in the design when it stops moving at the end of the animation. The text is still selected, use the arrows on your keyboard to move the text 30 pixels to the left.
Still with the text selected, click Insert – Timeline Effects – Transform/Transition – Transform. This will open the Transform dialog box. By default, the Transform effect is set to the following. The first change we will make is to put a checkmark in the box next to Change Color. Also, we will move the Motion Ease slider all the way to the right which will slow the animation at the end. Finally, set the Change Position X value to 30.

Check the Update Preview and the click OK. Flash will add the effect to the timeline and rename the layer "Transform 1". This layer has 110 frames. Insert a Frame in the Background, Static Details and Bug 1 layers to make these layers visible throughout the animation.

Our next animation will be another Transition effect but this time we will use the Whip instead of the Fade.
Add another layer above the Transform 1 layer. On Frame 110 of this layer, add the text “J 3 Designs” and position it exactly over the same text on the layer below. Set the text color back to black.
Add a Keyframe to Frame 111 on this new layer. Then click on Frame 1 and remove the text. We do not want the text on this layer to be visible until Frame 111. Now we will add the text effect.
With the text still selected on Frame 111, click Insert – Timeline Effects – Transform/Transition – Transition. We want the text to disappear to the left. Set the Direction to Out and uncheck the Fade. Click on the left arrow and set the Motion Ease all the way to the right. We also want this animation to last longer than the default 30 frames. Set the Duration to 50. Click OK and Flash will give you 50 more frames and rename this layer “Transition 3”. You now have a total of 160 frames. Insert a Frame on Frame 160 for the background graphics.

Test your movie and save it as blinkie2.fla.

Join us in the Flash forum to discuss this project.

J3 Designs