Comment on page
How to make overlays interactive
Making overlays is one thing. Making interactive overlays is another.
This guide shows how to make interactive overlays with buttons that toggle their corresponding graphics on and off.
Interactive overlays only work if you prepare and set up embed codes on your website.
- Navigate to the Dashboard > Templates > Resources and download and open the Interactive Example template.
Downloading the Interactive Example template
This template has four pre-built graphics: A, B, C, D, and four pre-built buttons: A Button, B Button, C Button, D Button.
- 1.In the composition tree, double-click the A Button sub-composition.
- 2.Select the mainBase widget to add the interactivity.
Selecting the mainBase widget
The event tool allows you to assign interactivity to a widget.
- 1.Navigate to the event tab in the property panel and select Mouse Down from the drop-down menu.
- 2.Click Add.
Adding a "mouse down" event
You can perform eight different actions in the output window to control a sub-composition (you can test the swipe options on a touchscreen):
- Mouse down
- Mouse up
- Mouse enter
- Mouse leave
- Swipe left
- Swipe right
- Swipe up
- Swipe down
- Deselect Active in the Send Message to Composition Script box.
This tool is for advanced users.
Deactivating the composition script tool
- Select Active in the control sub-composition box to activate the interactivity.
Activating the event
- In the Composition dropdown menu, select A, which is the sub-composition that will be controlled by the A Button.
Selecting the composition A graphic
- Select Toggle so the A Button toggles the A Graphic on and off.
Selecting Toggle mode
You can assign three modes to a sub-composition:
- In
- Out
- Toggle
You've just added your first event.
To test whether it worked
- Click A Button in the output window.
The green graphic should toggle off.
Testing interactivity in the output window
Repeat steps 3-8 to set up the other three buttons and their corresponding graphics.
If you want to specify the cursor type your viewers see while interacting with the output, see the Mouse Pointer event property setting.
When you add events to a composition, make sure the bounding box is tight around the area you want as a button. When an event is added to a widget, the corresponding bounding box will control the overlay.
When outputting interactive overlays, you must use Singular embed codes on your website. If you output via the standard process of combining overlays with your video production software, the overlays won't be interactive.