Advanced timeline

4.1 Timeline track

Timeline track

Figure 4.1 Timeline track

All the colored elements shown in the picture above are widgets. A selected event has a dark color, like the top-most event shown in the picture. The deselected events have a color depending on their type and state. Chapter- and Action-only widgets are green and diamond shaped. They have no in- and outpoints and only exist at a certain point in time. The other widgets have handles on the left and right side to adjust the in- and outpoints. Next to the left handle is a tiny eye. This is a button that can be used to toggle the visibility of the widget, but only on the preview stage. If the widget is hidden, the event in the timeline track will be transparent.

4.2 Context menus

Right clicking anywhere on the timeline track can be used to add specific widgets.

Right click menus

Figure 4.2 Right click menus

Right mouse click on:

Widget type Menu item Action
Any widget remove Removes the widget from the timeline
Any widget toggle show in preview Will show/hide the widget on the stage. Can
    also be done by clicking the tiny eye next to
    the left handle
Any widget snap inpoint to Snaps the left inpoint of the widget to the
(except action-only) current time scrubber position. Scrubber position must
    be to the left of the right handle
Any widget snap outpoint to Snaps the right outpoint of the widget to the
(except action-only) current time scrubber position. Scrubber position must be to
    the right of the left handle
Action-only widget snap to current time Moves the widget to the scrubber position

4.3 Positioning widgets

Widgets can be configured by changing the values of the properties in the configuration panel in the top-right area of the screen. The graphical representation on top of the video area can be dragged to reposition the widget.

Widget handle

Figure 4.3 Widget handle

Drag the green handle shown in the red circle above to resize the widget. This will resize the widget on the stage as well as adjust the values in the configuration panel.

Constrain proportions

Figure 4.4 Constrain proportions

To retain the aspect ratio of the image or video thumbnail, select constrain proportions in the configuration panel.

4.4 Layering widgets

Layering widgets is used to put one widget on top of the other. This is to make sure every widget is visible.

List panel button

Figure 4.5 List panel button

To change the order of widgets in layers, open the widget list panel by pressing the list panel button shown in the figure above.

List panel open

Figure 4.6 List panel open

The button will show the panel sliding out from the left of the stage-area. In this panel all timeline widgets are listed. The position in the list reflects the layer in which the widget exists.

List panel order

Figure 4.7 List panel order

Check the “show only visible” box to show only those widgets that are currently visible on the preview stage. To change the order of widgets simply click and drag the widget in the list panel to the desired position.

4.5 import widgets

It is possible to import widgets from another timeline. The timeline can belong to a mediaclip or an app. You can import by clicking the Import timeline button and then choose to import from a mediaclip or an app. Until the timeline has been saved, imported widgets have slightly different colors, light-blue if de-selected and dark-green when selected. If an imported widget did not have a label in the original timeline the label will be set to imported.

Import widgets

Figure 4.8 Import widgets

4.6 Ignore timeline show/hide

Normally the timeline engine in the video player will show or hide a widget when the inpoint or outpoint is due. This behaviour can be overridden by checking the ignore timeline show or ignore timeline hide checkbox located in the configuration screen. A button can be used to show a widget that would otherwise remain hidden after checking the ignore checkboxes.


4.7 Using a data source

Some widget configuration fields utilize the data source property. In addition to the normal configuration the content of these fields can be retrieved by using an external data source. At this moment only Javascript expressions can be used as an external data source. To configure a data source press the data source button at the end of the configuration field in the interface:

This will open the data source editor window:

You can use the data source feature to configure the widget property at runtime using a value from another (data) source. When the data cannot be retreived, for what ever reason, then the default value this property has in the editor will be used.

There are 5 types of data sources you can use:

  • Javascript function. This will call a javascript function in the html page, holding the embeded player, and uses the returning value as the property value. (mind the return types of the javascript function)
  • Local Storage Value. This will get a value stored in the local storage of the browser and uses that value as the property value.
  • Macro Value. This will get a value from the choosen macro and uses that as the property value.
  • Value from widget. This will get the property value from another widget and uses is as the property value for this widget.
  • Value from querystring. This will get a value from the page's url (querystring) and uses that as the property value.


