Developer Portal
Quick StartsComposition scriptingAPIs and SDKsSupport
  • Portal overview
  • Quick start
  • REST API
    • Introduction
    • Rate limits
    • Authorization
    • How-to guides
      • Get a control app's API token
      • Get a composition's sub-composition IDs and names and their payload structures
      • Get a control app's model
      • Get a control app's metadata
      • Update a sub-composition's content
      • Update a sub-composition's animation state
      • Update a sub-composition's content and animation state in one call
      • Update multiple sub-compositions in one call
    • API reference
      • Get control app details
        • Get a control app's metadata
        • Get a control app's model
        • Get a control app's control data
      • Send data to a control app
        • Update a control app's content
        • Update a control app's animation state
      • Take out all of an app's output
  • Data stream API
    • Introduction
    • Rate limits
    • Authorization
    • How-to guides
      • Create a data stream
      • Link a data stream to a composition
      • Send data to an app using the data stream API
    • API reference
  • Composition scripting
    • Introduction
    • Overview
    • Quick start
      • Find sub-compositions and widgets
      • Read and update control nodes
      • Set text widget text properties
      • Read and update widget properties
      • Read control nodes and update widget properties
      • Set image widget URL property
      • Set table widget content property
    • Cheat sheets
      • Fundamentals
      • Interactive overlays
      • Best practices
    • Use cases
      • Read control nodes and generate HTML text
      • Read control nodes, generate HTML text with background
      • Text Ticker - Start ticker on "In" animation
    • Composition script editor reference
  • Software development kits
    • Graphics SDK
      • Getting started
      • Reference
        • SDK functions
        • Composition object
        • Sequencer object
      • Guides and examples
        • Load a composition with its token
        • Load a composition with its URL
        • Get the composition URL of an app instance
        • Sequencer VOD example
        • Control local preview of app
        • Load app instance output
    • Overlay SDK
      • Getting started
      • SDK functions
      • Use case examples
    • Widget SDK
      • Preparing your environment
      • Getting started
      • Reference
        • Widget UI definition
        • Widget callback functions
        • Time control object
        • Composition instance
      • Guides and examples
        • Widget example: CSS patterns
    • App SDK
  • Singular Basics
    • Overview of Singular
    • Managing overlays in the Dashboard
      • How to create a new composition
      • How to open a new app template
      • How to create an app for a composition
      • How to extract a composition from an app
      • How to find an app's shared app token and shared API URL
      • Dashboard reference
    • Building overlays in Composer
      • How to build a composition
      • How to set up layer logic to automate overlay transitions
      • How to set up control nodes to make widget properties available to a control app
      • Animating overlays
        • How to create timeline animations
        • How to create behavior animations
        • How to create update animations
      • How to make overlays interactive
      • How to adapt overlays to various screen sizes
      • Composer reference
    • Controlling overlays in Studio and UNO
      • How to use Studio
      • Studio reference
      • UNO reference
  • Support
    • Singular status
    • Support resources
    • Singular terminology
    • Performance Testing
Powered by GitBook
On this page
  • 1. Open a blank composition
  • 2. Rename the default sub-composition
  • 3. Assign the sub-composition to a logic layer
  • 4. Add widgets to the sub-composition
  • 5. Reorder the sub-composition's widgets
  • 6. Add control nodes
  • 7. Add animations
  • 8. Repeat steps 3-7 for each overlay
  • 9. Create an app for your composition

Was this helpful?

  1. Singular Basics
  2. Building overlays in Composer

How to build a composition

PreviousBuilding overlays in ComposerNextHow to set up layer logic to automate overlay transitions

Last updated 2 years ago

Was this helpful?

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

  1. If you haven't already done so, .

  2. 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

  1. Open the composition navigator.

  2. 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.

To rename a widget

  • Double-click its default name and enter a new one.

To configure a widget

  • 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

  1. Navigate to the data interface and control panel, select Text from the drop-down menu, and name the control node in Field name.

  2. 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.)

  3. In the property panel, select the text tab and click Text just under it. The link browser will appear.

  4. In the link browser, select the name of the control node you just created.

  5. Back in the data interface and control panel, you can change the text for the control node.

7. Add animations

  1. Select Animation in the properties panel.

  2. Click the widget or sub-composition in the composition tree that you want to animate.

  3. Adjust the settings in the property panel and click and drag on the timeline to adjust the duration of the animation.

  4. 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.

9. Create an app for your composition

From there, you can add content to it and control it with the Singular APIs or with Studio.

Once your composition is finished, you'll need to .

create an app for it in Dashboard
create a new composition in the Dashboard
Renaming the default sub-composition
Selecting a logic layer for the overlay
Adding widgets to the sub-composition
Where to create a new control node
Selecting a widget to connect to the control node
Linking a widget to a control node
Adding animation to the overlay
Adding a new sub-composition
The app for this composition being controlled in Studio