Storyboards can hold instructions for Idomoo's player to do certain actions. These actions can be presenting chapters, stopping to ask the viewer a question, display a button that opens a link and more.


Using a Scene For Player Navigation

You can use any scene as a chapter header. This helps your viewers jump around the video. These chapter headers appear on the player during playback, like in this example:



In the player, they click the name of a chapter they want to jump to and the playhead jumps to the start of that scene.

To turn a scene into a chapter marker do the following:

  1. Click a scene in the storyboard's list of scenes to load it's properties.
  2. Under Scene Name, rename the scene with the name of the chapter you want it to represent. You can use names like: Chapter 1, or Welcome.
  3. Finally tick the checkbox next to Use For Player Navigation to make this scene a chapter marker.



In the example above, I renamed three scenes and used them as chapter markers: Chapter 1, Chapter 2, and Chapter 3.


Creating Player Actions

Player actions are instructions for the player to do something while the video is playing. This can be to load another video, or open a webpage, or do something in the webpage.
You can also create user interaction by using input dialogs, or if you plan your video correctly, you can turn any placeholder into a clickable button.


Creating a Player Action Card

You create a Player Action by using the Add Player Action button in a scene. Find it next to the Add Audio button at the top of the placeholder list.



Click this button and a new placeholder appears called Player Action 1.



Click the Settings button to open the Player Action panel, shown here:



The Player Action Panel

Using this panel you configure an action to perform. Whatever you choose, you should name this action so it is recognizable in Idomoo's analytics.
Here are the various options in the settings panel:

  • When the player reaches this point, the player action is recorded in Idomoo analytics. Name the action by filling in this first text field.
  • Enter the amount of seconds for when the action should take place from the beginning of the scene.
  • What action should the player do? Choose from the following list:
    • Jump To - to jump to the beginning of a scene. You can add an offset if you want to start in the middle of the scene instead.
    • Open Link - to open a link in the browser.
    • Load Video - to load another video into this very player. Just add the URL here.
    • Continue - Just keep on playing.
    • End of Video - meaning jumping to the end of the video.
    • Pause - to pause playback.
    • Trigger Event - which causes the player to fire a JavaScript event on the landing page.
    • Invoke API - to send an API call to an endpoint without stopping playback.
    • Show Dialog - to open a dialog created in the dialog creator.

Using these options you can create a rich interactive experience for the viewer of the video collecting information from them and letting them experience the video in the way that fits their needs.


Using a Placeholder for Interactions



Any placeholder can become clickable. This means you can design a frame in After Effects thinking of what will be clickable, and as long as the clickable area are placeholders, you can define actions for that area in Storybuilding Suite. You can even use layers in After Effects with the opacity set to 0, so what you see on screen and the clickable area can be different.

To turn a placeholder clickable click this button on the placeholder you'd like to make clickable.



A panel pops up called Interactive Placeholder. This is where you define what happens when the viewer clicks the placeholder area.



There are three things you need to do to define behavior:

  1. Fill in Analytics Event Name. The event name is how clicking this placeholder appears in Idomoo's analytics.
  2. Fill in the Tooltip. When the viewer hovers over the clickable area the tooltip appears helping you direct the viewer to click. You can also use parameters in the tooltip to make the text itself data driven.
  3. Choose what action to take when the viewer clicks:
    • Jump To - Direct the player to jump to the beginning of a scene plus an offset which you can define, in seconds.
    • Open Link - Direct the browser to open a link in a new window.
    • Load Video - Direct the player to open another video inside this same player.
    • Continue - Just keep on playing.
    • Pause - pauses the video on click.
    • Trigger Event - which causes the player to fire a JavaScript event on the landing page.
    • Invoke API - to send an API call to an endpoint without stopping playback.
    • Show Dialog - to open a dialog created in the dialog creator.