Making beautiful overlays in Composer is one thing. Making beautiful overlays interactive for your viewers is another! This article shows you just how simple it is to start making interactive overlays.
Note that interactive overlays only work if you are using Singular Embed codes on your own website once you have prepped them.
Follow along using the "Interactive Example" sample Composition found in the Resources section of the Singular Marketplace (as seen below).
Download "Interactive Example" from the Marketplace
In "Interactive Example", there are four pre-built graphics; A-D and four pre-built buttons, A Button-D Button. The goal with this Composition is to have each button toggle on/off their corresponding graphics.
The "Interactive Example" Sample Composition
1 - Choosing your Interactive Object
Open the Composition Navigator and dive into the "A Button" Subcomposition. Select "mainBase" widget to add the interactivity.
We want to add interactivity to the entire rectangular base of this button so that the user can select the whole surface of the button as opposed to just the circle.
Selecting the "mainBase" Widget
2 - Add an Event
The Event tool allows you to assign interactivity to a widget. In this case, within the "mainBase" element, navigate to the "Event" tab within the Property Panel. Click on the dropdown menu and select "Mouse Down". Then select "Add".
Adding a "Mouse Down" Event
There are eight different actions a user can perform in the Output Window to control a Subcomposition (the swipe options can be tested on a touchscreen):
- Mouse Down
- Mouse Up
- Mouse Enter
- Mouse Leave
- Swipe Left
- Swipe Right
- Swipe Up
- Swipe Down
4 - Activate the Event
Select "Active" in the "Control Sub-Composition" box to activate the interactivity.
Activating the Event
5 - Selecting the Controlled Graphic
In the "Composition" dropdown menu, we will select "A", which is the Subcomposition (graphic) that will be controlled by our "A Button".
Selecting the Composition "A" Graphic
6 - Select the Mode
The mode we will select is "Toggle" so that the "A Button" can toggle on/off the "A" graphic.
Selecting the "Toggle" Mode
There are three modes you can assign to a Subcomposition:
7 - Test it!
You have just added your first Event! Test the functionality of this powerful tool by clicking the A Button within the Output Window. If you've followed the steps correctly, the green graphic will toggle off as seen in the image below.
Testing Interactivity in Output Window
8 - Repeat to complete
Repeat steps 2-7 for the three other buttons and their corresponding graphics to finish the exercise.
If you're interested in specifying what type of cursor your viewer sees when interacting with the output, learn about an additional Event property setting called the Mouse Pointer property, here.
When building your own Composition with Events added, 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.
10 - Output via an Embed Code (Important)
When outputting your interactive overlays, you must use Singular Embed Codes on your own personal website. If you output via the standard process of combining your overlays with your video in production software, this will result in the interactivity being removed.