Animation and Effects with Macromedia Flash MX 1002004 [Electronic resources] نسخه متنی

Animating with Shape Hints

Now that you have created a few shape tweens, you will try creating a shape tween using shape hints. Shape hints help you create and control tweens that might be complex, or not morph correctly otherwise. If you need more control over how the shape tween animates, it might be necessary to add shape hints to help Flash predictably animate. You can shape tween fills (including gradients), strokes, and alpha.

Always try to keep the shape hints in the same order as their corresponding shape tweens. Also, you should always try to place shape hints in a clockwise or counterclockwise fashion and move sequentially around the shape. The hints should always start at the upper-left corner.

Small icons represent shape hints, and the icons contain a letter between A and Z; each of these icons has a corresponding start and end icon. For example, a yellow A icon on frame 1 would match its corresponding green A end icon on frame 5. The shape tween at this point remains at this particular point throughout the animation.

Exercise 5: Adding tweens with shape hints

Sometimes when you animate shape tweens in Flash, you notice that the animation folds awkwardly into itself, rotates, flips, or otherwise looks awful. Flash has a feature called "shape hints" that can help you control how a shape tween displays on the Stage. You can specify where a part of the animation starts, and where it finishes between two keyframes. So, if the animation rotates across the Stage, you can instead specify for it to tween directly between two points (instead of making the rotation).

You need to place shape hints on a corner or edge of the shape you're tweening. If you do not do this, the shape hint remains red and Flash ignores it.

In the interface animation, there is a rectangle that animates around the border of the website. If this shape was tweened without shape hints, it might rotate in a circle before resembling its finished shape. This isn't what anyone would find useful. Therefore, if this happens, you can use shape hints to control how it animates.

1. Select the star layer and click the Insert Layer button. Rename the new layer border.

2. Select frame 1 of the border layer, and select the Rectangle tool from the Tools panel. In the Tools panel, click the paint bucket icon next to the fill color control and click the No Color button beneath the color controls (white box with a red line through it). Click the stroke color control and select a white swatch (#FFFFFF).

3. Create, position, and set the dimensions for the rectangle. Click and drag on the Stage to draw a medium rectangle. Draw the rectangle approximately around the border of the Stage, as shown in the following figure.

4. Exercise 1 for the correct buttons to click.

5. Using the Selection tool, double-click the rectangle's stroke to select all four sides. Press F8 to convert the shape into a movie clip. Give the symbol a name of border, and set the symbol behavior to Movie Clip.

Double-click the movie clip to enter symbol-editing mode.

6. Select frame 10 on the border Timeline and press F7 to insert a blank keyframe.

7. Select the Rectangle Tool, and then click the Round Rectangle Radius button in the Options section of the Tools panel to launch the Rectangle Settings dialog box. Set the corner radius to 5 points and click OK to apply the settings and close the dialog box.

Click and drag on the Stage to draw a rectangle that's approximately the same size as the one you created in frame 1.

8. Double-click the rectangle that you just created on frame 10 to select it. In the Property inspector, set the width, height, and coordinates to match the rectangle you drew in step 3. You might have to select the rectangle on frame 1 and write down its dimensions and coordinate location. Make sure that the dimensions and the X and Y coordinates are the same on frame 1 and frame 10.

9. Select frame 1 in the Timeline and change the Tween drop-down menu to Shape. Drag the playhead across the frames to scrub the Timeline. The rectangle might rotate counterclockwise into an oval-like shape. This would not work well with the interface, so shape hints are useful. Even if it doesn't rotate (results differ depending on your rectangles), follow steps 10 through 12 to add shape hints so you can learn the process.

10. Select frame 1. of the border layer, and make sure that Snap to Objects is selected in the Tools panel Add a shape hint by selecting Modify > Shape > Add Shape Hint from the main menu. Drag the shape hint that looks like an "a" inside a small red icon, and place it at the middle of the left edge of the rectangle.

To remove a shape hint, right-click (Windows) or Control-click (Macintosh) and choose Remove Hint.

11. Select frame 10 on the Timeline and align the shape hint in the same position as you did on frame 1 (in step 10). The icon changes to green, and when you return to frame 1, the first shape hint turns yellow.

If you want to hide the shape hints from view and still have them active, you can toggle their visibility by selecting View > Show Shape Hints (Ctrl+Alt+H) from the main menu.

12. Repeat steps 10 and 11 two more times, placing shape hints along the top side of the rectangle and then the right side. Remember that you not only need to add shape hints to frame 1, but you also need to align the corresponding shape hints on frame 10.

13. Scrub the Timeline again. Now you should see that the edges remain in place and the rectangle morphs into the rounded rectangle a bit more realistically.

14. If you were to play this animation, it would loop endlessly on the Stage. Select the topmost layer and click the Insert Layer button on the Timeline. Rename the new layer actions. Select frame 10 of the new layer, and press F6 to insert a keyframe. Open the Actions panel (Window > Development Panels > Actions) and type the following code into the Script pane:

stop();

Save your changes before moving on to the next exercise. Try this process with other shapes in a new test FLA file, particularly if your rectangle didn't rotate.