• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Lesson 7. keyframes and layers > Creating the Animation with Keyframes

Creating the Animation with Keyframes

Now you will create the paper animation. You will create keyframes for channel 3 (the paper) in frames 10 and 20. A keyframe already exists in frames 1 and 30. In frame 1 you will leave the paper inside the folder at the left side of the stage, and in frame 10 you will place the paper sprite up and out of that folder. In frame 20 you will place the paper sprite above the folder at the right side of the stage, and in frame 30 you will place the sprite inside of that folder. Director will automatically tween the sprite positions so the paper will move smoothly between the positions you have chosen for each keyframe.

1.
In the score, click frame 1, channel 3.

You will leave the paper sprite where it is already placed because this is where you want the animation to begin.

On the stage, you will see that a sprite is selected by the frame and handles that appear. The selected object is the paper, but you can't see the paper because it's layered below the top of the folder.


Figure .


The paper is in channel 3, and the top of the folder is in channel 4. Because sprites in lower-numbered channels are behind sprites in higher-numbered channels, the paper sprite is behind the top of the folder.

2.
In the score, click frame 10 of the sprite in channel 3 (the paper) and choose Insert > Keyframe.

This sets the second keyframe.

Now you need to move the paper sheet up and out of the folder.

3.
With the keyframe in frame 10, channel 3, still selected, use the Up Arrow key to move the paper straight up. When it's above the folder where you can click it, hold down the Shift key and use the mouse to drag the paper up farther.

While the paper sprite is inside the folder graphic, it can be hard to reposition using the mouse. You can use the arrow keys to move it up far enough to be selected by the mouse. Holding down the Shift key while you drag ensures that you move the sprite in a straight line.


Figure .


4.
In the score, click frame 20 of the sprite in channel 3 (the paper) and choose Insert > Keyframe.

This sets the third keyframe. Here you want the paper directly above the folder at the right side of the stage.

5.
On the stage, hold down Shift and drag the selection (the paper) across the stage so it is directly above the destination folder.


Figure .


6.
In the score, click frame 30 of the sprite in channel 3 (the paper) and choose Insert > Keyframe. Hold down Shift and drag the selection (the paper) downward so it is behind the destination folders. Use the arrow keys, if necessary, to position the sprite.


Figure .


This sets the fourth and final keyframe. Here you want the paper inside the destination folder at the right side of the stage. Later, when you move the sprite layers, the paper will be between the folders.

Notice that you didn't have to specify the creation of a keyframe at frame 30. Director allows you to select an end frame just as you would a keyframe. When you treated the end frame like a keyframe, by moving the sprite location, Director automatically converted the end frame to a keyframe.

7.
Save your work.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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