The Timeline Bar

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

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

Interface

Toolbar

The buttons are described from left to right.

  • Add instances: Brings up a dialog to add instances which are not already part of the current timeline.
    • Timelineadd timelines option inside the Add instances split button. Brings up a dialog to add a nested timeline.
    • Timelineadd subfolder option inside the Add instances split button. Will add a timeline folder to the root of the current timeline.
    • Trackadd instances option inside the Add instances split button. Does the same as the main button.
    • Trackadd 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.
  • Set keyframes: Set keyframes at the current time marker. Keyframes will be set in all tracks which have an instance with any meaningful change. Only works while in editing mode.
  • Keyframe selection tool: Toggle the keyframe selection tool that allows to select keyframes in the main pane of the Timeline Bar by making a rectangular selection with the mouse. Can also be activated by pressing and holding Alt.
  • Cut: Cut the current selection of keyframes.
  • Copy: Copy the current selection of keyframes.
  • Paste: Paste the current selection of keyframes relative to the current time marker. If no tracks are selected each keyframe is pasted in it's respective track. If there is a selection of tracks, an attempt is made to copy as many keyframes as possible into the correct tracks. If a keyframe does not fit in any track, it is ignored.
  • 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.
  • Previous timeline: Go back to the previously focused timeline in a nested structure. Disabled if there are no nested timelines.
  • Next timeline: Go to the next timeline in a nested structure. Disabled if there are no nested timelines.

Toggles

These are the four 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. Locked elements can't be edited and have a grey highlight when selected in the layout while timeline editing mode is turned on.
  • 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.
  • Show UI Elements: The checkboxes under the joined dots icon. Using these toggles you can show and hide the layout UI elements associated with the instance. This includes paths lines, keyframe handles and cubic bezier handles. This can be useful when working with timelines which have many different elements.

Time markers

These are the three 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. This marker represents the total time of the top most timeline only, if there are nested timelines, those are not represented by this line.
  • Compound time: The blue line. Indicates the total time a timeline has from start to finish including all of it's nested content. This marker can not be dragged and is just shown as reference. It won't be visible if there is no nested content or if the total time of the main timeline is enough to hold all of it's children.

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 organise 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 organise 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.
  • Nested timeline: Represented as a row with the icon of a timeline, these act like a folder for all the content inside and can be expanded and collapsed as such. Nested timelines can be moved to and from timeline folders or the root of the parent timeline by dragging and dropping. There are several details specific to nested timelines which are discussed later.
  • Timeline folder: Represented as a row with an icon of a folder. These are used to organise nested timelines in a parent timeline. Timeline folders can only exist as children of the main timeline or nested inside other timeline folders.
  • Timeline offset handle: Represented by a rectangle in the same row as the corresponding nested timeline. It's width represents the total playback time of the corresponding timeline and is positioned to be able to see, at a glance, when will the nested timeline will start and finish in relation to the parent. It can be dragged to adjust the starting time of the nested timeline in relation to the parent timeline.

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.
  • To add a nested timeline in the current timeline by dragging it from the Project bar.

Menu options

Timeline elements menus

All the elements described in this section have menu 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:
    • TimelineAdd timelines Bring up a dialog to add nested timelines to the root of the current timeline.
    • TimelineAdd subfolder Add a timeline folder to the root of the current timeline.
    • TrackAdd instances Bring up a dialog to add instances that don't already belong to the current timeline.
    • TrackAdd subfolder Add a track folder at the root of the current timeline.
    • Delete: Only shown for nested timelines. Deletes the timeline from the parent, but not from the project.
    • Focus: Only shown for nested timelines. Gives focus to the timeline in the nested structure.
  • 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
  • Timeline folder:
    • Add timelines: Bring up a dialog to add a nested timelines to the timeline folder.
    • Add subfolder
    • Rename
    • Delete
  • Common options:
    • Cut: Cut the current keyframe selection
    • Copy: Copy the current keyframe selection
    • Paste: Paste keyframes using the current time marker as reference. If no tracks are selected at the moment of pasting, the keyframes will be added in their respective tracks. If there are tracks selected at the moment of pasting, an attempt is made to paste the keyframes into the tracks they would fit best. If there are keyframes in the selection which can't be fit anywhere, they are ignored.

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.

Show UI Elements Toggle

When creating a timeline with many different instances it can become confusing to edit their paths if all the UI elements mentioned above are visible for all the instances at the same time. With this toggle you can hide the UI elements for the instances you are not interested in and only show the ones you want.

Further more, if you make a master keyframe selection in the Timeline bar, the layout will only show the corresponding UI elements for those specific master keyframes.

Nested Timelines

As mentioned earlier, it is possible to nest timelines inside another parent timeline, this allows for coordination between timelines without the need of events. When a timeline is shown as nested inside a parent it works largely the same, some exclusive bits of UI are introduced as well as some differences when compared to the main timeline.

Adding nested timelines

First you will need to create more than one timeline in the project, after doing that you can do any of the following:

  • Drag a timeline from the Project Bar into the Timeline Bar to nest it in the currently active timeline.
  • Use the sub option TimelineAdd timelines of the + split button in the toolbar to bring up a dialog from which to choose timelines to add.
  • Right-click on empty space in the Timeline Bar to bring up a context menu for the current timeline and use the option TimelineAdd timelines.

The image below shows how a nested timeline shows up in the Timeline Bar, after the main timeline elements and separated by two horizontal lines (highlighted in red). You can also see the nested timeline rows have a grey background to indicate they are not the main focus of the bar. A few other UI elements unique to nested timelines appear as well, continue reading for more details.

Editing nested timelines

Focus

While a timeline is shown as nested content most editing can be done on it as in the main timeline. This includes, editing through the Properties Bar, moving keyframes, deleting keyframes and changing the starting offset. Adding instances and adding keyframes is not directly available to nested timelines though. In order to do those actions the nested timeline must have focus.

Giving focus to a nested timeline is easy, you can do one of the following:

  • Double-click the corresponding nested timeline row.
  • Right-click the corresponding nested timeline row and use the focus option.

In the image below you can see the nested timeline having focus. Now all of it's content have a white background, while the rows that don't belong to it have a grey background. The timeline with focus is the only that will accept changes relating to adding instances, keyframes or updating keyframes.

Toolbar arrow buttons

The left pointing arrow is used to go to the last timeline which had focus, the right pointing arrow is used to go to the next timeline which had focus.

Starting Offset

The starting offset handle is the line that can be seen in the same row as the top most element of a nested timeline. It is positioned to show where the nested timeline will start playing in relation to the parent, and it is sized according to it's total time.

Similar to keyframes, dragging this handle allows you to change the starting offset of the nested timeline.

Layout view feedback

When a timeline with nested content is previewed in the layout, everything works as expected, but the instances which belong to the timelines in the structure which don't have focus have slightly different feedback.

The instances and timeline UI elements which don't have focus, are shown with slightly transparent colors.

Note on animating Sprite plugin frames

As of stable release r218, 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.

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.

Construct 3 Manual 2020-10-01