How To Build a Basic Composition - A Step by Step Guide

Singular's Composer gives you the tools to create stunning overlays with impressive animations, powerful controls, and live data integration. But how do you get from a blank page to a full set of overlays? Here's a step-by-step guide to get you started making some basic overlays.

1 - Create a Subcomposition for Your First Overlay

Each individual overlay should be built within its own Subcomposition. To add a new Subcomposition, click the "Add" dropdown button in the Composition Tree Toolbar, then select Subcomposition. Rename the Subcomposition to the desired name of your first overlay.

Add a new Subcomposition to contain your first overlay

2 - Assign your Subcomposition to a Logic Layer

Assigning a Logic Layer to your overlays is important when using a control application, as it allows overlays within the same layer to smoothly replace one another rather than overlapping.

To add an overlay to a Logic Layer, open the Composition Navigator, select the Logic Layer dropdown, type in the layer name, and hit enter.

Select a Logic Layer for your overlay

3 - Build Your Overlay

Go into your Subcomposition by clicking the small arrow on the right of the layer within the Composition Tree. Next, add and group together your desired widgets to create an overlay.

Combine widgets to create your overlay

4 - Add Control Nodes

Once the structure of your overlay is built, you'll want to make sure it can be edited and controlled by adding control nodes. To add a control node, click on the underlined property in the Property Panel that you wish to add a control node to. Then, enter in a name for the control field (what will see seen in the control application) and click Add. You will see the property turn green, indicating a connection has been made.

You can test the connection by entering new values into the Data Interface and Control Panel in the lower right.

Assign Control Nodes

5 - Add Animations

Open the Animation Timeline and click the icon on the left that corresponds to the layer you wish to animate. Adjust the settings, and click and drag on the timeline to adjust the duration of the animation.

Give Your Overlay an Animation

6 - Repeat Steps 1-5 for all Desired Overlays

You've built a simple overlay! Now repeat this process to build the remaining overlays in your composition.

Follow the same steps to build the rest of your overlays

7 - Open in Your Control Application

Once your composition is finished, open it with a control application like Studio. Notice when adding overlays how they've been grouped based on their layer logic. Try experimenting with your various control fields and make sure everything is to your liking. You're ready to go live!