• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint


Tweening offers a quick way to animate a sprite. All you need to do is set up keyframes within a sprite; Director automatically generates all the in-between frames.

You can tween these sprite properties:

  • Path

  • Size

  • Rotation angle

  • Skew angle

  • Foreground and/or background color

  • Blend percentage

A keyframe—represented by a circle within a sprite span in the score—is a frame in which any tweenable property of a sprite can change. Tweening occurs between two keyframes that contain the before and after states of a sprite property. When you tween the path of a sprite, for example, the first keyframe holds the sprite's starting location on the stage, and the second keyframe shows the destination (Figure 4.4). Director generates all the frames between the keyframes to create an animation of the sprite gradually moving from one place to another (Figure 4.5). You can create as many keyframes within a sprite as it has frames in its span, with tweening occurring between each pair. You could create 10 or more keyframes within a sprite to define a complex path for it to follow.

Figure 4.4. The boats represent two keyframes with the sprite at opposite sides of the stage.

Figure 4.5. By tweening, Director creates the images between the keyframes to create animation. Here, the boat sails from right to left. (This figure shows 10 frames.)

To create a keyframe:

Select a sprite in the score.

Select a frame (Figure 4.6).

Figure 4.6. Click a frame to position a keyframe.

Choose Insert > Keyframe (Figure 4.7).

Figure 4.7. The selected frame becomes a keyframe.


Copy a keyframe by Alt+dragging (Option+dragging, on the Mac) it to a new frame.


The end frame of a sprite is not a keyframe, but you can place one there.

By changing the number of frames between keyframes, you can control how smooth tweening looks during playback.

To reposition keyframes in the score:

  • Drag the keyframe to another frame in the same channel to create more or fewer frames between the keyframes.


When you drag the start or end keyframe of a sprite to shorten or lengthen its span, all keyframes within the sprite move proportionately closer or farther apart (Figure 4.8).

Figure 4.8. When you extend a sprite, its keyframes move proportionately farther apart.


Hold down the Control key (Command, on the Mac) while dragging the start or end frame of a sprite to extend it without moving other keyframes.

No matter which sprite properties you tween, the process is basically the same.

To tween a sprite:

Turn on tweening by choosing File > Preferences > Sprite, and check the Tweening option in the dialog box that opens (Figure 4.9).

Figure 4.9. Choose Tweening in the Sprite Preferences dialog box.

In the score, create and position all the keyframes that you will need within a sprite.

Adjust the sprite's initial properties for the tween by clicking the first keyframe in the sprite (Figure 4.10) and editing any tweenable property, such as position, color, blend, and rotation.

Figure 4.10. Click the first keyframe in the sprite.

Change tweenable sprite properties by using the Property Inspector, by using the Sprite toolbar in the score, or by changing a property (such as size or position) directly on the stage (Figure 4.11).

Figure 4.11. Set the sprite's initial properties in the first keyframe.

Click to select the next keyframe within the sprite (Figure 4.12), and edit its properties to define the end state for the tween relative to the last keyframe (Figure 4.13).

Figure 4.12. Click the next keyframe within the sprite.

Figure 4.13. Change the sprite's properties to define the end state for the tween.

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

Repeat step 4 for each additional keyframe.

Click to select the entire sprite within the score.

Choose Modify > Sprite > Tweening to display the Sprite Tweening dialog box (Figure 4.14).

Figure 4.14. The Sprite Tweening dialog box.

Check to enable the sprite properties you want tweened between keyframes (Figure 4.15).

Figure 4.15. Enable the sprite properties you want tweened.

You can tween multiple sprite properties (such as size and path) at the same time by selecting multiple tweening options in this dialog box.

Click OK.

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

Refine the tweening, if necessary.


You can create the illusion of a sprite rotating in 3D by tweening its skew angle through 90 degrees or more.


Tween the blend property of a sprite from a high value to a low value to make a sprite appear to fade out, or vice versa to make it appear to fade in.


If you want to tween the size of a cast member, you will achieve the best results by using Flash or vector-shape cast members. Tweening the size of a bitmap cast member may result in noticeable distortion.

After you play back a tweened animation, you may find that you need to make some adjustments.

To refine tweening:

Select the sprite.

To improve animation or create a smoother path of animated movement, create additional keyframes, make more states of the sprite, and tween them again.

To re-tween, you don't need to do anything special. As long as the sprite property you are changing is enabled in the Sprite Tweening dialog box, just change the property in any keyframe, and Director handles re-tweening automatically.

For more gradual transitions, add frames between keyframes.

The more frames that separate your keyframes, the more gradual the transition in the tweened property is. If you're tweening motion across the stage, for example, using two keyframes separated by 100 frames produces fairly smooth motion. If only five frames separate the keyframes, the sprite appears to move suddenly and in a very jerky fashion.

There's a shortcut for changing a sprite property and creating a new keyframe in one step. This method comes in handy if you're setting up many keyframes and tweens within a sprite.

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

Enable single-frame selection (see Chapter 3, "Building a Score" ).

Make sure that the sprite property you are changing is set for tweening in the Sprite Tweening dialog box.

You open the Sprite Tweening dialog box by choosing Modify > Sprite Tweening.

Click a frame in the sprite (Figure 4.16).

Figure 4.16. Click a frame in the sprite.

Change one or more of the sprite's tweenable properties, such as position or size (Figure 4.17).

Figure 4.17. Change one or more sprite properties, such as position.

Director creates a keyframe in the selected frame (Figure 4.18) and changes the sprite according to your specifications.

Figure 4.18. Director creates a keyframe.


Alt+click (Option+click, on the Mac) to select a single frame in the sprite if single-frame selection is not enabled (Figure 4.19).

Figure 4.19. Alt+click or Option+click (Mac) to select a single frame in a sprite.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint