Adobe Flash CS4 Professional for Windows and Macintosh: Visual QuickStart Guide

Rotating and Spinning Graphics

Animation with Classic Tweening

259

Figure 9.22 To prepare a rotational

classic tween, in the keyframe that ends

the sequence, rotate the item to its

ending position.

Rotating and Spinning

Graphics

In classic tweening, you can make a symbol

spin by changing its Rotation property. When

you create a classic tween for rotation, you

must not only create beginning and ending

keyframes (as you did for animating changes

to position and size), you must also specify

the direction of rotation, and the number of

times to spin.

To rotate a symbol less than

360 degrees:

1.

In a new Flash document or on a new

layer, in keyframe 1, place a symbol

instance on the Stage.

You can create a new symbol or use an

existing one; use a graphic that looks

di erent at various stages of its rotation—

for example, a triangle or an arrow. (To

review symbol creation, see Chapter 7.)

2.

In the Timeline, select frame 5, and

choose Insert > Timeline > Keyframe.

Flash duplicates the symbol from key-

frame 1 in the new keyframe.

3.

On the Stage, in keyframe 5, rotate the

symbol instance 90 degrees clockwise

(Figure 9.22).

(For detailed instructions on rotating ele-

ments, see Chapter 4.)

continues on next page

Rotating and Spinning Graphics

Chapter 9

260

Figure 9.23 The Rotate menu in the

Tweening section of the Frame Property

inspector lets you tell Flash the direction

in which to rotate a symbol in a classic tween.

Figure 9.24 To create a classic tween that involves

rotation, you can specify the direction of the rotation

as clockwise or counterclockwise. You can also

choose Auto to 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).

4.

In the Timeline, select any of the frames in

the  rst keyframe span (frame 1, 2, 3, or 4).

5.

Choose Insert > Classic Tween.

6.

With the frame you selected in step 4

still selected, access the Frame Property

inspector’s Tweening section.

7.

From the Rotate menu, choose one of the

following options (Figure 9.23):

▲

 e Auto option rotates the graphic in

the direction that requires the smallest

movement (Figure 9.24).

▲

CW rotates the graphic clockwise.

▲

CCW rotates the graphic counter-

clockwise.

8.

To rotate less then 360 degrees, click the

Rotation Count hot text (to the right of the

Rotate menu), enter 0, and press Enter.

Flash tweens the symbol so that it rotates

around its transformation point. Each in-

between frame shows the symbol rotated

a little more.

Frame 5

Frame 1

Frame 4

Frame 3

Frame 2

Frame 4

Frame 5

Frame 1

Frame 3

Frame 2

Rotating and Spinning Graphics

Animation with Classic Tweening

261

Figure 9.25 In the Frame Property

inspector, you can set the number of

times a classically tweened item

should spin.

Figure 9.26 Compare a single rotation

(top) with a double rotation (bottom) in

the same number of frames.

To spin a symbol 360 degrees:

1.

Follow steps 1 and 2 of the preceding

task to create a  ve-frame sequence

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  rst keyframe span (frame 1, 2, 3, or 4).

3.

Choose Insert > Classic Tween and access

the Frame Property inspector.

4.

In the Tweening section, from the Rotate

menu, choose a direction of rotation.

5.

Select the Rotate Count hot text, to the

right of the Rotate menu, and enter the

number of rotations you want to use

(Figure 9.25).

 e value you enter determines how

Flash tweens the symbol. Flash creates

new positions for the symbol to rotate it

completely the given number of times in

the span of frames. Flash tweens the sym-

bol di erently depending on the number

of rotations you choose (Figure 9.26).

Enter the

number of

rotations