How to Configure Interactive Player Actions

Watch the Configuring Interactive Player Actions video

Total running time: 6:23

Overview

Storyboards are able to hold instructions that allow the Idomoo player to perform certain actions. These actions can be presenting chapters, or creating player events and actions, such as stopping to ask the viewer a question. Actions can also be linked to follow on actions, allowing for an unlimited level of interaction.

This article looks at the workflows needed to configure interactive player actions in your videos. A table is included below that details the functionality of those actions.

Adding Menu Bar Chapters

Any scene in your scene library can be used as a chapter header. Once a scene has been defined as a chapter header, it appears as such in the Idomoo Player during playback. This allows the viewer to directly click on the name of the chapter, causing the Idomoo player to skip to the start of that scene (chapter).

In the example below, each scene has been given the chapter marker name: Chapter 1, Chapter 2, and Chapter 3, but you can use any name to create more intuitive chapter markers.

To turn a scene into a chapter marker, follow the workflow below:

1. Open a Storyboard and choose from one of the scenes displayed on the left of the interface. This displays the properties of this scene on the right

   

2. By default, the name of the scene is used as the text for the chapter name and displayed at the top of the video. You can edit this by clicking on the text under Scene Name and altering it to create the desired label

3. Once this is done, tick the checkbox next to Use For Player Navigation to make this scene a chapter marker

Adding Player Events and Actions

The previous section describes a simple method of adding a menu to the Player that contains chapters, creating an immediate and easy way for viewers to navigate a video. However, additional interactions can be added to your videos using Player Events and Player Actions.

Below is an overview of how Player Events and Player Actions function with scenes.

Creating Player Events

Player events can be split into two broad categories; Timeline Events and Interactive Placeholders. Each one is used for a specific purpose:

• Timeline events occur at a specific playback point in your video. Viewing that playback point triggers the actions held in that event

• Interactive placeholders rely on input from the viewer, e.g, clicking on an area of the screen defined as a placeholder causes an event to happen

Each of these events drives an action or actions. Adding a timeline event can be accomplished by adding a card, however, an interactive placeholder requires a placeholder layer. An overview of these workflows are detailed below. Both types of player events are recorded in analytics, providing valuable behavior data on actions performed by your viewers.

Creating Player Actions

Each of the player events described above result in a Player Action, which are, again, recorded in analytics and available for you to see what behaviors of your video are being well received. The actions available to you, their function, and any additional information you may need to use them, are detailed in the table below.

It is important to note that more than one action is possible in each event, allowing for greater interactivity in your videos, and allowing a greater source of analytical information.

The following table lays out the Action Names you encounter while setting up a Player Action, an explanation of its function, any additional information applicable to this specific action, and lastly, whether or not it is possible to add a parameter to this action.

Player Actions Overview

How to Add a Player Action Timeline Event

When you open a storyboard, select the scene you wish to add a timeline event to, from the icons displayed to the left of the interface. With the scene selected, you can now begin to add your timeline event using the following workflow:

1. Click on Add Player Action to add a new Player Action tile to the placeholder list, then click the settings button on the tile created to open the Player Action panel

   

2. Give the Timeline Event a name that is easily visible when looking at the analytics for this video

3. Enter the time in seconds for when this event should take place. This is counted from the beginning of each scene, not storyboard

4. Chose which action the player should perform (see the table above)

5. And finally, give this action a name, which is also tracked in analytics, separate from the analytics tracked using the Timeline Event name

Adding an Additional Action

Once the initial action has been set, it is possible to add a follow-on action using the Additional Actions button at the bottom of the action panel. Clicking on this brings up a new panel and here you should decide if this follow-on action should Always happen or If certain criteria are met. With that selection completed, you can then go on to decide what action type is performed.

Again, it is important to give this action a name that can be easily tracked in analytics. This is done by entering a name in the field at the bottom of the panel.

Note: Additional Actions are virtually unlimited, allowing multiple follow-on actions to be added to a specific timeline event.

How to Add Interactivity to a Placeholder

An interactive Placeholder needs to be thought about early on in the production process as the buttons are designed and added in After Effects. Without these predefined placeholders, you have nothing to define in the storybuilder interface; this can give you full creative control over what the buttons look like. To fully understand the potential of using predefined placeholders, it is recommended you read the best practices article in the Idomoo academy.

Assuming you have the required button design included in your placeholder, use the following workflow to add interactivity to that Placeholder:

1. With the scene selected, hover over the placeholder you wish to make interactive, and click on the small hand icon. This brings up the Interactive Placeholder Panel

   

2. Add a name to the Event Name field in order for you to easily track the use of this interactive placeholder using analytics

3. Add a name to the Tooltip field to indicate what interactive functionality is contained within the button (this is optional). The tooltip appears when the viewer hovers the cursor over the button.

4. Choose which action you wish the interactive placeholder to perform when clicked on

5. Give this action a name, which is also be sent to analytics

6. As seen in Timeline Events above, it is possible to add an additional action, following a When/If conditional statement, to the original action by clicking on Additional Action

Example for using Interactive Placeholders

In this simple example, the viewer is presented with two buttons at the end of a video and prompted to use one when asked the question: Did you like this video? Button 1 is the positive response and Button 2 the negative.

Adding the example Interactive Placeholders (buttons)

To define these Interactive Placeholders (the buttons), use the following workflow:

1. Open the storyboard to display the scenes and the options available

   

2. With the Scene displayed, locate the positive response, depicted in this example as Button left (Liked)

3. Click on the small hand icon on the placeholder to make this placeholder interactive. This brings up the Interactive Placeholder options

   

4. Here you add an event name so that analytics can track the information from this event. In this case write Survey

   

5. The optional Tooltip feature is not used in this example, but you could add something here such as: click here if you liked this video (or the negative for the Dislike button)

6. The action you choose for this interactive button is for the Player to proceed to the End Scene once the button is selected

7. Finally, in this case, the action name YES is set to be sent to analytics if this button is selected

8. With the interactive features for this placeholder selected, click on OK

9. Repeat this set of steps for Button right, with the only difference being to change the Action name that is sent to analytics to NO

Adding a Timeline Event in the case of no action

Once these steps are complete, the storyboard creates a video that is interactive for the viewer. However, you can also add a Timeline Event that pauses the video if the user does not click on either of the interactive buttons.

To integrate this function, use the following workflow:

1. Create a Player Action by clicking the +ADD PLAYER ACTION button at the top of the placeholder list.

2. Open the Player Action tile by clicking on the Event placeholder options button in the lower right of the tile

   

3. Once the Player Action panel has opened, add an event name in order for Analytics to be easily tracked. In this case, the name ‘survey’ has been chosen.

4. Add a period of time after which you would like this action to be performed. In this case, select 8 Seconds.

5. Next decide what action is performed after the 8 seconds has elapsed. In this case, the Pause action has been selected, and defined to continue until the user clicks a button.

6. Finally, the action is given a name, Reached Pause. so it can also be easily tracked by analytics.

As with all Player Actions, it is possible to include an Additional Action, which can be performed once the When or If condition is met. See earlier in this document for details on how to set up an Additional Action.

The example above shows how to use a Player action combined with a Timeline event to create a failsafe in case the viewer fails to respond to the question: Did you like the video? In this case, if the viewer fails to click either button, the video stops playing after 8 seconds and remains paused until a button is clicked. Once this occurs, the viewer is shown the last scene of the video.

Analytics is able to record three separate events in this simple example; Yes, No and Reached Pause, supplying the project owner with a deeper understanding of viewer behavior.