An overview to help you start using the Timeline to set events based on page loading, audio narration files or video files

The Timeline feature is available on the tabs below the Stage. 

It has three different “personalities”, depending on what you wish to time events to.

It can be used to time events based on:

  • Page loading or an audio narration file in Claro
  • A video file in Claro or Flow - but only for items added over the video file itself, not items on the rest of the Page.


Each of these has some unique things to understand, but let’s start with a few overall details.

A quick functional tour

When you open the Timeline tab below the stage, you’ll see something like this:


On the left is a list of all the elements on the page plus Layers if you are in a Claro project. 

You see the time in seconds above and below the Timeline. For page timing it sets to 5 seconds by default, which you can change. For audio or video files, you’ll see the file’s actual time length.

You see blue bars beside each element in the list. These show the time period that the element is shown on the page. In the image above we haven’t set any timings yet so the elements' blue bars all fill from 0 seconds through to 5 seconds.


Cool thing #1

You can raise the height of the panel below the Stage. Roll your mouse over the thin line above the tabs (for example, above the Timeline tab) and you'll see the cursor change. Then, just drag up or down.    


Cool thing #2

When you have the Timeline tab up, the Timeline takes over control of the Stage so you can preview timing. That’s why there’s a Play button on the tab. Press Play, and watch the Stage to see your timings in action.



The Basics - Setting a Show event

The Timeline gives you control over showing and hiding content on the page. (You can also use timing to control other types of Actions, just not through the Timeline feature yet.)

Here's how to use the Timeline to set a Show event:



Use the Full Screen button to view this lesson in a modal window.

Click here to view the Guide version of these steps.

You can use the Play button to view the timing events on the Stage.

You can also drag the Playhead (the red line on the Timeline) and drop it at any location on the timeline to preview what the specific time looks like on the Stage.

And if you need an “end time” other than the default 5 seconds you can drag the blue line at the end of the timeline to set that.

Setting a Hide event

You can drag the vertical icon at the end of the blue bar to set a time for the element to be Hidden as well.

If the element stays on until the end of the timeline, then no Exit effect is applied (and as a result you don’t see a lighter blue section).

Timing to an audio narration file

For Claro pages you can also easily set timings based on an audio file like voice-over narration.

To do this, you upload the audio file as a narration file.

Here's how to do that:



Once you upload a narration audio file, the Timeline will switch to synchronize to the file instead of page timing.

You can use the same steps outlined above to set Show and Hide events to be triggered by the audio file’s timing.

NOTE: In Flow Projects, the Timeline only supports Page and Video timing. The nature of a Flow responsive Page means that when a page is viewed on different screens, different amounts of content may be viewable which means that a learner may not actually see an element appear on screen in synch the narration. 

Timing to a video file

You can use the Timeline to set synchronization to a video file in either Claro or Flow.

In either case, timing events to a video file is a bit different than page or audio timing.

First, you can set only timing events for things you have added over top of the video file itself, not other content on the page.

If you add a video file to a page and double click on it, you enter Examine Mode. The mini tool bar lets you add several types of content over the video, including:

  • Labels
  • Markers
  • Hot spots
  • Images
  • Speech bubbles

Plus, you can go to the Insert tab and add Shapes.

When you have the video selected and open the Timeline, on the left you'll see all the items you added on top of the video file so you can synchronize these events to the video.

You can use the Add Cue button to insert cue points to trigger other events.

You can also have the Timeline pause the video using the Insert Pause Marker option. To do this, click the Play button above the Timeline then click the Insert Pause Marker button. A Pause marker will be added to the Timeline which you can drag and drop to any time location.

You can use all of these options to create interactive videos.

For example, you can use Labels to add text over the video and even set the Labels as buttons to trigger other actions. Insert a Pause marker after showing the labels, and have one of the Labels set as a button to Play the video again if it is selected.

Here’s a screen cap showing an example of that:


Or maybe you want to add Markers over the video so learners can view different features of a product in a video. The interactive video options are limited only by your imagination, really.

Timing out...

The Timeline feature makes it easy to set up Show and Hide events on your page.

It's really great for timing to page loading and traditional audio narration in Claro.

But we're really looking forward to seeing what clients do with the interactive video possibilities.

  1     0

Similar Projects

Questions  ( 0 )