Construct 3 icon

Construct 3

Documentation

The Timeline Bar

Ashley's avatar
Medal
Construct Team Founder
Published 10 May, 2019
2,402 words
~10-16 mins

The Timeline Bar shows the currently active timeline. Through this control you can add and remove instances to a timeline and edit it's 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.

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
Add instances 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 S keyboard shortcut or right click in the Layout View and select TimelineSet keyframes
Edit mode button Current Time Layout View Context Menu

Previewing a timeline

The timeline can be previewed in the editor by pressing the Play button in the toolbar or by scrubbing the time marker while pressing and holding Ctrl or Cmd.

Playback Controls

Controlling timelines in events

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

Timeline 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 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.

Interface

Toolbar

  • Add instances: Brings up a dialog to add instances which are not already part of the current timeline.
  • Add subfolder: Option inside the Add instances split button. Will add a track folder to the root of the current timeline.
  • Edit mode: Turns on timeline editing mode.
  • Move to previous keyframe: Moves the current time marker to the nearest master keyframe moving backwards
  • Preview: Start a preview of the current timeline.
  • Stop: Stop the preview of the current timeline.
  • Move to next keyframe: Moves the current time marker to the nearest master keyframe moving forwards.

Toggles

These are the three options at the left most side of the bar. These affect not only the timeline element in the same row, but also any elements under the same hierarchy. If a row does not have a checkbox, the corresponding element does not support the property.

  • Visibility: The checkboxes under the eye icon. These will toggle the visibility of the corresponding timeline track instance. The setting only takes effect while edit mode is turned on.
  • Lock: The checkboxes under the padlock icon. These will toggle the lock state of a timeline element. Locked elements cannot be edited.
  • Enable: The checkboxes under the checkmark icon. These will toggle the enable state of a timeline element. This setting affects the timeline at runtime. Disabled timeline elements are not taken into consideration when the timeline is interpolating values.

Time markers

These are the two vertical lines in the right most section of the bar.

  • Current time: The red line. Change its position to the place in the timeline you wish to add new keyframes. The marker can be dragged directly or by clicking on the time ruler and dragging. To produce a preview of the timeline, drag the marker while holding Ctrl/Cmd. Can also be changed from the Properties Bar when it is showing timeline properties.
  • Total time: The green line. Indicates the total time the timeline takes to play to the end. Can be dragged directly like the current time marker and changed from the Properties Bar when it is showing timeline properties.

Timeline elements

These are the parts that make up a timeline. When selected, these elements will show their properties in the Properties Bar.

  • Track: Represented as a row with an icon of the corresponding instance. Tracks can be moved to and from track folders or the root of the timeline by dragging and dropping.
  • Master keyframe: Represented by black dots in the same row as the track they are contained by. A master keyframe's main role is to serve as a control to modify corresponding property keyframes in bulk.
  • Property track: Represented as a row with an icon of the corresponding property being affected by the track. They can be moved to and from property track folders or the root of the parent track by dragging and dropping. They can not be moved outside of their parent track.
  • Property keyframe: Represented by light blue square in the same row as the property track they are contained by.
  • Track folder: Represented as a row with an icon of a folder. These are used to organize elements in a timeline, should it be needed. A track folder can have nested tracks as well as other track folders. They can be moved to and from track folders or the root of the timeline by dragging and dropping.
  • Property track folder: Represented as a row with an icon of a folder. These are used to organize elements in a track, should it be needed. A property track folder can have nested property tracks as well as other property track folders, they can be moved to and from property track folders or the root of the corresponding track by dragging and dropping. Property track folders can not be moved outside their corresponding track.

Drag and 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 update the position of master keyframes and property keyframes.

Menu options

Timeline elements menus

All the elements described in this section have enu options that will come up by right-clicking on them.

Right-clicking on any part of the Timeline Bar which does not reference any particular element, such as the section showing the name of the current timeline or the time ruler, will bring up a menu with options that affect the timeline itself, rather than any of its elements.

