VMS Timeline manual

This manual will describe the possibilities of the Timeline module and will explain how to use all of the features. Using the Timeline module it is possible to add interactive elements to the content. For any remaining questions send an e-mail to support@bluebillywig.com .



Figure 2.1 Overview

  1. Stage: this is the area on which you can preview the size, placement and opacity of the timeline widgets.
  2. An example of a partly transparent rectangle widget.
  3. An example of an image widget.
  4. Widget label. This label is useful for finding the widget when adding interactivity.
  5. The widget information pane. Here the selected widget can be configured.
  6. The template lists. A widget configuration can be saved (10) as a template and applied to another (new) widget.
  7. Edit templates. Shows a template list where you can delete templates that have become useless.
  8. Close button. This will close the timeline editor and return to the media-clip detail screen.
  9. Animate button. This will start the widget animation mode.
  10. Save as template button. Saves the configuration as a template to be applied to another (new) widget.
  11. Scroller. When too many events are on the timeline, this scroller can be used to scroll to the ones that aren't shown.
  12. Forms button. Shows or hides the forms window.
  13. Groups button. Shows or hides the groups window.
  14. Snap to widgets. This enables or disables the snap to widgets functionality.
  15. Toggle visibility button. Shows/Hides all widgets on the Stage(1).
  16. Zoom video area. Use these buttons to zoom in, zoom out and reset zoom.
  17. The timeline. This is where all the timeline events exist. It has three rows: main row for events with an in and out point, a row for chapter widgets(23) and a row for action-only widgets(22).
  18. Event snap button. This enables or disables the snapping on timeline events.
  19. Vertical scale. Use these buttons to choose between 3 different vertical scales.
  20. Timeline widget. This is a widget placeholder.
  21. Zoom slider. Zooms in on the location of the timeline scrubber.
  22. Action-only row. This is the row for action only widgets.
  23. Chapter row. This is the row for chapter widgets.
  24. Play/pause button.
  25. Add event button. This button will add a new timeline event at the timeline scrubber position.
  26. Widget list panel. Opens or closes the widget list panel. This list panel can be used to change the layering of widgets.
  27. Import timeline button. This will import all widgets from a timeline of another mediaclip.
  28. Clear timeline button. Removes all widgets(20) from the timeline.

Basic timeline

3.1 Opening the timeline

Go to a mediaclip detail screen and press the timeline button at the bottom of the screen.

Mediaclip details

Figure 3.1 Mediaclip details

I>If the timeline button is not shown, it means that the user that's logged in does not have permission to use Timeline. In this case please contact the person responsible for usermanagement or support@bluebillywig.com and ask for the timeline permission.

Clicking the timeline button will open the timeline screen.

Timeline screen

Figure 3.2 Timeline screen

The timeline screen contains the following area's:

  1. A video screen (the Stage). Here the video-asset and all widgets will be visible.
  2. An information panel next to the video screen (will initially be empty)
  3. A timeline track

3.2 Creating a new widget

Creating a new widget will place the widget at the current time position of the video. There are 2 ways to create a new widget.

The first is clicking the  button and choosing a widget from the list.

The second way is to right-click on the stage area or the timeline area and choose a widget from the dropdown menu.

Note that there are special areas for action-only widgets and chapter widgets.

3.3 Configuring a widget

When you select a widget (or just created a new one), the widget (and event) information will be shown in the information panel at the top right area of the screen.

These are the basic steps to configure a widget:

  1. Give the widget a name by entering it in the label field.
  2. Use the configuration tabs to configure the properties and handlers of the widget.

! Though it's not mandatory to give a widget a label, it is recommended and important to do so, both for targeting using commands and identifying them in the statistics screen.

3.3.1 Selecting a mediaclip or creating a new one

Certain configuration fields let you select a mediaclip of a certain type. For example, an image widget lets you configure an image-clip to use. Instead of selecting a mediaclip you can create a new one from within the configuration field using the upload button. After the upload has completed the newly created clip will be automaticaly published and selected within the configuration field.

3.4 Changing a widget type

When a widget (or an event) has been selected and the configuration is shown in the information panel at the top-right area, the widget can be changed using the type dropdown box. Animation data is untouched when changing widget type. Eg: an animated rectangle will become an animated image.

3.5 Selecting widgets

Selecting widgets

