Workshop Home | Schedule | Introduction | Lesson 1 | Lesson 2 | Lesson 3 | Lesson 4 | Lesson 5

Lesson Two: Shapes, Text, Tweens and Morphs

Simple Shape Morph

First, create a new document and save it with a name like "shapemorph.fla". We will first create a simple shape morph by making a circle become a square.

Draw a circle anywhere on the Stage. For best results, the frame should contain only one item (a graphic object or broken-apart group, bitmap, instance, or text block).

Select the current working frame in the Timeline.

In the Property panel, select Shape from the Tween pop-up menu.

Create a second keyframe the desired number of frames after the first keyframe (frame 10 is good).

With the second keyframe selected, select the artwork you placed in the first keyframe and do one of the following:

Modify the shape, color, opacity, or position of the artwork.

Delete the artwork and place new artwork in the second keyframe.

We will do the second option. Delete the circle and draw a rectangle.

Test your movie. It should look something like this example.

Download the file for this animation: shapemorph.fla

You may select either of your two keyframes and modify your Tween settings in the Properties panel.

Drag the arrow next to the Easing value or enter a value to adjust the rate of change between tweened frames:

• To begin the shape tween gradually and accelerate the tween toward the end of the animation, drag the slider down or enter a negative value between -1 and -100.
• To begin the shape tween rapidly and decelerate the tween toward the end of the animation, drag the slider up or enter a positive value between 1 and 100.

By default, the rate of change between tweened frames is constant. Easing creates a more natural appearance of transformation by gradually adjusting the rate of change.

Select an option for Blend:

Distributive creates an animation in which the intermediate shapes are smoother and more irregular.

Angular creates an animation that preserves apparent corners and straight lines in the intermediate shapes. Angular is appropriate only for blending shapes with sharp corners and straight lines. If the shapes you select do not have corners, Flash reverts to distributive shape tweening.

Text Morph

Begin by creating a new document, and save it with a name like "textmorph.fla". Select Layer 1 in the Timeline and select the Text Tool from the Tools palette.

Set your text color to something that will contrast well with your background color. Click and drag a rectangle anywhere on the Stage for your first text string.

Type a word with 5 or 6 letters such as "Morph" or your name or whatever you like. With the entire text string selected, hit Control-b twice, first to break apart the letters into separate objects, second to convert them to bitmaps for morphing. You may also use the menus to select Modify>>Break Apart and Modify>>Timeline>>Distribute to Layers to accomplish the same task.

Select the frame in Layer 1 where you have been editing and select "Shape" from the Tween popup menu in the Properties panel.

Right-click the frame where the morph will end and select "Insert Keyframe". Delete the current series of letters and type a new word, different from the first. Once again, hit Control-b twice, first to break apart the letters into separate objects, second to convert them to bitmaps for morphing.

Play your movie. It should look something like the animation below:

Download the file for this animation: textmorph.fla

To make your morph work like the animation above, you simply select the first keyframe with the word "Morph", then hold down the Alt key and click and drag the keyframe to frame 20.

You have duplicated your first keyframe and copied it to frame 20. Now your animation morphs back to its original text.

Text Tween: Motion

Create a new document and save it with a name like "texttween1.fla". Add a text string to your Stage with no more than 4 or 5 letters (to keep this lesson short and simple). Make the font large enough to be clearly visible at 100% viewing scale. With the entire text string selected, hit Control-B or select "Break Apart" from the Modify menu. Each letter should become an individual object. Hit Control-Shift-D or select "Distribute to Layers" from the Modify>>Timeline submenu.

Observe how each letter is on its own layer in the Timeline, and each layer is named according to its letter.

Layer 1 remains and we do not need it, so we may delete it by selecting it and clicking the trash can icon along the bottom of the Timeline panel.

Select all four layers by holding the Shift key down and clicking each one's name. Select "Motion" from the Tween popup menu in the Properties panel. Select all layers in frame 20 and right-click and select "Insert Keyframe". Your Timeline should look something like this:

With each layer in frame 20 still selected, drag the text on the stage up about the distance equivalent to the height of the text. Play your file. It should be similar to the animation below:

Download the file for this animation: texttween1.fla

Select each layer in frame 1. Hold the Alt key down and click and drag the frame objects to frame 40. You have duplicated your text in the lower position and copied it to frame 40.

Now your animated text will raise and lower, returning to its original position.

If you want to add a bit more realism to the motion of the letters, you can modify the Ease parameter in the properties panel. To do this, first select just the four keyframes in frame 1 and click and drag the slider bar next to 'Ease' in the Properties panel to a value of 100. Next, select just the four keyframes in frame 20 and set the Ease parameter to a value of -100 (note the negative sign). Finally, select just the four keyframes in frame 40 and click and drag the slider bar next to 'Ease' in the Properties panel to a value of 100. Now your text will appear to hover in space at the high point of the motion tween, much like a real object would under the influence of gravity.

Next, we will shift each letter to be slightly out of sync with its neighboring letter. Select the bottom three layers together (letters o, v, e in this example) by holding the Shift key down and clicking each layer's name. Then click and drag the selected frames four frames to the right. Then select only the bottom two layers and shift them again four frames to the right. Lastly, select the bottom layer and shift it four frames to the right. Your Timeline should resemble the image below:

Your animation should resemble the one below:

Download the file for this animation: texttween2.fla

The letters seem to appear and disappear at the beginning and end of the animation. To resolve this, we need to duplicate the frames at the beginning and end of the animation to fill in the gaps.

To do this, let's start with layer 'e'. Select the keyframe in frame 15. Hold down the Alt key and click and drag this keyframe to frame 1. Do the same with the keyframes at the beginning of layers 'v' and 'e' and with the keyframes at the end of layers 'M', 'o', and 'v'.

Let's also increase the movie framerate to 60 fps. Now your timeline and final animation should resemble the ones below:

Download the file for this animation: texttween3.fla

Text Tween: Scale

This text tween is similar to the one above but involves scaling and transparency of text objects. Begin by creating a new document and saving it with a name like "texttween2.fla". Add a text string with 4-5 letters to the Stage with a color appropriate so it may be clearly seen.

With the text string selected, hit Control-B to break the text string apart and Control-Shift-D to distribute the letters to their own separate layers and Control-B again to convert the text to bitmaps.

Delete Layer 1 because it is empty and we don't need it. Select all layers in frame 1. Right-click and select "Create Motion Tween". Be sure the "Scale" check box is checked in the Properties panel. Duplicate these keyframes to frame 10 by clicking and dragging them with the Alt key.

Zoom out to a viewing scale of about 25%. Select all layers in frame 1 again and select the Free Transform Tool from the Tools palette. Click and drag corners of the letter objects and make them large enough to fill the Stage area. Align these letter objects to the center of the Stage by selecting "Horizontal Centers" from the Modify>>Align submenu. Now your Timeline and Stage should look similar to this:

With all layers in frame 1 still selected, click the objects on the Stage once and the Color property popup menu should appear in the Properties panel. Select "Alpha" from this popup menu and set the alpha channel percent to 0%. Your text should disappear (at least in frame 1).

Select Layer "c" and click and drag the selected frames to the right for about eight frames in a similar manner to the procedure for the Text Tween example above. Do the same for the three remaining layers, "a", "l", and "e". Then complete the procedure by duplicating the first and last keyframes so the letters do not appear like they just pop and out.

Play your animation. It should resemble this:

Download the file for this animation: texttween2-3.fla

Save your file. That completes Lesson 2.