Interactivity

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
succeeded    
on validation form textfield when the form field is not successfully validated
failed    

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.