Sams Teach Yourself Macromedia Flash 8 in 24 Hours

Shape tweens are fun because they look really cool and they're easy to create. Compared to motion tweens, they look more dynamic because every attribute including the shape animates. Basically, all you do is draw one or more shapes or Drawing Objects in two keyframes and set the tweening in the first keyframe to Shape. Let's create one in the following task, and then we can analyze it.

Try It Yourself: Make a Simple Shape Tween

In this task you'll make a simple animation using shape tweening:

Following the Rules of a Shape Tween

Flash is unforgiving when you don't follow its rules. Luckily, the rules for a shape tween are very simple: no groups and no symbols. That's it! Remember these two things, and shape tweens will be easy.

Techniques and Tips

Just because the rules for a shape tween are simple doesn't mean that creating a good-looking shape tween is easy. There are several techniques to make the process easier and the results better.

Keep It Simple

If you ignore all other tips, keeping it simple is one you really should heed. There are very few rules for a shape tween as long as you don't group anything or use symbols, it will work. However, when you have a million different shapes tweening to a million other shapes, the results will look random. The two symptoms that you aren't keeping it simple are unexpected results and the "checkerboard" effect you're about to see.

For example, consider these unexpected results. You imagined your name morphing gradually into a circle shape, but despite breaking apart the text, you got a garbled mess. Or you got the checkerboard effect in the tweened areas (as in Figure 9.2). These are signs that you're likely creating something too complicated for Flash. Actually, Flash is interpolating the in-between frames very accurately, but it can be very difficult to go from one extreme such as your name to something as simple as a circle. Flash will get you from here to there, but the trip might look pretty messy.

The solution is to keep it simple. Do just one thing at a time. For example, try to tween just one letter of your name into a circle. In Hour 11, "Using Layers in Animations," you'll see that it's easy to do several tweens simultaneously (in separate layers). You'll also see later this hour that you can help Flash by using a feature called Shape Hints. However, the simpler the animation is, the better. You'll find that a simple animation will be easier to create and more like what you expect, and it will also probably result in a more effective movie if not also a smaller file.

Don't Mix Lines and Fills

It's best to avoid tweening between shapes that don't have the same combination of fills and lines because the results are unpredictable. Tweening a straight line into a bent line usually works fine. But if you try to tween from a line to a filled shape, you might get unpredictable results. As an analogy, consider bending a wire. You could also start with clay and reshape it. But if you had to turn a wire into the shape of clay, it would be difficult or impossible. This analogy is similar to Flash tweening lines and fills. Flash can tween lines; Flash can tween fills; it can even tween a fill with a line. Flash has difficulty, however, when one keyframe has a line and the other has a fill or when one keyframe has both line and fill and the other only has one. Flash does what it can to interpolate the in-between frames when you mix them, but eventually something has to give; Flash can't perform miracles.

To avoid these problems, convert the lines to fills by using Modify, Shape, Convert Lines to Fills. Better yet, keep things simple by drawing in both keyframes of a tween just lines, just fills, or both.

Stay Out of Flash's Territory

When Flash is tweening a span of frames, it colors the tweened frames in the Timeline either blue (for motion tweening) or green (for shape tweening). These interpolated frames are what I call Flash's territory (see Figure 9.3). Generally, you should stay out of this area. For one thing, you can only draw into keyframes, so you can't draw into this territory. Also, in shape tweens, you can't even select objects when the red current-frame marker is in this territory. (However, you saw in Hour 8, "Using Motion Tweens to Animate," that with motion tweens you can actually grab and move symbols in interpolated frames, which adds keyframes.)

You can't do any harm to interpolated frames of shape tweens, but trying to edit them can be very frustrating. You can't draw into them, and you can't select objects. The best way to think of these frames is that they are Flash's territory not yours. You are responsible for the keyframes, and Flash is responsible for the tweening.

Know When a Motion Tween Will Suffice

It's easy to fall in love with the shape tween. There's nothing like it. Feel free to use it when necessary. However, because shape tweens are inherently less efficient and harder to produce than motion tweens (the file sizes are larger and play more slowly), you should always choose motion tweening when you can. If you can get the same effect with either, you should always opt for motion tweening.

Let's say you have a shape you want to tween from a blue circle to a red square. Only a shape tween will suffice because the actual shape is changing. However, if you just want to tween a blue circle into a red circle, you're much better off doing it as a motion tween. Draw a circle, convert it to a symbol, insert a keyframe later in the Timeline, use the Properties panel to set Color Effect to tint the circle instance in the second keyframe, and set Tween to Motion when you select the first keyframe. To do the same animation as a shape tween, you would draw a circle (don't convert it to a symbol), insert a keyframe later in the Timeline, fill the circle in the second keyframe with a new color (perhaps using the Bucket tool), and set shape tweening in the first keyframe. The result of each operation is the same, but the motion tween method is better because it gives you only one master version of the circle and therefore a smaller file size.

Sometimes it's obvious which type of tween is more appropriate. If something's just moving or changing color, a motion tween is appropriate, whereas significant changes to a shape require the shape tween. Sometimes, however, it's not so obvious. For example, you can drastically change a symbol's shape by using the Free Transform tool's Rotate, Scale, and (especially) Skew options. Plus, tweening the properties of a Filter (using Motion Tween) can have a huge impact. Figure 9.4 shows how drastically different the beginning and end of a Motion Tween can be.

Although you should definitely lean toward motion tweening when you can, don't forget the keyframe techniques you learned in Hour 7, "Animation the Old-Fashioned Way." A few strategically designed keyframes can often be more effective than a drawn-out tween (of either type). You'll learn even more ways to trick the user in Hour 22, "Advanced Animation Techniques." It's what the user thinks she sees that matters not what she actually sees.