Timeline

In animate mode, the Flare interface displays a timeline with playback controls and options for the current animation. A list of all animations is displayed to the left of the timeline, in the Animations pane. Click the radio button next to each animation to make it the current animation. Keep in mind that the Animations pane only shows animations for the currently active artboard.

The timeline only displays objects and properties that have been keyed.

Timeline Header

The top of the timeline shows playback controls on the left (Play/Pause, Back to Start) as well as the current position, frames per second, and duration of the timeline on the right.

Navigating the Timeline

Scroll and Zoom

Use the horizontal scrollbar at the top of the timeline (with two grabbers on each side) to scroll and resize the zoom level of the timeline.

Pan

You can also use the same pan shortcuts as the stage to pan the timeline (right click and drag, or hold spacebar and drag).

Move Playhead Shortcut

Precisely move the playhead by pressing CMD + Arrow on Mac or Ctrl + Arrow on Windows. You can also hold Shift to move the playhead 10 frames at a time.

Move Keys Shortcut

Hold Alt and press right or left arrow to move selected keys 1 frame on the timeline. Also hold Shift to move the selection 10 frames.

Timeline Toggle Buttons

On the top left hand side, below the Animation Panel header, you'll find a number of buttons that toggle timeline functionality.

AutoKey

When AutoKey is active, changes made to any object's properties are automatically set as keys in the timeline at the current position of the playhead. The AutoKey function is enabled by default.

Show Selected

Enable this toggle button to view only the currently selected objects in the timeline.

Loop

When enabled, animations will loop back to the beginning when they reach the end.

Work Area

Enable this toggle to play back only a specific section of your animation. When Loop is enabled, playback will continuously loop in the Work Area.