You can watch our tutorial video on the Interactive Studio here, or read the article below.
1.0 | Accessing the Interactive Studio
In this article we’ll introduce the interactive studio by highlighting the 4 main sections. To access the interactive studio, first open a clip in the media library and scroll down in the right sidebar to click the “Add interactivity” button (or “Edit interactivity” if a clip already contains interactivity).
The studio is divided into four different sections:
- Canvas
- Timeline
- Media library
- Properties and actions panel
2.0 | Canvas
When starting out, the canvas only displays the video. Once widgets are added to the video they will be visible here. On the canvas you will be able to move elements around freely or align them perfectly along other widgets using ‘snap’ rulers.
3.0 | Media library panel
On the left you will find a panel showing media files you’ve already uploaded to the media library. These can be videos, but also audio files or images. Use the upload button to add new media files.
Besides the media tab, we can also switch to the “templates” and “timelines” tab. We won’t go into detail about that here, but these tabs make it easy to add interactivity that is already used in other videos.
To add a widget to the video: drag an image from the media library to the canvas:
Only use the upload button in the interactive studio to upload images, audio files or pdf files. (Additional) video files should always be uploaded in the Upload & Transcode section of the OVP. Read more about how to upload videos to the OVP.
4.0 | Timeline
A widget is displayed on the canvas, as well as in the timeline.
The timeline can be used to determine exactly when a widget should be visible to the viewer by changing the start and endpoint.
You can also hide widgets from the timeline completely. This can be useful for widgets that should only appear when a viewer clicks on a certain button.
When having multiple widgets on a timeline, it’s possible to change the order of the widgets.
According to the WCAG standards all web content should be usable with the keyboard. This means that users can access and move between links, buttons, forms, and other controls using the Tab key and other keystrokes. Ensure that the order of clickable widgets is logical (tab order), by determining the order in the timeline. Place the first clickable widget at the bottom of the timeline and the last clickable widget at the top of the timeline, etc.
5.0 | Properties and actions panel
The properties and actions panel allows you to set several widget properties and actions.
5.1 | Widget properties
Let’s say, for example, you’d like to resize a widget. The size can be changed on the canvas, but it’s also possible to change the width and height in the properties settings to the exact values you prefer.
5.2 | Widget actions
Scroll down in the same panel to add actions to your widget. Actions determine the behaviour of widgets when a viewer interacts with it.
For instance, we could set our widget to pause the video whenever a user clicks on it. Or we can use it to mute the video.
At the bottom of the panel we can switch tabs to set a message or check the form data. These advanced settings allow for quicker use of similar interactivity on different buttons and data exchange.