The Timeline Bar

The Timeline Bar shows the currently active timeline. Through this control you can add and remove instances and other types of tracks to a timeline, and edit its properties.

Using the Timeline Bar

Here's a summary of how to use the Timeline Bar. A project can have multiple timelines, each timeline can have multiple instances, and each instance can have multiple property tracks. Tracks then use keyframes to mark points in a timeline. Timelines can also have nested timelines to produce more complex structures. Other types of tracks that do not directly reference instances are supported, those are not covered in this quick start guide.

Step 1: create a timeline

With the Timeline Bar open, you can create a timeline with any of the following methods:

  • Right-click Timelines folder in the Project Bar and select Add timeline
  • Right-click in the Layout View and select TimelineAdd timeline
Project Bar context menu Layout View context menu

Step 2: add an instance

Once you have a timeline, add an instance to it with any of these methods:

  • Use the add + button in the toolbar to bring up a dialog from which to choose instances to add
  • Drag & drop instances from the Layout View into the bar
  • Right click selected instances in the Layout View and select TimelineAdd to timeline
  • Use the TrackAdd instances option in the + split button
Add instances split button Layout View context menu

Step 3: add keyframes

Adding an instance adds property tracks for the position (X and Y co-ordinates). The next step is to add some keyframes, which you can do by following these steps:

  1. Turn on Edit Mode by pressing the pencil button in the toolbar
  2. Move the current time marker to the position in the timeline where you want to create keyframes. This can be done by either clicking on the time ruler or by dragging the red line marker.
  3. Make changes to the instances you want to animate
  4. Use the Set keyframes toolbar button, the S keyboard shortcut or right click in the Layout View and select TimelineSet keyframes
Edit mode button Set keyframes button Current Time Layout View Context Menu

Following those steps you should be able to setup the most basic timeline.

Previewing a timeline

The timeline can be previewed in the editor by pressing the Play button in the toolbar or by scrubbing the current time marker (press and hold Ctrl or Cmd while scrubbing to move the marker without previewing the timeline).

Playback Controls

Controlling timelines in events

You can control the timeline in your events using the Timeline Controller plugin.

Timeline Controller Plugin Timeline Events

Edit mode

When edit mode is turned on with the edit toolbar button, the selection boxes in the Layout View change color and the properties which can be animated with the timeline are highlighted in the Properties Bar. The highlighting only happens for instances which are part of the current timeline. Properties which are not highlighted in edit mode cannot be animated with a timeline. After finishing editing a timeline remember to turn the mode off as changes made in this mode are only relevant to the active timeline, rather than the whole project.

Highlighted Properties Highlighted Selection

Updating keyframes

To update keyframes, place the current time marker on top of the keyframes you want to update, make the necessary changes, and set the keyframe again, either by the toolbar button, keyboard shortcut or by the Layout View menu option.

Right-click master keyframes to update all the corresponding property keyframes with the current instance values.

Right-click property keyframes to individually update them with the current instance values.

Additionally, the X and Y properties of any instance can also be updated directly from the Layout View by dragging the handles for the keyframe.

Drag & drop

There are various places in which it is possible to use a drag and drop workflow when using the Timeline Bar.

  • To add new instances directly to the timeline from the current active layout. Drag the instances from the Layout View and drop them on a Timeline.
  • To sort the different elements of the timeline that are represented by a row, such as a track.
  • To add a nested timeline in the current timeline by dragging it from the Project bar.
  • To update the starting offset of a nested timeline.
  • To update the position of master keyframes and property keyframes. Notes on dragging keyframes:
    • Dragging a master keyframe updates it's position and the position of all related property keyframes.
    • Dragging a property keyframe by itself creates a new one at the new position, along with a corresponding master keyframe. Since property keyframes do not exist by themselves there is no notion of just moving them by themselves. The only way to move a property keyframe is to move the corresponding master.
    • Holding Shift while dragging a master keyframe will duplicate them and all related property keyframes in the new position.

Auto keyframing

By toggling auto keyframes, keyframes will be added to the timeline at the position of the current time marker, as soon as changes are made in either the Properties bar or the Layout view.

Note on animating Sprite plugin instances

It is possible to animate the current frame of a Sprite plugin instance by animating it's initial frame property.

When animating in this way make sure that the Sprite's normal animation is stopped as it would interfere with the changes made by a timeline. Likewise if you are just using a Sprite's regular animations, playing a timeline that changes the initial frame will cause un-expected results.

It is also possible to change the current animation a Sprite plugin instance will show at runtime by animating the initial animation property.

More information

For more details on a timeline's capabilities, properties and related objects see the Project Primitives section on timelines.

See the Timeline Controller plugin manual entry for more information on the actions, conditions and expressions available for controlling timelines.

The Timeline Bar has various keyboard shortcuts which are listed in the manual entry Keyboard shortcuts.

Construct 3 Manual 2023-01-31