What is the best way to organize and control complex animations in Saola Animate? Let’s consider using multiple timelines. Today’s article will give you more useful information about using multiple timelines in Saola Animate 3.
Now, we will walk through two main parts:
Manage Timelines
As you may know, in Saola Animate, each scene has the main timeline which automatically starts when the scene loads. Apart from the main timeline, scenes can have multiple additional timelines which are called to play using events – actions. In fact, you can play, pause, seek, etc., both the main timeline and other additional ones to create rich and interactive animations.
Create New Timelines
To create an additional timeline, do the following:
Step 1: Notice the top left of the Timeline pane. Click New Timeline (1). Alternatively, click the drop-down arrow next to the plus icon > New Timeline.
Step 2: In the pop-up dialog, enter a unique name for the new timeline.
Note: Select Set as Main Timeline if you want the new timeline to act as the main timeline of a scene. In other words, select this check box if you want animations in this timeline to run once the scene loads. Otherwise, you can set it as the main timeline later by clicking the drop-down arrow next to the New Timeline button > Set as Main Timeline (4).
Step 3: Click OK to finish.
The new timeline will be directly selected for editing. You can click the Timeline Selector (5) to switch between different timelines of a scene.
Rename Timelines
You can rename a timeline as you want. To do that, select a timeline from the Timeline Selector first. Then, click the drop-down arrow next to the New Timeline button, and choose Rename Timeline (3) to get it done.
Remove Timelines
To remove an active timeline, click the drop-down arrow next to the plus icon and select Remove Timeline (2). This button becomes available only when a scene has more than one timeline.
Control Timeline Playback
When a scene loads, animations on the main timeline run while those on additional timelines don’t. For this reason, you have to trigger animations on additional timelines to make them work. In this part, we’ll learn how to control the playback of both the main timeline and others.
Timeline Events
Saola Animate offers the following timeline events:
- Update: Occur when the timeline updates itself constantly when the Playhead reaches every tick mark on the timeline.
- Play: Occur when the playback of the timeline changes from pause to play.
- Pause: Occur when the playback of the timeline changes from play to pause.
- Complete: Occur when the timeline plays until the end and stops.
- Speed Change: Occur when the playback speed of the timeline changes.
- Reverse: Occur when the playback direction of the timeline changes (forward and backward).
- Seek: Occur when users seek a specific time in the timeline, causing an instant jump to a new time.
Timeline Actions
Seven built-in timeline actions are available to control timeline playback, including:
- Start Timeline: Start the playback of the target timeline (forward or backward).
- Play Timeline: Resume the timeline playback (forward or backward).
- Play 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.
For further information about Events – 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.
That’s how you use multiple timelines and control timeline playback in Saola Animate 3. Feel free to contact us if you need any support.
Read more: