Using the Overlay Building Block
The Overlay is the element which will always be automatically added on top when adding any other element (except Regions). It allows you to group all other elements such as Building Blocks, Data Providers, and/or Widgets into one, which can be triggered IN or OUT to display your graphics On-air.
The Overlay is the father of all elements (except Regions) and it allows you to control the visibility of all its child elements. You may identify an Overlay in the Tree as the one with IN and OUT control toggles.
You can add as many Overlays as you need in the same or different Regions BUT take into account you can only have one active/visible Overlay in the same region.
Overlays can only be added inside Regions, they cannot be added within another element.
As a good practice, we recommend naming your Overlay by double-clicking on it. By giving them names, you will be able to identify which graphics you are sending on-air.
Use the Inspector, right-sidebar, to customize the Overlay:
Position: Change the Overlay position inside the Canvas according to the X and Y axis (in percentage relative to the configured screen resolution).
Size: Change the Overlay size inside the Canvas according to its width and height (in percentage relative to the configured screen resolution).
Within the Inspector, you can modify the element backgrounds look and feel. It can be a solid color, a gradient, or an image.
Learn how to implement these properties specific to backgrounds by clicking here.
You can set transitions between overlays. When you have an overlay selected in the tree or canvas you can choose between all the different transition types we offer. You can set both entrance and exit transitions in milliseconds.
For more information about Transitions, please click here.
In the Remote Control, use the IN or OUT toggle next to each Overlay to send On-air the graphics during the live operation.