In our last workshop we showed you how Flash animates with motion tweens, whizzing your objects about with minimal effort from you. Now we'll teach you about shape tween, which is ten times more impressive and may have you tweening well into the night-- just because you can.

We'll take some plain old squares and have them magically turn into a name. 

First off, what to tween.

Tween Theory

Tween theory may sound dull, but understanding how a shape tween works is half the battle. I plowed into shape tweens without reading 'tween the lines (sorry), and I struggled with several projects before I sat down and just read the instructions.

First know this. You can only "shape tween" shapes. It sounds obvious, but trying to tween a group, symbol, or editable text, will only disappoint you. Fortunately, you can turn any of these objects into a shape by choosing Modify, Break Apart. Make sure you break apart your objects before you try to tween them.

Secondly, Flash may be smart, but it's not perfect. Not all shapes will tween as you intend. In fact, some tweens are so bizarre, you may feel that Flash has its own plans for your movie. Rest assured, you keep the upper hand and with a few shape hints, and a glimpse through onion skin, your tweens will look just as you wished.

Next we'll start tweening shapes.

Tween Your Shapes

Select the first frame of Layer 1 and insert a keyframe. Use the rectangle tool to draw a filled square. Select frame 15 and use the type tool to make the letter M. For this example, it might help you to make the M about the same size as the square. You can choose any colors you want. The shape tween will morph your colors as well.

With the M selected, choose Modify, Break Apart. Now delete the square from the last frame, but make sure it's still available in the first. Double click in any frame between the first and last. Choose the Tweening tab and select Shape. Choose a Blend Type. Generally, distributive will give smoother results, while you should use angular for shapes with corners and straight lines. You can play with the easing feature to modify the speed of the shapes in and out points. Click OK.

Now select the first frame and press Enter to play your movie.

The letter M can work surprisingly well, but try the same steps with the letter A, and you'll notice some funky morphing going on. Flash doesn't know what to do with the hole in the middle of the A. Instead of smoothly transforming the square into the first letter of the alphabet, it appears as though the square is turning itself inside out. Ew. Fortunately, you can control all this with shape hints (see screenshot).

Select the first frame of the tween. The square should be selected. Choose Modify, Transform, Add Shape Hint. A small, red circle with the letter "a" will appear in the center. Drag the circle to the bottom right corner of the square. Now select the last frame and the A will be selected also with a red circle a. Drag this hint to the lower right of the A. Continue this process with as many hints as you wish matching each letter hint on each shape. They should follow sequentially. If you find it difficult to get the shape hint in the exact place you want, try zooming in on the image with the magnifying glass.

Tween without shape hints

Tween with shape hints

Now try playing the movie again. Your A should tween more sensibly. Good enough? It gets better. You can fine tune it even more.

Fine Tune With Onion Skin

The onion skin feature in Flash lets you see all frames of the tweening process in either outline form, or as faded layers. The selected frame will appear in full color with the frames around it fading the further away they are.

At the bottom of the timeline, you will see five buttons (see screenshot). Let your mouse hover over each button for its description:

• Center Frame-- This button shifts the Timeline so that the current frame is centered and visible.
• Onion Skin-- This feature shows several frames at once in a solid, yet see-through manner.
• Onion Skin Outlines-- Same as Onion Skin, but frames are displayed in outline form.
• Edit Multiple Frames-- This button makes every frame between the Onion Skin markers editable.
• Modify Onion Markers-- Click this button for a pop-up window to control the onion skinning behavior.