Here is a list with all the available options for each element. The more obvious ones such as Delete are not be described.

  • Timeline:
    • Add instances: Bring up a dialog to add instances that don't already belong to the current timeline.
    • Add subfolder: Add a track folder at the root of the current timeline.
  • Track:
    • Add properties: Bring up a dialog to manually add empty property tracks.
    • Add subfolder: Add a property track folder to the root of the track.
    • Delete
  • Master keyframe:
    • Update: Update all the corresponding property keyframes.
    • Disable: Disable all the corresponding property keyframes.
    • Enable: Enable all the corresponding property keyframes.
    • Delete
    • Add missing property keyframes: Add any missing property keyframes under the specified master keyframe.
      • With interpolated values: The new property keyframes are given the values that the timeline would generate at that point.
      • With current values: The new property keyframes are given the values currently held by the instance.
  • Track folder:
    • Add instances from selection: Add all the instances currently selected in the Layout View directly as children of the track folder.
    • Add instances from dialog: Bring up a dialog to add instances which are not already part of the timeline, directly as children of the track folder.
    • Add subfolder
    • Rename
    • Delete
  • Property track:
    • Delete
  • Property keyframe:
    • Update: Update the value of the property keyframe with whatever value the corresponding instance has at the moment.
    • Disable: Disable the property keyframe. A disabled property keyframe is not taken into account when playing the timeline.
    • Enable: Enable the property keyframe.
    • Delete
  • Property track folder:
    • Add properties: Bring up a dialog to manually add empty property tracks for the corresponding track. The new property tracks are directly added as children of the property track folder.
    • Add subfolder
    • Rename
    • Delete

There is also the Set keyframes option that will show up in any menu provided there is at least a track, track folder, property track or property track folder selected. This will add keyframes at the position of the current time marker with the values the corresponding instances currently have. If there are already keyframes at the current time marker position, they will be updated with the most recent instance values.

Timeline bar options

Aside from the above options, there are some common options which show up in all menus and are specific to the Timeline Bar itself.

  • View:
    • Default: Show the default view of the bar
    • Animation modes: Show the animation mode used by each element of the timeline
    • Result modes: Show the result mode used by each element of the timeline
    • Eases: Show the ease function that are currently in use in between each pair of keyframes
    • Path modes: Show which path mode is in use in between each pair of keyframes
  • Scale: Change the zoom level of the bar. This is an editor only setting and will not affect the playback of a timeline.

The Properties Bar also shows most of the above options as properties. This allows you to see at a glance which settings are used all across the timeline, and offers a convenient way to change them as well.

Layout view editing

When edit mode is on, the Layout View will show handles indicating the path an instance will take as the timeline is played. The handles are only shown for X and Y properties, as those are the only that can really show any form of useful visual feedback. The handles can be used to update the path of the corresponding instance.

Additionally, when setting the Path mode property to Bezier Curve, more handles will appear to edit the path between each pair of keyframes as curves.

There are three types of handles that can be distinguished by color and size

  • Large Blue: These represent the keyframe X and Y properties. Can be moved to update the corresponding keyframes. If there is no property keyframe for either the X or Y properties, the handle will only be able to move in one axis.
  • Small Green: These show up when the Path mode property between a pair of property keyframes is set to Cubic Bezier and represent the first anchor point of a curve. If there is no property keyframe for either the X or Y properties, the handle will only be able to move in one axis.
  • Small Red: These show up when the Path mode property between a pair of property keyframes is set to Cubic Bezier and represent the second anchor point of a curve. If there is no property keyframe for either the X or Y properties the handle, will only be able to move in one axis.

Aside from the handles, there are a few different lines that show up when the Layout View tool is turned on:

  • Blue: These line represents the path instances will take as the timeline is played.
  • Grey: These lines are just visual connection between keyframes to help identify their order in the timeline.
  • Red: These appear to show which pair of keyframes an instance is currently between, and also to indicate that new keyframes can be added at that position.
  • Green: These appear when the current time marker is on top of a master keyframe in the Timeline Bar. If the Set Keyframes option is used now, all the keyframes at that position will be updated.

More information

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

Set the Timeline 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.