Rotating and Spinning Graphics

I l @ ve RuBoard

You cannot create tweens of rotating and spinning graphics quite as simply as you create the types of tweens presented in the preceding exercises, because you can't describe rotation accurately with just two keyframes.

Imagine, for example, trying to rotate the pointer of a compass 180 degrees so that it turns from pointing north to pointing south. The initial keyframe contains the pointer pointing up; the ending keyframe contains the pointer pointing down. But how should the pointer move to reach that position?

Flash gives you three choices: rotate the pointer clockwise, rotate it counterclockwise, or simply flip it upside down. Trying to describe the pointer spinning all the way around the compass in just two keyframes would be even less informative, because the beginning and ending keyframes would be identical.

To clarify the motion, you could create a series of keyframes, rotating the pointer a few degrees in each one. That method is tedious , however, and adds to the file size of the final exported movie. Fortunately, Flash's Frame Property Inspector lets you provide extra information about tweens so that Flash can create rotational tweens with just two keyframes.

To rotate a graphic less than 360 degrees:

1. Create a new Flash document.

2. On the Stage, in Frame 1, create a new graphic (or place a symbol instance).

   Be sure to use something that will look different at various stages of its rotation.

3. If you've created a new graphic, select it and then choose Modify > Group or Insert > Convert to Symbol.

   Flash can create motion tweens only from grouped items or from symbols.

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

   Flash duplicates the symbol from Frame 1 in the new keyframe.

5. On the Stage, in Frame 5, rotate your graphic 90 degrees clockwise (Figure 9.16).

   Figure 9.16. To prepare a rotational tween, rotate the item to be tweened.

   

   (For detailed instructions on rotating objects, see Chapter 3.)

6. In the Timeline, select any of the frames in the first keyframe span (1, 2, 3, or 4).

7. From the Frame Property Inspector's Tween pop-up menu, choose Motion.

   The parameters for motion tweening appear in the panel.

8. From the Rotate menu (Figure 9.17), choose one of the following options:

   Figure 9.17. The Rotate menu in the Frame Property Inspector lets you tell Flash the direction in which to rotate a tweened object.

   

   • To rotate the graphic in the direction that requires the smallest movement, choose Auto (Figure 9.18).

     Figure 9.18. To create a tween that involves rotation, you can specify the direction of the rotation as clockwise or counterclockwise. You can also let Flash pick the direction that involves the smallest change, which allows Flash to create the smoothest motion. Compare the degree of change in each frame between rotating an arrow clockwise from 12 o'clock to 3 o'clock (top) versus rotating the arrow counterclockwise to reach the same position (bottom).

     

   • To rotate the graphic clockwise, choose CW.

   • To rotate the graphic counterclockwise, choose CCW.

     Flash tweens the graphic so that it rotates around its center point. Each in-between frame shows the graphic rotated a little more.

To spin a graphic 360 degrees:

1. Follow steps 1 through 4 of the preceding exercise to create a five-frame movie with identical keyframes in Frame 1 and Frame 5.

   You don't need to reposition your graphic, because the beginning frame and ending frame of a 360-degree spin should look exactly the same.

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

3. From the Frame Property Inspector's Tween pop-up menu, choose Motion.

   The parameters for motion tweening appear in the panel.

4. From the Rotate menu, choose a direction of rotation.

5. In the Rotate field, to the right of the Rotate menu, enter the number of rotations that you want to use (Figure 9.19).

   Figure 9.19. In the Frame Property Inspector, you can set the number of times a tweened item should spin.

   

   The value that you enter in the Rotate field determines how Flash tweens the graphic. Flash creates new positions for the graphic to rotate it completely in the given number of in-between frames. Flash tweens the graphic differently depending on the number of rotations you choose (Figure 9.20).

   Figure 9.20. Compare a single rotation (top) with a double rotation (bottom) in the same number of frames.

   

   Flash tweens the item so that it spins the number of times you indicated over the span of frames that you defined as the motion tween.

I l @ ve RuBoard