Figure 3.5 Selecting widgets

To select a widget you can do one of the following:

  1. Click on a widget on the Stage
  2. Click on an event (containing the widget) in the timeline track
  3. Click on the widget in the widget list panel

3.5.1 Selecting multiple widgets

Select multiple widgets using the timeline area

Figure 3.6 Select multiple widgets using the timeline area

Click and drag a rectangle in the timeline track to select multiple widgets.

Select multiple widgets using the stage

Figure 3.7 Select multiple widgets using the stage

Click and drag a rectangle on the stage to select multiple widgets. On the stage and the timeline area use shift and click to add/remove widgets to/from the selection. Selections can be grouped for convenient targeting, see chapter Groups .

3.6 Removing widgets

Right click on the widget to remove and choose remove from the context menu. A different way to remove a widget is to select and press the remove button which is located in the bottom left of the configuration panel. You can also right-click on a widget on either the stage or the timeline and select remove from the context menu. 

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.





Groups can be used to quickly show or hide a collection of widgets.

5.1 The groups panel

The groups panel can be used to create new groups, rename groups and add or remove widgets from a group. To open the groups panel you press the groups button below the widget information pane.


Figure 5.1 Buttons

This will open up the groups panel:


Figure 5.2 Buttons

  1. Creates a new group, either a group from selected widgets or an empty group.
  2. Add selected widget(s) to group. Will only show up when widget(s) are not already in the group.
  3. Group: click the group to select all widgets in the group. Double click the group name to rename the group.
  4. Shows the amount of widgets in the group.
  5. Toggle exclusive visibility of all the widgets in the group: hides all other widgets besides the ones in the group. This can be used to quickly identify the widgets on the Stage.
  6. Removes the group. Widgets will not be removed, only the group is removed.
  7. Shows a list of widgets that the group contains.
  8. Removes a single widget from group. The widget itself will not be removed, it is only removed from the group.

5.2 Targeting groups with actions

Using groups makes it possible to target the whole group using an action. When you configure an action, you can use a group action to quickly show or hide all the widgets in the group.

Group actions

Figure 5.3 Group actions

You simply select a group action, choose the group and select show or hide.

Group action detail

Figure 5.4 Group action detail


A template is a model of a widget with a certain configuration. This can be used to quickly populate a new widget.

Choose template

Figure 6.1 Choose template

6.1 Reuse widget configuration

The configuration of the template will be transferred to the current widget. A template can be used to quickly assign a widget type, and its saved configuration, to any widget using the load from template drop-down box. The templates have no relation to the widget from which it was created, thus changing that widget's configuration will not change the saved template.

6.2 Saving widget configuration

To save a widget as a template, press the save as template button at the bottom of the configuration screen and the configuration will be saved as a named template.

6.3 Managing templates

Next to the "load from template" drop-down box there is a blue information button. When this button is clicked a window will open showing all the widget templates.

Remove template

Figure 6.2 Remove template

Remove templates by clicking the red delete button in the widget templates screen.


Interactivity screen

Figure 7.1 Interactivity screen

Widgets can have a number of event handlers. Some events are triggered by the user and others by the widget itself depending on the type of event.

For example, a rectangle has a handler called “onclick”. All actions configures on this handler will be called when the user clicks on the rectangle in the player.

The following table shows an overview of the existing events that can be configured to trigger actions:

name which widget happens when
onclick rectangle, image when widget is clicked
  video, form textfield  
  comment, text label  
