Moving a layer using a timeline animation

Moving a layer using a timeline animation

The most common kind of timeline animation involves moving a layer along a path. Timelines can move only layers. To make images or text move, create a layer using the Draw Layer button on the Insert bar and then insert images, text, or any other type of content in the layer (see Inserting a layer).

Timelines can also change other attributes of layers and images; for more information, see Changing image and layer properties with timelines.

To animate a layer using a timeline:

  1. Move the layer to where it should be when the animation begins.
  2. Select Window > Timelines.
  3. Select the layer you want to animate.

    Make sure you have selected the desired element. Click the layer marker or the layer selection handle, or use the Layers panel to select a layer. For more information, see Manipulating layers. When a layer is selected, handles appear around it as shown in the following illustration.

    This is a picture of the feature being described.

    Clicking inside the layer places a blinking insertion point inside the layer, but it does not select the layer.

  4. Select Modify > Timeline > Add Object to Timeline or simply drag the selected layer into the Timelines panel.

    A bar appears in the first channel of the timeline. The name of the layer appears in the bar.

  5. Click the keyframe marker at the end of the bar.
  6. Move the layer on the page to where it should be at the end of the animation.

    A line appears showing the path of the animation in the Document window.

  7. If you want the layer to move in a curve, select its animation bar and Control-click (Windows) or Command-click (Macintosh) a frame in the middle of the bar to add a keyframe at the frame you clicked, or click a frame in the middle of the animation bar and select Add Keyframe from the context menu.

    Repeat this step to define additional keyframes.

  8. Hold down the Play button to preview the animation on the page.

    Repeat the procedure to add additional layers and images to the timeline and to create a more complex animation.

Getting Started with Dreamweaver
Dreamweaver Basics
Working with Dreamweaver Sites
Laying Out Pages
Laying Out Pages with CSS
Managing Templates
Adding Content to Pages
Working with Page Code
Preparing to Build Dynamic Sites
Making Pages Dynamic
Developing Applications Rapidly