Tweening

When a sprite contains two or more keyframes, Director automatically tweens them: That is, it compares the sprite's properties from one keyframe to the next, and it makes those changes happen incrementally over the intervening frames . For example, if a sprite is at the left side of the Stage in the first keyframe and is at the right side of the Stage in the next keyframe ( Figure 4.9 ), Director changes the sprite's location graduallymoving it bit by bit with each frame. The result is a simple form of animation ( Figure 4.10 ).

Figure 4.9. This sprite has two keyframesone at the beginning, one at the end. The sprite's position on the Stage is different in the two keyframes.

Figure 4.10. Director tweens the sprite by changing its position incrementally between the two keyframes.

By default, Director will tween the following sprite properties:

• Location

• Size

• Rotation angle

• Skew angle

• Foreground and background colors

• Blend percentage

Tip

• If you want any of these properties not to be tweened, choose Modify > Sprite > Tweening and deselect the properties that you want Director to leave alone ( Figure 4.11 ).

  Figure 4.11. In the Sprite Tweening dialog box, you can select the properties that you want Director to tween. The settings may be different depending on which sprite is selected.

  

Flash Talk: Tweening

Director's tweening is virtually identical to motion tweening in Flash. (Director has no equivalent to Flash's shape tweening .) The main difference is that tweening in Director is automatic, while tweening in Flash must be set up manually.

Unlike Flash, in which only symbols can be motion-tweened, Director allows you to tween any visual cast member.

To tween a sprite:

1. Make sure that the sprite you want to tween has at least two keyframes.

2. In the Score, select the sprite's first keyframe ( Figure 4.12 ).

   Figure 4.12. To tween a sprite, first select the initial keyframe.

   

3. Change any of the sprite's tweenable properties to the way you want them to be at the beginning of the tween ( Figure 4.13 ).

   Figure 4.13. Set the sprite's properties (its location, rotation, size, and so on) the way you want them to look at the beginning of the tween.

   

   Some properties can be changed directly on the Stage. For example, you can drag the sprite to change its location, or you can rotate it, skew it, or resize it using the techniques described in Chapter 3, "Building a Score." In addition, all tweenable properties can be changed by using the Sprite toolbar in the Score or the Sprite tab in the Property Inspector.

4. Click to select the next keyframe within the sprite ( Figure 4.14 ).

   Figure 4.14. Select the next keyframe.

   

5. Change any of the sprite's tweenable properties to the way you want them to be at the end of the tween ( Figure 4.15 ).

   Figure 4.15. Set the sprite's properties the way you want them to look at the end of the tween.

   

   Director automatically regenerates all frames between this keyframe and the preceding one.

6. Repeat steps 4 and 5 for each additional keyframe.

7. Rewind and play back the movie to see how the animation looks.

8. Refine the tweening, if necessary.

Tips

• Director tweens automatically. If you want to turn tweening off, choose Edit > Preferences > Sprite (Windows) or Director > Preferences > Sprite (Mac) and deselect the Tweening option.

• To make a sprite appear to "fade in," tween its blend property from 0 (in the first keyframe) to 100 (in the next keyframe). To make it appear to fade out, do the opposite ( Figure 4.16 ).

  Figure 4.16. This sprite's blend property has been tweened from 100 to 0.

  

• To make a sprite appear to rotate in three-dimensional space, tween its skew property from 0 (in the first keyframe) to 180 (in the next keyframe).

• If you want to tween the size of a sprite, you'll be best off with sprites based on Flash or vector-shape cast members. Sprites based on bitmapped cast members may exhibit jaggedness or blockiness.

To create a keyframe and change a sprite property at the same time:

1. Select a single frame within a sprite by Alt+clicking (Windows) or Option-clicking (Mac) the frame ( Figure 4.17 ).

   Figure 4.17. Select a single frame within a sprite.

   

   or

   Select a sprite, choose Edit > Edit Sprite Frames, and click one of the frames. (See "To make sprite frames individually editable" in Chapter 3.)

2. Change one or more of the sprite's tweenable properties.

   Director creates a keyframe in the selected frame ( Figure 4.18 ) and then changes the sprite's properties in that keyframe.

   Figure 4.18. As soon as you change the properties of the sprite on the Stage, Director creates a keyframe in the Score.