Transforming a Simple Shape into a Complex Shape


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 hintsmarkers that let you identify points on the original shape's outline that correspond to points on the final shape's outline.

To shape-tween a more complex shape

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.

Figure 10.12. Flash handles the tween from an oval to a simple flower shape without requiring shape hints.


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).

Figure 10.13. The addition of a stem to the flower overloads Flash's capability to create a smooth shape tween. Frames 7 and 8 are particularly bad.


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).

Figure 10.14. Choose Modify > Shape > Add Shape Hint to activate markers that help Flash make connections between the original shape and the final shape of the tween.


Flash places a shape hinta small red circle labeled with a letter, starting with ain 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).

Figure 10.15. Start adding shape hints in the first keyframe of a tween sequence. Flash places the hints in the center of the tweened object (top). You must drag the hints into position (middle). Distribute the hints in alphabetical order around the outline of the object, placing them on crucial points of change (bottom). Here, the three points with hints a, b, and c define the points from which the stem of the flower will grow.


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).

Figure 10.16. To complete the placement of shape hints, select the second keyframe of your tween sequence. Flash stacks up hints corresponding to the ones you placed in the preceding keyframe (top). You must drag them into the correct final position (bottom).


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.

Figure 10.17. It can be difficult to match up points in the two keyframes exactly when you first place the shape hints. When you've positioned the hints in the beginning and ending keyframes of a sequence, turn on onion skinning to see where you need to adjust the placement of your hints. With the initial placement, Flash starts the stem growing with an indent at the bottom (top). Moving the points closer together improves the tween (middle). When the onion skins reveal a smooth tween, you're done (bottom).


Tips

  • To remove a single shape hint, make the initial keyframe the current frame. Select the shape hint you want to remove, and drag it off the Stage, onto the Pasteboard. Or, Control-click (Mac) or right-click (Windows) the shape hint, and choose Remove Hint.

  • To remove all the hints at the same time, with the initial keyframe current, choose Modify > Shape > Remove All Hints. Or -click (Mac) or Ctrl-click (Windows) any shape hint, and choose Remove All Hints.

  • Onion skins don't always update correctly when you reposition shape hints. Clicking a blank area of the Stage forces Flash to redraw the onion skins.

  • If you can't create a smooth tween using shape hints alone, break the tween into smaller pieces by adding keyframes where the morphing gets off track. Then redraw the shapes for those frames yourself.





Macromedia Flash 8 for Windows & Macintosh Visual QuickStart Guide
Macromedia Flash 8 for Windows & Macintosh
ISBN: 0321349636
EAN: 2147483647
Year: 2005
Pages: 204

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net