(Last Updated: March 5, 2018)

Using the Timeline, you can create interactive HTML5 animation. That’s thanks to the Multiple Timelines feature and unlimited capability to control timeline playback.

This tutorial covers:

  1. Managing Multiple Timelines
  2. Controlling Timeline Playback
  3. Looping Animation
  4. Bookmarking Timeline with Labels

Managing Multiple Timelines

In Saola Animate, a scene may have multiple timelines, including the main timeline and additional ones. The main timeline starts off automatically when a scene loads. Meanwhile, additional timelines, which also contain animation, don’t. Instead, you must use actions and timeline triggers to control their playback, such as start, pause, and continue them.

The top left of the Timeline pane places a set of buttons for managing multiple timelines.

multiple timelines 1

  • Timeline Selector (1): Show the name of the current timeline. Click this menu to switch between multiple timelines of a scene.
  • New Timeline (2): Add a new timeline to a scene. Newly created timelines are directly selected for editing.

multiple timelines 2

Select the Set As Main Timeline check box if you want the new timeline to act as the main timeline. In other words, select the box to make the timeline start once a scene loads.

  • Remove Timeline (3): Delete the selected timeline (only when a scene has multiple timelines).
  • Rename Timeline (4): Rename the selected timeline.
  • Set As Main Timeline (5): Make a timeline the main timeline of a scene.

Multiple timelines come into play when you create rich and interactive HTML5 animation. This feature lets you make different animation on different timelines using the same set of elements. And then, using events and actions, you can control timeline playback and play your animation as you wish.

Controlling Timeline Playback with Timeline Events and Actions

Animation on the main timeline runs when a scene loads. Meanwhile, you have to trigger additional timelines’ animation. That being said, you’re free to control the playback of both the main timeline and others.

timeline playback 1

Saola Animate provides the following Timeline events:

  • Update: Occur when a timeline updates itself constantly when the Playhead reaches every tick mark on the Timeline.
  • Play: Occur when the playback of a timeline changes from pause to play.
  • Pause: Occur when the playback of a timeline changes from play to pause.
  • Complete: Occur when a timeline plays until the end and stops.
  • Speed Change: Occur when the timeline playback speed changes.
  • Reverse: Occur when the timeline playback direction changes (forward and backward).
  • Seek: Occur when users seek a specific time in a timeline, causing an instant jump to a new time.

Seven built-in Timeline actions are available to control timeline playback, including:

  • Start Timeline: Start the playback of the target timeline (forward or backward).
  • Continue Timeline: Resume the timeline playback (forward or backward).
  • Continue Timeline From: Resume the timeline playback from a specific time or label (forward or backward).
  • Pause Timeline: Pause the playback of the target timeline.
  • Pause Timeline At: Jump to and pause at a specific time or label in the target timeline.
  • Toggle Play/Pause Timeline: Toggle the playback of the target timeline.
  • Seek Timeline: Jump to a specific time or label in the target timeline without affecting whether or not the timeline is playing or paused.

To know how to work with events and actions, see Create Interactive HTML5 Content with Events and Actions.

You can also find the way to go with custom JavaScript functions. If you prefer hand-coding, access the Functions pane and create a function.

Looping Animation

When it comes to Timeline actions, you can’t help mentioning looped animation. By default, a timeline plays forward and only once. When you loop animation, your animation repeats as soon as it completes.

There are two different ways to loop animation. First is loop a timeline of a scene separately. Second is loop all scenes of a document together for more complex animation. Both can be easily done with the help of timeline triggers.

First is loop a timeline of a scene. Do the following steps:

Step 1: Move the Playhead to the end of the animation. To save time, click the Go to End button or press END.

Step 2: Click the Insert Trigger button (6) to add a timeline trigger.

loop animation 1

Step 3: In the pop-up dialog, specify the action: Timeline > Start Timeline. The target object is your desired timeline.

loop animation 2

Second, you can play documents, including main documents and symbol documents, in a loop. Follow the steps below:

Step 1: Go to the last scene of the document. After that, move the Playhead to the end of the animation on the main timeline.

Step 2: To add a timeline trigger, click the Insert Trigger button.

Step 3: Specify the action: Symbol > Start Symbol. The target object is your desired symbol/document.

loop animation 3

Note: You can make a timeline/document rewind, i.e. play forward and then in reverse. To do that, set the playback direction to Backward. If you want to change the speed of the reversed animation, select a speed other than 100%.

In addition, it’s all possible to make animation loop from one point to another. Just place a trigger at the point of time where you want the animation to return. Then, use the Continue Timeline/Symbol From action. Specify the point where your animation should play again using time in milliseconds or labels.

It’s not the first time you hear about timeline labels, is it? So, what is a timeline label? What role does it play in controlling timeline playback? Let’s find out the answers in the next part.

Bookmarking Timeline with Labels

Timeline labels mark important points on the Timeline. They serve as bookmarks to which you can refer later. Give a label a descriptive name and they prove highly useful for timeline triggers and actions. For example, you want to add a timeline trigger that seeks a time. So, instead of jumping to somewhere like 0:00:12.357, add a “jump” label and seek it.

Labels appear below the Timeline ruler and right above the Actions bar. To add a timeline label, do the following steps:

Step 1: Drag the Playhead to a special point on the Timeline that you want to mark.

timeline labels

Step 2: Press ALT+L or click the Insert Label button (the flag icon) (7). A label appears at the Playhead position with its default name such as Label_1, Label_2, etc.

Rename a label right at that time or afterward. To rename a label, double-click it, and then enter a new name. Labels accept both letters and numbers. Note that if you change the label’s name, you have to go back to any trigger or action using that label and update its name.

Besides, it’s possible to:

  • Copy and paste a label: Select labels. Press CTRL+C to copy, and then press CTRL+V to insert the copied labels into the current Playhead position.
  • Delete a label: Select labels. Once they are all highlighted, press DELETE or select Delete from the label context menu.
  • Move a label: Click and drag one or more labels to a new spot. This comes in handy when you use labels to create triggers. Take the Seek Timeline trigger above as an example. As you’re fine-tuning your animation, odds are you’re constantly adjusting the timing to find a good time to “jump”. Without a label, you’d have to manually update the time value repeatedly. But using a label, you only need to move it to a new stop and preview your changes.

Now you’re able to manage multiple timelines and control timeline playback. Multiple timelines open up endless possibilities of interactive HTML5 animation. Click the button below to download Saola Animate and explore your creativity.

Pin It on Pinterest