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

Lesson 16. Animating with Timelines > Changing an Animation with Keyframes

Changing an Animation with Keyframes

Animating a timeline can do more than just move an object from point A to point B. The important thing to remember is that all movement is controlled by keyframes. For the ship animation, you set the position of the layer for the first and last keyframes, and Dreamweaver calculated the placement for all the frames in between. To make the movement more fluid and follow a more complex path, you need to add more keyframes.

In the ship.html document, draw a small layer and place it on the left side of the page, near the horizon line between the water and sky in the background image. Name the layer red. Insert the ship_R.gif image from the Lesson_16_Timelines/Images folder.

In this exercise, you will animate this layer on a curved path.

Select the first keyframe in the yellow animation bar on the Timelines panel. Select the red layer in the document window by clicking the layer selection handle. Choose Modify > Timeline > Add Object To Timeline to add it to the timeline.

The red layer now appears in the second animation channel on the Timelines panel, below the yellow animation bar. The red animation bar is 15 frames long.

Since the first keyframe of the yellow animation bar was selected, the red animation bar appears in the second animation channel, directly below the yellow animation bar and begins on the same frame that was selected. If frame 46 had been selected, the red animation bar would be placed on the same animation channel, beginning in frame 46 because the yellow animation bar ends in frame 45.


The z-index (covered in Lesson 15) determines the order in which layers will overlap each other, designating their level not horizontally or vertically, but in the third dimension. To change it, you can drag one layer below another on the Layers panel. It is easier to adjust the stacking order of the layers before you place them in the timeline. If you wait until you place a layer in the timeline, adjusting the z-index will change the stacking order only for the keyframe that is selected in the timelines panel. This is useful if you want the stacking order of your layers to change over the course of the animation.

In the Timelines panel, select the last keyframe in the red layer and drag it until the red animation bar is the same length as the yellow animation bar. In the document window, move the red layer to the right side of the document window, just in front of the place at which the yellow layer moves off the page.

As you move last keyframe of the red animation bar to frame 45, you may notice the yellow layer in the document window move to the position it will occupy in frame 45, which you defined in the previous exercise.


You can also choose Modify > Timeline > Add Frame or Remove Frame to add or remove frames on the timeline and make the animation longer or shorter.

A path line is displayed in the document window for the red layer, and should look similar to the example shown here.

Click Rewind, and click and hold the mouse button on Play on the Timelines panel to see the animation.

The red layer should move from left to right, following the yellow ship in a straight, diagonal line. To make the layer move in a curve, you will add more keyframes and move the layer at each new keyframe in the following steps.

In the Timelines panel, hold down Command (Macintosh) or Ctrl (Windows) until the pointer changes to a circle. Then click on the red animation bar at frame 10.

A new keyframe is added at frame 10, as indicated by the small circle shown on the red animation bar at frame 10. You can move keyframes on the timeline by dragging them left or right to new frames. The frame text field will tell you which frame number the selected keyframe is on.


You can also add a new keyframe by clicking a frame on the animation bar or typing the number of the frame into the frame text field to select it and choosing Modify > Timeline > Add Keyframe. To remove a keyframe, select the keyframe and choose Modify > Timeline > Remove Keyframe.

With the new keyframe selected, move the red layer downward on the page in the document window.

The animation line starts to change shape.

Repeat step 6 to add more keyframes at frames 20 and 35, moving the red layer at each new keyframe.


Right-click (Windows) or Control-click (Macintosh) on the Timelines panel (or use the Timeline drop-down menu) to open a shortcut menu that includes all the relevant commands.

Your document window will now have a more freeform animation line, similiar to the example shown here.

If you were to extend or shorten the animation bar to change the duration of the red animation, all the keyframes you added would automatically move in order to stay in the same position relative to the other keyframes.

Your Timelines panel will now have more keyframes on the red animation bar.

Save your file and preview it in the browser.

Leave this file open for the next exercise.


To change the start time of an animation, select the animation bar (click in the middle of the bar and not on a keyframe) and drag left or right. Press Shift to select more than one bar at a time.



Not a subscriber?

Start A Free Trial

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