Recipe 4.5. Animating Rotation

Problem

You want an element to rotate during a motion tween.

Solution

Either apply rotation to the tween or use the Free Transform tool to rotate the instance(s) manually.

Discussion

Flash offers two different ways of rotating elements in a motion tween: you can use the Rotation attribute of a tween to apply rotation as a part of the tween, or you can use the Free Transform tool to rotate one or both instances at the beginning and end of the tween.

To set a motion tween's Rotation setting, select the keyframe in which the tween begins, and use the Property inspector to specify the type/direction of rotation and the number of revolutions. When adding rotation using the Rotation setting of a tween, you can enter only integers. That is, Flash forces you to specify rotation in complete 360° increments. You can specify None to prevent rotation; Auto to rotate in the direction requiring the least motion; CW to force Flash to rotate the instance clockwise; or CCW to force Flash to rotate the instance counterclockwise. This approach to rotating elements is ideal for spinning animations, such as the spinning of a basketball through the air.

When adding rotation using the Free Transform tool, which is discussed in Recipe 1.32, you can rotate only between 1° and 359°. That is, if you spin an element five times with the Free Transform tool, and leave it facing in the same direction it was originally facing, Flash won't even register that it has been rotated. Therefore, use the Rotation setting of a tween to rotate multiple revolutions, and use the Free Transform tool to rotate partial revolutions.

You can also combine the two approaches to create multiple revolutions with different starting and ending positions. When combining the two approaches, Flash adds them together. That is, if you rotate an instance 45° clockwise with the Free Transform tool, and you apply a Rotation setting of 2 clockwise, the instance will rotate 765° (720° + 45°). If you rotate an instance 315° counterclockwise and apply a Rotation setting of 2 clockwise, it will still rotate 765°, because 315° counterclockwise is the same as 45° clockwise.

When you want a rotation animation to loop, make sure that the last frame of the tween doesn't have the same rotation as the first frame. If it does, it will appear to hesitate for an instant during each rotation. The solution is to make the rotation of the last frame slightly less than the rotation of the starting frame.

See Also

Recipe 1.32, Recipe 3.2