How to use Studio

In this guide, you'll get up and running with Studio, Singular's app for controlling live graphics.

Although you don't need it if you use the Singular API, it is useful for previewing app templates.

For best results, use Google Chrome browser.

1. Download and open the template used in this guide

• Navigate to Dashboard > Templates and download and open the Momentum template.

2. Preview and take In overlays

To preview an overlay

• Click the name of a sub-composition. It will appear in the preview window.

Previewing overlays

To take an overlay In or Out (play it live)

• Press the play button next to the overlay's name. It will appear in the output window.

• Press the stop button to take it Out.

Taking overlays in and out

3. See layer logic in action

In Singular, you can assign layers of the same type or that take up the same space on the screen to a logic layer. Layer logic doesn't allow two overlays on the same layer onscreen at the same time—it animates the first layer Out before the new layer animates In.

To see layer logic in action, follow these steps and watch the output window.

1. Press the play button next to the Upper Left - 2 Line overlay to take it In.

2. Press the play button next to the Upper Left - 3 Line overlay to take it In.

Two layers assigned to the same logic layer animating In and Out

Logic layer assignments are shown to the left of the overlay names. Overlays that share a logic layer share the same color.

To see what happens when two overlays share the space on the screen but aren't assign to the same logic layer, follow these steps and watch the output window.

1. Press the play button next to the Upper Right - 2 Line overlay to take it In.

2. Press the play button next to the Panel Right - Image + Text overlay to take it In.

Two overlays overlapping

4. Change overlay names and content

You can also rename overlays and change their text in Studio. Here's how:

To change text in an overlay

1. Select an overlay in the playlist. The overlay editor will show an editable overlay name field and text fields.

2. Change the text in one of the text fields. It will instantly update in the preview window.

To change the name of an overlay name

1. Select an overlay in the playlist. The overlay editor will show an editable overlay name field and text fields.

2. Click into the overlay name field in the overlay editor. It will instantly update in the overlay playlist.

Changing overlay text and names

5. Add overlays and change their order in the playlist

You can also add and delete overlays on the playlist, as well as reorder them.

To add an overlay to the playlist

• Press + at the top right of the playlist panel or click Click here to Add Overlay to add an overlay from a drop-down list.

Adding an overlay to the playlist

To delete overlays from the playlist

• Right-click on an overlay in the playlist panel and select Delete.

Deleting an overlay from the playlist

To change the playlist order

1. Grab the triple bar icon to the left of an overlay name on the playlist panel.

2. Drag the overlay to the desired position in the playlist.

Changing the playlist order

6. See the output in a web browser

Now that you have the basics of Studio down, it's time to see how the overlays would look in a video player.

For this tutorial, you'll use a web browser, but you can also use a video player like OBS. Once you integrate the Singular API into your system, you can control and view overlays from there.

1. Click the Copy URL button to get the output URL.

   

   Copying the output URL
2. Paste the Output URL into an internet browser.

3. Add &bgcolor=green to the end of the URL and press enter. This will set the background color of the webpage to green.

4. Play around with the Momentum app in Studio with the output webpage open.

   

   Momentum in a web browser