4.8 Positioning and sizing widgets based on design metrics

When positioning and sizing widgets, one way to do this is to enter their size and position using the configuration fields of the widget (x, y, widht and height).

These values are the actual numbers representing the size and position of a widget within the Stage area.

When putting together a timeline, and you work based on a design document, it might be more convenient to enter numbers here representing the position and size of the elements from the design document.

To do this, press the setting button at the right side of the screen: 

This will open a setting window that looks like this:

When you activiate the checkbox, all the numbers corresponding to the width, height, x-, and y position will be recalculated to reflect their corresponding numbers from the design document.

E.g. you are working on an interactive timeline that was designed in an adobe illustrator document with a size of 1024x768.

This document contains an image with the folowing metrics: position (x,y) 40,50 and size (width,height) 150,80.

To recreate this take the following steps:

- Activate the option in the setting window with the size (1024x768)

- Create an image widget

- Select an image or upload one

- Scroll down to the appropriate fields (widht, height, x, y ) and enter the numbers from the design document (40,50 for x,y and 150,80 for width,height)

The image should now be placed at the excact position as in the design document.



4.9 Local Storage

Utilizing the local storage functionality of the webbrowser, we can store and retrieve values from within timeline elements.
To use this within an interactive timeline project we:
- use actions to store data 
- use datasources to to populate values with the stored data
- use conditions to retrieve the stored data and compare them.

Storing data in LocalStorage

You can use a LocalStorage action to store certain information.
This action can be used within any handler just like any other action.

The action gives you the choice to set or remove an item using the local storage.
Whether you are setting or removing an item, you must always input the name of the value you want to work with in the name field.

When setting an item you have two options:
- "Define:", define the value yourself
- "From FormTextField:", populate the value to store with the value from a form textfield

When defining a value simple enter the value you want to store in the input field for value.
This can be anything you like, for example:

name                    value
seenvideoX                true
message                    hello there
specialID                31223
NumberOfTimesViewed        ++
Countdown                --

Note the ++ and -- values. These are special values telling the underlying code to add or subtract 1 from the 
allready existing value with the same name. If the value does not exists already in the localstorage it will be created as 0 
and ++ will then make it 1, -- will make it -1.

name                    existingValue        ++        --
myCounter                5                    6        4
myCounter                                    1        -1

When using "From FormTextField:", you have to choose a form textfield widget from the drop-down list.
The text value the form textfield has at the moment this action is executed will be stored as a value in the local storage.


Using Stored data in a condition

You can use the data stored in the local storage to add conditions to actions. The action will then be executed only when the condition is met.
When adding a condition choose "Local Storage" from the drop-down list.
Then enter the name of the value you want to use. This is the same name you have used when storing the data using the local storage action. 
Choose how you want to compare the value using the State drop-down list.
Finally enter the value you want the stored value to compare to and click add condition.

Using Stored data with a data source

You can use the stored data data populate a widget value with the value from the local storage.
An example of this would be to fill set the value of textlabel or form textfield using the data from the local storage.
When ever you can use a data source to set a value, you can now also select the local storage. Enter the variable name and, 
when present, the value from the local storage will be used to set the widgets value.


4.10 Messages

Messages can be used to trigger a group of actions and/or to communicate with custom widgets.


Creating a message to listen to

Press the messages button to open the messages window.

In this window you can create a new message to listen to by pressing the “+” icon.

Give the message a name and press ok (or press enter).


Now that there is a new message to listen to, you can add actions just like you are used to. All actions are available. Please note that using the message action can result in a loop. Be carefull about that.

Whenever this message is received by the Timeline Engine, all the actions will be executed.

Triggering a message

To trigger a message, you simply use the message action to send the message.

If you have setup actions to execute when this message is received, all those actions will be executed.


Messages and custom widgets

Custom widgets can use messages to communicate with the Timeline Engine in both directions.

A custom widget can send a message to execute the actions bound to this message or the custom widget can listen to messages and execute actions accordingly.


More information on this in the section about custom widgets.