How to build a composition

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.

1. Open a blank composition

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.

2. Rename the default sub-composition

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.

3. Assign the sub-composition to a logic layer

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.

4. Add widgets to the sub-composition

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.

5. Reorder the sub-composition's widgets

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.

6. Add control nodes

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.

7. Add animations

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.

8. Repeat steps 3-7 for each overlay

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.