Introduction to Adaptive Overlays

New to the Singular.live platform is the advanced Adaptive Overlays feature. Adaptive overlays adjust depending on the type of device they are rendered. This creates yet another layer of customization and personalization for the viewer.

This quick tutorial will show one example of the Adaptive Overlays feature set - Layout. We have created a single Composition that accounts for three separate aspect ratios as seen below:

16:9

"Landscape" a mobile phone held horizontally or a typical laptop or desktop monitor.

mceclip4.png

 

4:3

Square range. Many tablets use the more traditional 4:3 aspect ratio.

mceclip2.png

 

9:16

Portrait, which is a typical mobile device held vertically.

mceclip5.png

  

1 - Download "Adaptive Overlays Intro Example" Composition

Download the "Adaptive Overlays Intro Example" Composition from the Resources section of the Marketplace.

Screen_Shot_2019-07-19_at_10.33.41_AM.png

Download "Adaptive Overlays Intro Example" from the Marketplace

 

2 - Open and Inspect the Composition

Open your recently downloaded Composition. Dig into the "Main Overlay" Subcomposition within the Composition Tree and note that there are three pre-built overlays called "16:9 (Landscape)", "4:3 (Square)" and "9:16 (Portrait)". These overlays present all the same information but in unique layouts designed for specific aspect ratios for different devices. 

Adaptive-Overlays-Tutorial_1.gif

Open Composition

 

All you have to do, now that the three unique overlays have been built, is activate the Adaptive Overlays feature and assign the overlays according to Layout (Portrait, Square, and Landscape) so Singular knows which Layout to render on various devices.

 

3 - Select Adaptive Tab, Add "Layout"

Select the first overlays group folder, "16:9 (Landscape)", and select the "Adaptive" tab within the Property Panel. This is where you'll activate the Adaptive Overlays feature. Next, select "Layout" and then click "add". 

Adaptive-Overlays-Tutorial_2.gif

 Add "Layout" in the "Adaptive" Tab

 

You have just made the Layout Adaptive for this 16:9 overlay.

 

4 - Choose Layout

Select "Landscape" because we want this specific overlay, designed only for landscape screens, visible when a Landscape device is viewing this output.

Adaptive-Overlays-Tutorial_3.gif

Choose Layout

Note

If you roll over the selection box, a popup will show the aspect ratios that are handled for each layout. Each of the layout options cover a range.

 

5 - Repeat

Follow steps 3-for the other two overlays in the "Main Overlay" Subcomposition.

Instead of choosing the "Landscape" option for the Layout, make sure to choose "Square" for the "4:3 (Square)" overlay and choose "Portrait" for the "9:16 (Portrait)" overlay.

6 - Test (view in Output Window)

After you've activated the Adaptive Overlay feature for the Layout of all three overlays, you'll want to check your work. To do this, you'll have to set the change the Output Window's Globals - Layout setting. We'll do this for the "9x16 (Portrait)" overlay. 

A - Set the Global

Have the "9x16 (Portrait)" overlay selected, jump over to the Data Interface and Control Panel and select the "Globals" tab. Then go to the "Layout" dropdown menu and select "Portrait". The "1080x1920 (Portrait) overlay should be activated in the Output Window.

This will make only Overlays you have assigned to Portrait Layout visible in the Composition Tree, and a very handy feature when authoring multiple aspect ratios within one Composition.

Adaptive-Overlays-Tutorial_4.gif

Set Layout Global

 

B - Change Output Window Aspect Ratio

Next, change the Output Window size to 1080x1920 (or any "Portrait" resolution you prefer) to view your overlay at the correct aspect ratio.

Adaptive-Overlays-Tutorial_5.gif

Change Output Window Aspect Ratio

 

Note

Follow this step (7) in order to test if your other overlays become visible when the Output Window is at their aspect ratios. 

 

7 - Open Composition in Studio

Open this Composition in a Control Application. For this example, we'll use Singular's Studio.

After importing the Composition into Studio, add the "Main Overlay" overlay and take it in. 

Adaptive-Overlays-Tutorial_7.gif

Open the Composition in Studio

 

Note

Your Output Window is in Portrait mode because that was the last mode set in Composer.

 

8 - Adjust Output Settings

The last step is to adjust the output settings so that your overlays can be adaptive to the Layout settings you defined in Composer.

Go to the App Output URL via the blue cog wheel icon in the upper right corner of Studio. Under "Output Options", select Responsive in the dropdown menu for the Render Window Size.

Adaptive-Overlays-Tutorial_8.gif

Choose "Responsive" for Render Window Size

 

Next, click the + button next to Adaptation Globals and select Layout. Then select Automatic. 

Adaptive-Overlays-Tutorial_9.gif

Add "Layout" Adaptive Globals

 

Copy and paste the App Output URL to a new Chrome Browser and scale the Browser window around the screen. Depending on what the aspect ratio is, one of the three overlays will be activated.

Adaptive-Overlays-Tutorial_6.gif

Test the Adaptive Globals feature in a browser

 

Note

You can also try pasting the above URL into Responsinator. It is a handy website for testing what responsive websites will look like on various devices.

 

Additional Tip

You can also generate multiple different URL outputs from the same instance of Singular Studio.

In the example below, the output URL will be locked 1920x1080: 16:9. 

This is the url (notice the end of the URL): 

https://beta.singular.live/output/2C6LUMbEY0u83YItRILsbL/Output?width=1920&height=1080&g_layout=landscape

Adaptive-Overlays-Tutorial_10.gif

Locked 1920x1080 Output URL

 

Here is the locked 1920x1080 output URL in a browser window:

 

Note

In a locked output ratio, scaling the output window will not activate the other overlay layouts.

 

Screen_Shot_2019-05-21_at_1.26.49_PM.png

Locked 1920x1080 Output URL in browser window

Was this article helpful?
2 out of 2 found this helpful

Comments

0 comments

Please sign in to leave a comment.