Creating a Shape Tween

Shape tweens allow you to change the shape of an editable vector graphic over time. You can change the length of lines, bend lines, or alter a vector drawing to create some very interesting effects, including changes of color. Instead of having to manually create each change in the appearance of the shape, Flash does the calculations to create the animation for you: All you have to do is set the beginning, the key points where the shape will change, and the endjust as you did with motion tweening. You can have one or several shapes tween on a single layer, although if you have many shapes in the same keyframes, they might affect one another in unpredictable ways. But be warned: The more complex a shape tween is, the more CPU will be eaten up on the end user's computer, which isn't a very nice thing to put your end users through.

Note

Shape tweens can only be applied to raw vector graphics (they show the crosshatch pattern when they are selected). You cannot shape tween bitmaps unless they have first been converted to vector graphics. Changing the shape of one bitmap image to another bitmap image requires different software.

Shape tweening can often produce very unexpected results because your control over how the tween executes is somewhat limited. The path that a particular part of a shape takes between the beginning and the end of the tween might go all over the place. To assist you in controlling how the shape changes, Flash 8 has included shape hints, which allow you to specify corresponding points across keyframes on tweened shapes (meaning that a particular point on the beginning shape should go directly to a second specified place on the ending shape during the shape tween). Each shape hint has a specific letter. Therefore, wherever shape hint "a" is placed at the beginning of the tween, that point moves to the location of shape hint "a" at the end of the tween.

For example, you might have a cat shape that tweens into a dog shape. If you had a triangle representing the cat's ear with a shape hint "a" at the cat's ear tip, and its corresponding shape hint at the dog's ear tip, the cat's ear should directly tween to the dog's ear instead of taking a more indirect route in the tween between the two locations. The more shape hints you have, however, the worse playback becomes, so they should be used very sparingly. They are added from Modify > Shape > Add Shape Hint when shape tweening has been turned on.

Tip

To make your shape hints behave properly, use at least four, and distribute them clockwise (a,b,c,d) instead of placing each lettered shape hint out of order.

Leaving behind shape hints, there are two blend options when performing a shape tween: Distributive and Angular. Distributed blending generates a smoother transition that tends to look a bit irregular, whereas Angular blending preserves corners and lines when tweening. Angular is available only when you're working with shapes that have straight lines and sharp corners.

In this exercise, you'll be working on building a subtle page-turning effect in the book's logo in the top-left corner of the bookstore website. You're still working with the bookstore9.fla file.

1.	Find mcPageTurn inside the mcLogo movie clip on the Stage. Double-click mcPageTurn to open the movie clip for editing and zoom in to at least 800%. You created a movie clip in Lesson 4 that was a single line that was created for a page turn animation. The animation for the page turn is in two parts. The first part of the animation is to create a shape tween, which you will create in this exercise.
2.	Rename Layer 1 to animation. Add a keyframe at Frame 10 and then modify the contents of the new keyframe. After you have renamed the layer to animation and added a keyframe, you can modify the contents of Frame 10. Remember, Frame 10 contains a simple line drawing. Switch to the Selection tool and then click once on the background to ensure that the line is not selected. Mouse toward the line until you see the cursor change to show a curved line at its lower right, which is shown in the following figure: Click and drag the line so it bends. Bend the line until it resembles the following figure. Mouse over the upper end of the line until a cursor appears that has a corner point that's next to the arrow. Click and drag the end of the line slightly to the right until it resembles the following figure.
3.	Insert a shape tween using the Property inspector, and then check out the animation. Select Frame 1 and expand the Property inspector. Select Shape from the Tween drop-down list. A green arrow spans across the animation layer, which means that a shape tween has been added to those frames. Click and drag the playhead across the span of frames and view the animation that has been added to the logo. The lower point of the line should remain in the same place, which is the spine of the book. The page turn animation will be completed in the following exercise.
4.	When you finish creating the shape tween, save the changes that you made to the document by choosing File > Save from the main menu. In the next exercise, you will add a frame-by-frame animation directly following the shape tween to complete the page turn animation.