The Advanced mode timeline

Parts of the Advanced mode timeline

Layers

Each element in your document is represented by a layer.

1. Layers – Layers determine the stacking order of elements if they overlap. You can drag a layer above or below another layer to change the stacking order.
2. Hide layer – Use the tick box under the eye icon to hide elements on the stage.
3. Lock layer – Use the tick box under the lock icon to prevent edits to elements.
4. Loop layer – Make the animation for that layer's element repeat. Looped layers are reflected in the published document's animation.

Keyframes

Create and edit animations by adding keyframes.

1. Keyframe – Each keyframe indicates the start or end of an animation.
2. Span – The space between two keyframes is called a span, and indicates how long the animation takes.
3. Easing – The acceleration or deceleration of the animation.

Preview tools

You can preview your animation on the stage.

• Play and Pause – Start and stop animation preview playback.
• Loop – Toggle whether animation preview playback continually repeats. Although the preview on the stage loops, there's no effect on animation in the published document.
• Preview range – drag the preview range markers to limit animation preview playback to the indicated part of the timeline.

For video documents, there are additional controls:

• Start frame – Jump to the first frame of the preview range.
• Last frame – Jump to the last frame of the preview range.
• Previous frame – Go to the previous frame.
• Next frame – Go to the next frame.

Time indicators

The playhead indicates the current point in the animation that's displayed on the stage.

• Playhead – To move the playhead, click the timeline on a track or layer (excluding video and audio tracks), or drag the playhead to a new position.
• Current time – Click the current time to change the playhead position by entering a new time.
• Timeline work area length – The timeline work area is the available amount of time for any animation. You can extend the timeline work area length by entering a new amount of time.

The time format depends on the document type:

• HTML5 documents – minutes:seconds.hundredths of a second
• Video and animated GIF documents – minutes:seconds:frames

Events

Timeline-related events (that occur at a specific point in time during the animation) are displayed on the Events track. (The Events track is unavailable for video ads and animated GIFs.)

• Add event – adds an event marker at the same point in time as the current playhead position.
• Add label – Adds an event label at the current playhead position.
• Event marker – A specified point in the timeline where an event can trigger. Right-click to see associated events.
• Event label – A specified point in the timeline that you can reference to control animation.

Video tools

For video ads and animated GIFs, the timeline contains two tools:

• Selection tool – Select and drag items in the timeline.
• Razor tool - Split a clip into two clips.

Media tracks

Video ads and animated GIFs may include video or audio tracks, special layers that contain and let you edit media clips.

Advanced mode timeline settings

Configure timeline settings in Advanced mode by clicking the gear icon to the right of Layer name. Tick marks indicate which settings are active.

• Hide empty layers – Hide layers without animation.
• Lock all layers – Lock all layers. Deselect to unlock all layers.
• Hide all layers – Hide all elements on the stage. Deselect to make all elements visible.
• Snap to timeline grid – Align keyframes, event markers, event labels, the playhead, visibility ranges and the preview range with the timeline grid lines when you insert and drag them. Enabled by default.
  • Snap to objects – This option replaces timeline grid snapping for video ads and animated GIFs, so you can align keyframes, clips, transitions, the playhead, visibility ranges and the preview range with each other.
• Minimise all layers – Shrink all layers to their minimum height.

Advanced timeline zoom

You can adjust the zoom level of the timeline by using the slider near the upper-right corner of the timeline. Dragging the slider to the right expands the timeline scale so that you can time animations more precisely.

Switching between Advanced mode and Quick mode

Click the Quick mode icon on the right side of the timeline to switch to Quick mode, which lets you use a simpler animation timeline.

Each point in the Advanced mode timeline with a keyframe converts into a Quick mode thumbnail, preserving your animation. For more complex animations, spans and easings may be locked against editing in Quick mode.

Quick mode isn't available for video ads or animated GIFs.