Dreamweaver

Animate an AP element using the timeline

The most common kind of timeline animation involves moving an AP element along a path. Timelines can move only AP elements. To make images or text move, create an AP element using the Draw AP Div button on the Insert bar and then insert images, text, or any other type of content in the AP Div.

Timelines can also change other properties of AP elements and images.

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

    Make sure you have selected the desired element. Click the AP element marker or the AP element selection handle, or use the AP Elements panel to select an AP element. When an AP element is selected, handles appear around it as shown in the following illustration.


    A.
    Click the AP element selection handle to select the AP element

    B.
    Selected AP element with image inside

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

  4. Select Modify > Timeline > Add Object To Timeline or simply drag the selected AP element into the Timelines panel.

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

  5. Click the keyframe marker at the end of the bar.
  6. Move the AP element 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 AP element 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 AP elements and images to the timeline and to create a more complex animation.