Recording the Path of a Layer

Another method of specifying the movement of the animation is by recording the path. To do this, Dreamweaver follows your pointer as you drag the layer on the page. Dreamweaver tracks your movement and creates the keyframes on the timeline for you. Dreamweaver also matches the time you take when dragging the layer. The slower you drag, the more keyframes are added, and the longer the animation bar becomes. You can then alter the time or the keyframes on the timeline. Recording the path of a layer will automatically add that layer to the timeline.

To record a path, select the first frame in the Timelines panel by clicking the 1 in the row of frame numbers. Select the desired layer in the Document window and choose Modify > Timeline > Record Path of Layer.

As you drag the layer, a gray dotted line will show the resulting path. You can drag the layer in any direction, cross back over the path you are creating, and vary the speed with which you drag the layer to affect the way the path is recorded. When you stop dragging and release, the dotted line is converted to the animation line. Dreamweaver adds the layer to the timeline with the necessary keyframes to control the layer's movement.

Depending upon the amount of time that you take to drag the animation bar while recording the path of the layer, this animation might be very long. The longer the path you create, the longer the animation will be. Keep in mind that long, complicated animations and pages with many different animation channels will take much longer to load and increase the possibility of crashing the visitor's browser.

As you shorten the animation bar, all the keyframes in the animation shift, so their relative positions remain constant. The keyframes will stay in the same positions relative to other keyframes and the beginning and end of the animation bar.