Morphing Simple Lines and Fills

I l @ ve RuBoard

In the bouncing-ball example, you worked with a fill shape but merely changed its location. The true work of a shape tween is to transform one shape into another. Flash can transform both fill shapes and lines. In this section, you try some truly shape-changing exercises with both types of shapes.

To transform an oval into a rectangle:

1. Create a new Flash document.

2. On the Stage, in Frame 1, draw an outline oval (Figure 10.5).

   Figure 10.5. Draw an oval in the first keyframe of your shape tween.

   

3. In the Timeline, select Frame 5, and choose Insert > Blank Keyframe.

   Flash creates a keyframe but removes all content from the Stage.

4. On the Stage, in Frame 5, draw an outline rectangle (Figure 10.6).

   Figure 10.6. Draw a rectangle in the second keyframe of your shape tween.

   

   Don't worry about placing the rectangle in exactly the same location on the Stage as the oval; you'll adjust the position later. In the Timeline, select any of the frames in the Keyframe span (1, 2, 3, or 4).

5. From the Frame Property Inspector's Tween pop-up menu, choose Shape.

   Flash transforms the oval into the rectangle in three equal stepsone for each in-between frame (Figure 10.7).

   Figure 10.7. When you define frames 1 through 4 as shape tweens, Flash creates the three intermediate shapes that transform the oval into a square. Turn on onion skinning to see the shapes for the in-between frames.

   

6. To align the oval and rectangle, in the Timeline status bar, click the Onion Skin or Onion Skin Outlines but on.

   Flash displays all the in-between frames.

7. In the Timeline, position the playhead in Frame 1.

8. On the Stage, select and reposition the oval so that it aligns with the rectangle (Figure 10.8).

   Figure 10.8. Use onion skinning to help position your keyframe shapes. Here, with Frame 1 selected, you can drag the oval to center it within the rectangle. That makes the oval grow into a rectangle without moving anywhere else on the Stage.

   

   The oval transforms into a rectangle, remaining in one spot on the Stage.

To transform a rectangle into a freeform shape:

1. Create a new Flash document.

2. On the Stage, in Frame 1, draw a rectangular fill.

3. In the Timeline, select Frame 5, and choose Insert > Blank Keyframe.

4. On the Stage, in Frame 5, use the brush tool to paint a free-form fill.

   Don't make the fill too complexjust a blob or brush stroke with gentle curves.

5. In the Timeline, select any of the frames in the Keyframe span (1, 2, 3, or 4).

6. From the Frame Property Inspector's Tween pop-up menu, choose Shape.

   Flash transforms the rectangle into the fill in three equal stepsone for each in-between frame (Figure 10.9).

   Figure 10.9. Flash transforms a rectangle into a free-form brush stroke with shape tweening.

   

I l @ ve RuBoard