How to build a composition
Last updated
Last updated
Singular's Composer gives you the tools to create stunning overlays with impressive animations, powerful controls, and live data integration. But how do you go from a blank page to a full set of overlays? Follow this step-by-step guide to get started making basic overlays.
If you haven't already done so, create a new composition in the Dashboard.
Double-click the name of the composition to open it in Composer.
When you open a composition for the first time, you'll see an empty default overlay called Overlay 1 in the composition tree.
Double-click Overlay 1 to rename it.
Assigning a logic layer to a sub-composition allows overlays of the same type, or ones that sit in the same portion of the screen, to be smoothly replaced instead of displayed on top of each other.
To add an overlay to a logic layer
Open the composition navigator.
Click No Layer and name the new layer.
When you add another sub-composition, you can assign it to the same layer or create a new layer, accordingly.
There are two ways to add widgets to a sub-composition:
By selecting a widget icon
By choosing a widget from the widget library
For both
Navigate to the composition tree and click the small arrow to the right of the sub-composition name.
The name of the sub-composition will disappear from the composition tree and appear in the composition breadcrumb at the top of the screen. The composition breadcrumb should say the name of your composition followed by the name of the sub-composition.
In the composition toolbar
Select the text, circle, rectangle, image, or video icon, or
Select Add > Widget to choose widgets from the widget library.
From there, you just need to rename and configure the new widget.
Double-click its default name and enter a new one.
With the widget selected in the composition tree, navigate to the property panel and adjust the widget properties as needed.
Repeat step four for as many widgets as needed.
If you haven't already done so, you might need to reorder the widgets in the sub-composition you just created in the composition tree so they display correctly.
The widget at the top of the list will be at the front, the second widget will be behind it, and so on.
Now that you've built the structure of an overlay, you need to make certain elements available to be edited and controlled with a control app or by using the Singular APIs. To do this, you'll add control nodes for each element you want to control.
To add a control node
Navigate to the data interface and control panel, select Text from the drop-down menu, and name the control node in Field name.
In the composition tree, select a widget to connect to the control node. (You might need to click into a group or sub-composition to find the widget.)
In the property panel, select the text tab and click Text just under it. The link browser will appear.
In the link browser, select the name of the control node you just created.
Back in the data interface and control panel, you can change the text for the control node.
Select Animation in the properties panel.
Click the widget or sub-composition in the composition tree that you want to animate.
Adjust the settings in the property panel and click and drag on the timeline to adjust the duration of the animation.
See how it looks by toggling the in/out buttons in the output window.
For each overlay you add to the composition, add a new sub-composition and repeat steps three through seven.
To add a new sub-composition
Navigate to the composition tree toolbar in the top left of the screen and select Add > New Sub-composition.
Double-click New Sub-comp to rename it.
Once your composition is finished, you'll need to create an app for it in Dashboard.
From there, you can add content to it and control it with the Singular APIs or with Studio.