onshow rectangle, image when the widget is shown because of its inpoint
  video, form textfield (an action to show a widget doesn't trigger this event)
  comment, text label  
onhide rectangle, image when the widget is hidden because of its outpoint
  video, form textfield (an action to hide a widget doesn't trigger this event)
  comment, text label  
onclosed rectangle, image when the user clicks the close button of a widget
  video, form textfield  
  comment, text label  
onfinished video, audio when the video within the widget has finished playing
on validation form textfield when the form field is successfully validated
on validation form textfield when the form field is not successfully validated

7.1 Actions

The following actions can be configured on any event:

  • javascript
  • player
  • navigation
  • download
  • widget
  • group
  • form

7.1.1 Javascript

Use javascript to call a function located within the html page on which the player is embedded. It is a string input, so you can write the javascript function as you would normally.

7.1.2 Player

Use player actions to pause, play, mute, etc the player on events. The following player actions can be chosen:

player action action result
play player will start playing
pause player will pause
mute sound will be muted
unmute sound will be unmuted
set volume the volume will be set to given value
seek to player seeks to the time given
load clip loads another media-clip and optionally will start at a given position

7.1.3 Navigation

Navigate to a predefined url. The target of the navigation can be set to _blank, _self, _parent, _top or any name of a frame thats on the page where the player will be embedded.

7.1.4 Download

Offer a document download directly from a widget action.

7.1.5 Widget

Send messages to any widget on the stage. More on this in chapter Communication between widgets .

7.1.6 Group

Send messages to a group of widgets on the stage. More on this in chapter Groups .

7.1.7 Form

Post a form. More on this in the chapter about Forms .

7.2 Configure an action

To add an action to an event click the edit button for one of the event handlers.

Clicking the edit button opens the action screen. In this screen you can add the actions that need to be performed when the event is triggered. To add an action click on the blue + button at the top left of the screen.

Widget edit screen

Figure 7.2 Widget edit screen

The image above shows the action screen. The red ellipse in the picture shows the location of the name of the event handler. Actions defined in the example image are:

  1. Call a javascript function with 3 parameters
  2. Pause the player
  3. Present the user with a select download location screen to download the mediaclip with id: 1073917
  4. Open a new browser window with url http://www.somewebsite.com/
  5. Hide the widget with label a rectangle widget

7.3 Conditions

Conditions can be used with actions. To perform an action the condition(s) must be met.

Conditions edit screen

Figure 7.3 Conditions edit screen

The image above shows the conditions area to the right of an action. In this example the action will post a form if the form widgets e-mail and name are valid.

  1. The action
  2. A condition
  3. Show the condition selector window
  4. Click and hold to drag the condition to a condition area of another action to copy the same condition
  5. Delete one condition assigned to this action
  6. Click and hold to drag all conditions to a condition area of another action to copy the all conditions
  7. Delete all conditions assigned to this action

7.4 Add condition

Click on the blue + button marked as 3 in the previous image to open the condition selector.

Add condition

Figure 7.4 Add condition

Clicking on the dropdown beneath the Widget label will let you choose an existing widget.

Select condition state

Figure 7.5 Select condition state

The dropdown box below the State label will show the states of the selected widget.

Condition state overview

Figure 7.6 Condition state overview

After selecting the state, set de state value by clicking on the checkbox below the State dropdown. Click the add to conditions button to add the condition to the action. You can also click and drag the hand-icon to drag the condition to the conditions area of any action in the action manager window.


Clicking on the animate button at the bottom of the top right configuration screen will show the animation screen.


Figure 8.1 animation

  1. Animation path. This is the movement path that is drawn based on position transition points
  2. Animation transition point
  3. Transition point bar
  4. Animation timeline scrubber
  5. Add transition point
  6. Record transition points
  7. Clear all transitions
  8. Animate off to go back to configuration screen

In the animation panel there's a transition point track for position, size and alpha transitions. These tracks show the currently set up transition points.

8.1 Animating

To add a new animation click on the blue + behind the transition point bar.

When adding a new animation set the time scrubber to the first transition point location. Animations require a minimum of 2 transition points to animate a widget. For example, one for the first location and one for the second location.

Moving the widget on the stage will automatically add a new position transition point. Resizing the widget on the stage will add a size position point.

Adjusting a transition point can be done by removing the old transition point by right clicking and selecting remove. Now you can insert a new transition point with the updated animation. Pressing with ctrl space can be used to play and pause the video. Transition points can only be added when the video is paused. The only exception is when the record button for position transitions is pressed.

8.2 Record position animation points

On the right side of the position transition point track is a record button. Pressing this button will start Recording Mode. Use recording mode to create custom transitions like circular movements. If the video is playing when in Recording Mode, position changes will result in new transition points. When you're done, click the stop button to disable Recording Mode.

8.3 Removing transition points

Right click on a transition point and choose remove from the context menu. It's also possible to click and drag the transition point off the track in an up or down direction until you see "remove". To remove all transition points press the clear button next to the track.

Communication between widgets

Edit onclick handler

Figure 9.1 Edit onclick handler

Selecting one of the event handlers like onclick by pressing the edit button will bring up the widget actions screen.

Add action

Figure 9.2 Add action

By clicking on the blue + button and selecting widget a widget action can be configured.

9.1 Commands

A command has to be attached to an existing widget. Existing widgets except chapter widgets will be shown in the widget dropdown. Select a widget by clicking the dropdown at the top.

Select widget

Figure 9.3 Select widget

To send a command to the just selected widget click on the dropdown at the bottom, which will show a number of commands. These commands are specified in the table below.

command widget effect
Show rectangle, image, form textfield Make the widget visible. This will not trigger
  comment, text label, video an onShow event.
Hide rectangle, image, form textfield Make the widget invisible: This will not trigger
  comment, text label, video an onHide event.
Pause video, audio Pause the widget
Resume video, audio Resume playing the widget
Seek to video, audio Seek to a point in time in the widget
Mute video, audio Mute the widget
Unmute video, audio Unmute the widget
Transition all Tells the widget to perform a transition.
    Explained in chapter Transition command .
Custom Transition all Tells the widget to perform a custom transition.
Post form Performs a form post
Set Property all Set a proprty of a widget at runtime

9.2 Transition command

The transition command can be used to show/hide widgets using a transition.


Figure 9.4 transition

This command can be configured using any of the 4 parameters:

  • time: Duration in seconds of the transition
  • transition type: Slide in- or out transitions
  • fade: Fade in or out using opacity
  • transition type: Transition curve, like linear.

The transition type and fade parameters do not both have to be set. E.g. you could just perform a fade in transition without a slide. The preview button in the top right of the Widget actions screen will show the result of your transition on the stage. I>The widget should be shown to be able to preview the transition.


A custom transition uses the x, y, width and height values to determine the end position and size of the widget on the end the transition.


Timeline forms are used to insert form elements into the timeline interactivity. Form widgets are widgets that are linked to the form entity in the timeline. There can only be one form in a timeline. Using forms in a timeline is done the same way as a regular HTML form, by using form fields. The only difference from normal HTML forms is thats it's possible to use a form field that will show, for example, after 1 minute of playtime. Or show a form field the whole time or after a click on a button. I>A user can only use forms in a timeline when they have the timeline forms permission.

10.1 Form setup

To set up a form to send data to a server there are 3 prerequisites.

  1. A form field wiget, which will contain the user provided data that will be sent to an email address and/or server.
  2. A submit button that when clicked will trigger sending the user provided data to an email address and/or server.
  3. Configuration of the form, like location to send the data to

10.2 Form field widget

The form field widget is a input field, which can be used to collect information from the user. This widget has a couple of configuration fields that need to be supplied for correct behavior.

Form fields

Figure 10.1 Form fields

10.2.1 Placeholder

Use this text to show a message in the input field e.g., please provide us with your name.

10.2.2 Form Element Name

This is the name this form field will have within the form. E.g. a form element name called address will be sent with it's value as address#SomeAddressTheUserProvided

10.2.3 Validation

Use this to configure if and how this field is to be validated. Validation has the following methods available:

10.2.4 onValidationSucceeded

Add actions that will be triggered when this form field widget is valid. Whenever a user changes input data which is valid this will trigger an onValidationSucceeded event.

10.2.5 onValidationFailed

Add actions that will be triggered when this form field widget is invalid. Whenever a user changes input data which is invalid this will trigger an onValidationFailed event.

10.3 Submit button

This can be any widget that has a form post action defined, provided it has an onclick handler

Submit button

Figure 10.2 Submit button

Adding a form post action to the onclick handler will make it possible to post the form.

10.4 Configuration of the form

As soon as a form field widget is on the stage the form button will be visible beneath the configuration panel in the top right of the screen.


Figure 10.3 Setup

Pressing this button will open the timeline form window.

Forms window

Figure 10.4 Forms window

10.5 Form properties

10.5.1 Name

Name of the form. A name is not mandatory, though we advise to fill it in as it will be used as subject in the email and it can be used for analytics.

10.5.2 Post to url

Backend url that will handle the form post. This field is only mandatory when data should be sent to an external system. However, the data will always be sent first to the Blue Billywig backend. The Blue Billywig backend will then send the data to the external url and/or the provided email address.

10.5.3 Send to Email

Email address to send the mail to. This address will receive an email after a user pressed the submit button.

10.5.4 Use template url

Specify a url to an email template file used to create the email that will be sent to the provided email addresses. Any of the 3 meta-data strings shown below can be used in the template to automatically append certain data.

  • ||thumbnailUrl|| url to the thumbnail of the video the form was posted from
  • ||Subject|| clip title : name of form
  • ||body|| form variables and its values

The template url should link to a page that has an html structure like defined below.

    <title>Mail Template formsubmit</title>
    <style type="text/css">
      * { padding: 0; margin: 0; }
      h1, h2, h3, p, ul, ol { margin: 1em 0; }
    <img src="||thumbnailUrl||">

10.5.5 Email-from

This field can be used to change the email address from which the email originated. This address has to be whitelisted at our VMS mail service. Please contact support to whitelist an email address support@bluebillywig.com .

10.6 Form event handling

There are three form events that can be thrown i.e., onSuccess, onFailure and on all widgets validated. Although it's possible to add a form-post action to the on all widgets validated event, we strongly advise against it. We suggest to show the submit button after the on all widgets validated event has been thrown.

10.7 Form widget list

The widget list shows all form related widgets used in this form.

Forms widget list

Figure 10.5 Forms widget list

  1. Shows a widget with its form element name.
  2. Shows a widget without a form element name. Take notice of the warning sign. Form widgets without a form element name will not post any data to the backend. The Form element name field can be found in the configuration panel in the top right of the screen.

Using apps

An app can be used to create a group of interactive widgets that can be reused in any timeline project.

When using the app in a timeline project, any changes made to the app itself will instantly change the instance of the app in the timeline project.

A good example of app use would be creating a standard menu or reusable form but any reusable interaction will benefit from using an app.


Creating an app

To create a new app click on the create new button in the bottom left of the VMS and select "app".

After entering a name and pressing "ok", you will be taken to the app creation screen.

The app screen is mostly the same as the normal timeline editor with 3 differences.

  • The green background. This is there to indicate the app editor instead of the normal timeline editor.
  • All time-related elements are gone. Yes, an app editor is the timeline editor without time. You will be creating interactive content that will be used 'as a whole' in a normal timeline project with time. Having multiple timelines with multiple apps would become very confusing.
  • There is no content on which you make the interaction. Therefore it is shown as a 'transparent' background

Let's create a simple app as an example.

Add an image widget and a rectangle widget to the timeline. Now when we select a widget, the right side of the screen is as expected: edit the widget properties and handlers. When no widget is selected (click on empty space to deselect a selected widget) the right side of the screen shows the app properties.

Graphical representation

The graphical representation is how the app will be shown when the app is selected within an app-widget in a normal timeline (don't worry if you do not understand this yet, it will become clear shortly).

To show you how this works, let's not make one yet and publish and save the app (with the image and rectangle).Publish without graphical representation.png

If you would use this app in an app-widget it would still be shown in the player, but not in the timeline editor. This might not be a problem but if you, for example, want to move the whole app to a different position that would be hard to do.

To visually work with the app you need a graphical representation. To do this click on the snapshot icon .

This will create an image of all the widgets that are currently visible.

If your app has many widgets and you don't want all the widgets to be visible in the snapshot, you can use the eye-icon on the events to hide them before making the snapshot.


Exposed widget properties

On the right side of the app properties there is a list of all widgets used in the app.

Clicking the plus-sign next to a widget will expand a list with all properties of that widget.

The checkboxes allow you to select properties of the widget that will be exposed when this app is used in an app-widget.oeps 

In the above screenshot the imageid and alpha properties are checked. This means that those two properties are exposed and therefore can be overridden in the app-widget that uses this app.


Reusing an app as a widget

To use an app we need the appWidget. After creating an appWidget we need to use the widget properties to select an app.

After selecting an app, the graphical representation will be used to draw the widget on the editors stage.

The exposed properties will be editable from within the appWidget properties.

You can use an app like this in many mediaclips. Any changes made in the app later will be reflected in any clip using the app utilizing the appWidget.


Generic apps

Generic apps can be found on the apps screen in the lower section. Generic apps are apps that are pre-created and have a generic use.

You can use these apps as they are and change properties of its widgets in the widget properties.

To edit these apps you have to make a clone first so you have a local copy of the app. After this you can edit the app.