The more complex the shape you tween, the more difficult it is for Flash to create the expected result. You can help Flash tween better by using
shape hints
markers that let you identify points on the original shape's outline that
correspond
to points on the final shape's outline.
|
1.
|
In a new Flash document, or on a new layer, in frame 1, draw an oval with no stroke on the Stage.
|
|
2.
|
In the Timeline, select frame 5, and choose Insert > Timeline > Keyframe.
Flash duplicates the contents of keyframe 1 in keyframe 5.
|
|
3.
|
In the Timeline, select any of the
frames
in the keyframe span (1, 2, 3, or 4).
|
|
4.
|
In the Frame Properties tab of the Property inspector, from the Tween pop-up menu, choose Shape.
|
|
5.
|
In the Timeline, position the playhead in frame 5.
|
|
6.
|
Using the selection tool or the pen and subselection tools, drag four corner points in toward the center of the oval to create a flower shape.
(For more detailed instructions on editing
shapes
, see Chapter 4.)
|
|
7.
|
Play the movie to see the shape tween.
Flash handles the tweening for this change well (
Figure 10.12
). It's
fairly
obvious which points of the oval should move in to create the petal shapes. If you modify the shape further, however, it becomes more difficult for Flash to know how to create the new shape. That's when you need to use shape hints.
|
|
1.
|
Using the animation you created in the
preceding
task, in the Timeline, select frame 10, and choose Insert > Timeline > Keyframe.
Flash duplicates the flower shape in a new keyframe.
|
|
2.
|
In keyframe 10, edit the flower to add a stem.
Reshape the outline with the selection tool or the pen and subselection tools, or add a stem with a brush stroke in the same
color
as the flower.
|
|
3.
|
Define a shape tween for frames 59.
|
|
4.
|
Play the movie.
The addition of the stem to the flower makes it difficult for Flash to create a smooth tween that looks right (
Figure 10.13
).
|
|
5.
|
To begin adding shape hints, position the playhead in keyframe 5 (the initial keyframe of this tweening sequence).
|
|
6.
|
Choose Modify > Shape > Add Shape Hint, or press Shift-
-H (Mac) or Ctrl-Shift-H (Windows) (
Figure 10.14
).
Flash places a shape hinta small red circle labeled with a letter, starting with
a
in the center of the object in the current frame. You need to reposition the shape hint to place it on a problem point on the shape's outline.
|
|
7.
|
With the selection tool, drag the shape hint to a problem point on the edge of the shape.
Don't worry about getting the shape hint in exactly the right spot; you can fine-tune it later.
|
|
8.
|
Repeat steps 6 and 7 until you have placed shape hints on all the problem points of your shape in keyframe 5 (
Figure 10.15
).
Each time you add a shape hint, you get another small red circle labeled with a letter. You can't place the hints at random; you must place them so they go in alphabetical order around the edge of the shape. (Flash does the best job when you place shape hints in counterclockwise order, but you can also place them in clockwise order.)
|
|
9.
|
In the Timeline, position the playhead in keyframe 10.
Flash has already added shape hints to this frame; they all stack up in the center of the shape.
|
|
10.
|
With the selection tool, drag each shape hint to its position on the new shape.
Keep them in the same order (counterclockwise or clockwise) you chose in step 8 (
Figure 10.16
).
|
|
11.
|
To evaluate the improvement in tweening, play the movie.
|
|
12.
|
To fine-tune the shape hints'
positions
, select one of the tween's keyframes, and
turn
on Onion Skin mode.
Set the onion markers to include all the frames of the tween. Where the onion skins reveal rough spots in the tween, you may need to match the hint position better from the first keyframe to the last one (
Figure 10.17
). Repositioning the shape hints changes the in-between frames. You may need to adjust the shape hints in both keyframes. If you still can't get a smooth tween, try adding more shape hints.
|
Tips
