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

Creating Keyframes

Now you'll place the earth image in the score and set the keyframes for the earth's movement around the sun.

Drag the earth from the Cast window to channel 2, frame 1, of the score.

You know by now that a keyframe is a key position in an animation where a change takes place. You're going to animate the earth in this task by moving it around the stage, creating keyframes, and allowing Director to automatically tween the frames between the keyframes.

The animations you've created so far are linear animations. The sprites moved in a straight line onto the stage and off the stage along the same path. In this lesson, the animations you'll create follow a curved path that Director automatically defines between the keyframes you set in a sprite. To make your sprite follow a curved path, you must set the sprite in at least three positions on the stage in different keyframes. In this task, you will set four keyframes.

Click frame 1, channel 2, and then drag the earth to the lower-left area of the stage.

This is the first keyframe of the animation you're about to create.

Figure .

You need to set three more keyframes for the earth image to complete the animation. Choose locations for the image in the keyframes that will create an elliptical path to imitate the earth's orbit around the sun.

In the score, click frame 7 in channel 2 and choose Insert > Keyframe (Windows Ctrl+Alt+K, Macintosh Command+Option+K). Then drag the earth to the lower-right area of the stage.

Figure .

Insert a keyframe in frame 14, channel 2. Drag the earth to the upper-right area of the stage.

Figure .


There is another shortcut for adding keyframes that is often quicker than using a menu or keyboard shortcut. In Windows, right-click the cell where you want to place a keyframe. On the Macintosh, use the Option+click combination. In both cases, a pop-up menu appears that contains Insert Keyframe, plus a number of other handy options. You can also use right-click or option+click in other locations throughout Director; you will find that this is a handy way to get to capabilities that are otherwise much more time consuming to access.

Insert another keyframe in frame 21, channel 2. Drag the earth just over the top edge of the sun image on the stage to complete the last keyframe position of the elliptical path.

On this part of its orbit, the earth should be on the far side of the sun.

Figure .

You now have defined a few points of the circular path the earth image will follow for the animation. You have a few more steps to complete to make the animation begin and end in the same position to create a truly circular effect.

Save your work.

Rewind and play the movie.

When you watch the animation, you see that Director automatically tweened the frames between the keyframes you identified. The path is somewhat circular, but it is jerky. Also, the earth passes in front of the sun instead of behind it, and the earth doesncomplete a circular orbit. In the next task, you'll smooth the animation using the Modify > Sprite > Tweening feature. You'll also arrange the sprites so the earth passes behind the sun in its orbit.



Not a subscriber?

Start A Free Trial

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