Creating a Graphic that Adapts to Different Outputs

The following tutorial covers how to create a single adaptive graphic that "adapts" in appearance and contents to different outputs with only one instance of your Control Application. A common use case of this setup is if your show is being distributed to different regional locations that have different languages, sponsors, etc.

Check out the three images below. Three different versions of the same lower third sponsor graphic designated for three different outputs.

English:

adaptive_english.png

German:

Screen_Shot_2022-01-10_at_8.56.07_AM.png

Japanese:

Screen_Shot_2022-01-10_at_8.55.59_AM.png

 

1 - Download Template Library Resource

Head over to the Template Library and download the resource Composition we've created for this tutorial titled "Adaptive Lower Third Sponsor".

Adaptive_Lower_Third_Sponsor_Thumbnail.jpg

2 - Inspect the Composition

Dig into the Lower Sponsor Subcomposition and find that there are 3 Groups (folders) designated for each language version of the lower third: English, German and Japanese. Hide and show each group within the tree to see what has been created.

Screen_Shot_2022-01-10_at_10.39.40_AM.png

All the visuals of the graphics have been defined. There are Control Nodes created for the sponsor image and name. All that's left to do is assign each group to a specific language output.

3 - Define the Adaptive Settings for Each Version

A. Define Japanese Settings

Click the Japanese group (folder) in the tree and head over to the Adaptive tab. Next, select Language from the dropdown, choose " and type in "Japanese".

Screen_Shot_2022-01-10_at_9.27.13_AM.png

Screen_Shot_2022-01-10_at_9.27.36_AM.png

You've now defined this group to the Japanese output only. Notice that the Group is now hidden in the Composition Tree as it is hidden from your master output.

Screen_Shot_2022-01-10_at_9.29.13_AM.png

B. Define German Settings

Next, do the same thing for the German folder except type in "German" to assign the group of graphic assets to the German output only.

Screen_Shot_2022-01-10_at_9.31.08_AM.png

C. Define English Settings

Lastly, for the English one, we are going to do something slightly different. Instead of selecting "Equal" from the Adaptive dropdown, select "Part of".

Screen_Shot_2022-01-10_at_9.31.33_AM.png

Screen_Shot_2022-01-10_at_9.31.27_AM.png

This is so that we can make sure one of the three versions is previewed in the master output in the control interface.

Note

You can restore a Revision we've created called "Adaptive Settings Applied" in the Revisions tab to load up a version of the Composition that has the previous steps completed.

Screen_Shot_2022-01-10_at_9.34.17_AM.png

4 - Open the Composition in Studio

Close out of the Composition. Next, right click on the Composition in the Dashboard and select New . Control App. Then choose Studio 2.

Screen_Shot_2022-01-10_at_9.32.47_AM.png

5 - Generate the Different Outputs from Control Interface

Now that you've defined which graphic elements go to which outputs and opened the Composition up into Studio, you'll need to generate the 3 final, unique Output URLs you'll use in your production workflow.

Open up the Output URL menu. 

Now, head over to the Adaptation Globals area, find the Language text input area and type in English

Output URL Menu

Then copy this uniquely generate output url up at the top of the window and open it in a new browser tab. This is your English output.

Next, type in "German", copy the German output and open it into a new browser tab. Finally, do the same and type in "Japanese", copy the last output and paste into a new browser tab.

You should now have your 3 unique outputs opened up in browser windows. If you've followed the previous steps correctly, you'll see that each language version of the lower third is assigned to their unique language outputs!

English Output:

Adaptive_Lower_Third_English_outline.jpg

German Output:

Adaptive_Lower_Third_German_outline.jpg

Japanese Output:

Adaptive_Lower_Third_Japanese_outline.jpg

Play around with the sponsor name and logo for each language in the control interface and see how they populate the unique graphic versions.

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

Comments

0 comments

Please sign in to leave a comment.