An Over the Shoulder (OTS) graphic is a graphic which is placed over the shoulder of, for example, the news anchor, and can show on the left or right side of the screen. An OTS graphic can be used to highlight a story with a large image and a headline, and sometimes a sub-headline.

This section contains information on the following procedures, which when completed in sequence create an OTS Scene:

To Create a Scene

Create a new scene and save it as OTS.

To Add an Image and Basic Geometries

  1. Add a Rectangle geometry to the Scene Tree.

  2. Add an image (for example, a headshot) to the Rectangle container.

    1. Open the Image Editor, set the mapping to vertex.

    2. Open the Geometry Editor to set the Rectangle Width and Height to match the image proportions.

  3. Rename the Rectangle container to Image.

  4. Add a Cube geometry to the scene. Place it above the Image container.

  5. Open the Cube plug-in editor and do the following:

    1. Set Center Y to Bottom.

    2. Adjust the Size X value to fit the width of the image.

    3. Adjust the Size Y value to 10.0.

    4. Adjust the Size Z value to 1.0.

  6. Copy the Cube container. Place it below the original Cube container.

    • Press CTRL + C then CTRL + V to place a copy below the original container.

    • Press CTRL + Left mouse button to drag and drop a copy to a new location.

  7. In the transformation editor of the Cube container, set Center Y to Top.

  8. Rename the Cube containers to Top_Cube and Bottom_Cube.

  9. Open the transformation editor of each Cube container and move the position of the Cubes. Place one above and the other below the image.

  10. Group all containers under a new root container:

    • Select all containers and click the Group button, or

    • Select all containers and press CTRL + G

  11. Rename the new group container to Image_Holder.

Scene Tree

Output

image-20241017-084759.png

Note: Geometries can also be scaled with the container’s transformation editor. But this has an effect on the its proportions when, for example, beveled edges are added.

To Add Materials

  1. Open the OTS scene.

  2. Expand the Image_Holder container.

  3. Click the + button and type material.

    image-20241017-084914.png

  4. Open the Material Editor and define a color (for example, blue or red).

  5. Copy the Material onto the Bottom_Cube container:

    • Drag the Material from one container to the other, or

    • Right-click the Material and from the context menu select Copy MATERIAL and then Paste MATERIAL onto the receiving container.

Scene Tree

Output

image-20241017-084941.png

To Scale Geometries and Place Them in Z Space

  1. Add a new group container. Place it above the Image_Holder container:

    • Select the Image_Holder container and press CTRL + INSERT, or

    • Drag the New Group button to the Image_Holder container.

  2. Rename the New Group container to Body.

  3. Add a Rectangle geometry to the scene. Place it as a sub-container of the Body container.

  4. Rename the new container to Wall.

  5. Open the Rectangle editor (not the transformation editor) and do the following:

    1. Set the Center option to Center.

    2. Adjust the Height value to 450 (for example).

    3. Adjust the Width value to 800 (for example).

  6. Group the Body and Image_Holder containers under a new container:

    • Select the Body and Image_Holder containers and click the New Group button, or

    • Select the Body and Image_Holder containers and press CTRL + G (when Caps Lock is disabled).

  7. Rename the new group container to Main.

  8. Copy the Material from one of the Cube containers to the Wall container.

  9. Open the Body container transformation editor.

  10. Adjust the Position Z value to -30.0 (This avoids potential conflicts with the geometries in the Image_Holder container).

    image-20241017-085021.png

Note: If the position and/or scaling of the Wall geometry need to be adjusted, make sure to adjust those values on the Body container, as this keeps future additions to the container aligned.

To Add Text

  1. Add a New Group container. Place it below the Image_Holder container.

  2. Rename the New Group container to Text_Holder.

  3. Add a Font to the scene. Place it as a sub-container of the Text_Holder container.

  4. Copy the Font container. Place it below the first Font container.

  5. Rename the Font containers to headline and sub-headline.

  6. Open the Classic Text Editor of both containers and do the following:

    1. Enter some text (for example, headline, sub-headline).

    2. Set the Orientation option to Center.

  7. Open the transformation editor of the headline and sub-headline containers and scale and position the containers to fit each other.

  8. Add a Rectangle geometry to the scene. Place it above the Font containers and rename it to Text_Rectangle.

  9. Open the transformation editor of the Text_Rectangle container and do the following:

    1. Adjust the Position Y value. Center the rectangle between the text objects.

    2. Enable single (S) Scaling.

    3. Adjust the Scaling X value to equal the width of the image.

    4. Adjust the Scaling Y value to 0.1 (for example).

  10. Copy the Material from one of the Cube containers to the Text_Rectangle container and modify if necessary.

  11. Open the transformation editor of the Text_Holder container and do the following:

    1. Adjust the Position Y value to equal the Image_Holder objects.

    2. Adjust the Scaling (Locked) if needed.

Scene Tree

Output

image-20241017-085045.png

Note: If the position and/or scaling of the font containers need to be adjusted, make sure to adjust those values on the Text_Holder container, as that keeps future additions to the container aligned.

To Add Background Items

This procedure details how to add a background image with moving effect.

  1. Apply a suitable image to the Wall object. This can have either an Alpha channel assigned or it can be shown as Fullscreen. Don't forget to set the mapping to vertex.

  2. Open the transformation editor and do the following:

    1. Adjust the Scaling values as required.

    2. Adjust the Position Z value (for example, 2.0) so that it shows in back of the foreground objects.

Scene Tree

Output

image-20241017-085111.png

Note: If the position and/or scaling of the background items as a group need to be adjusted, make sure to adjust those values on the Body container, as that keeps future additions to the container aligned.

To Animate

Before animations are added, move the OTS graphic to its final on-screen position (normally to the top left or right) where it should be seen by the viewer.

  1. Open the OTS scene.

  2. Open the transformation editor of the Main container.

  3. Adjust the Scaling, Rotation, and Position values. Make sure any conflicts are resolved now. Notice that when the Scene is rotated, objects may drift apart as they are placed at different depths (Z space).

  4. Save the scene. This procedure focuses mainly on the animation of a root container, mainly to start with the simplest factor (how do I want my graphics to animate into view?).

  5. Open the OTS scene.

  6. Set Key Frames to 60/50 (for example) fields.

  7. Click the Set Key Frame button.

  8. Open the transformation editor of the Image_holder container and adjust the Position X value so that the OTS element is off screen.

  9. Set Key Frames to 0 fields.

  10. Click the Set Key Frame button.

Note: Notice that an Animation object has been added to the Main container.

  1. Change the Position X back to the final destination, hit the Set Key Frame button.

  2. Click the Start animation button on the Time-line Editor. The graphic now moves from Position X at 0 fields to its final on-screen position.

  3. Open the Stage Editor. The Image_Holder container and the animated Position property are located under the Default Director.

  4. Right-click the Image_Holder container and from the context menu select Transformation > Scaling. This adds a time-line for the Scaling property of the Main container.

  5. Click the first Key Frame on the Scaling animation’s time-line on the Dopesheet Editor. This opens the Scaling animation Stage Object Editor.

  6. Set the Scaling values to 0.5.

  7. Click the Start animation button on the Time-line Editor. The graphic now animates from Position X at 0 fields with Scaling at 0.5 to its final size on-screen.

Note: If the Viz Configuration is set to 50 hertz the default animation time-line is 50 fields. If set to 60 hertz, it is 60 fields. It is always important to configure the required output format before work is started on the designs.

To Animate Sub Containers

This procedure focuses on the animation of a sub-containers. In this case the image and text holder containers.

  1. Open the Stage Editor.

  2. Drag the Text_Holder container onto the Default Director.

  3. Right-click the Text_Holder container and select Transformation > Scaling from the context menu. This adds a time-line for the Text_Holder container’s scaling property.

  4. Set values for the Start and End keyframe 

  5. Click the Key Frame for the Scaling animation. In the Key Frame Editors set it to 30 (for example) fields, to delay the introduction of the Head and Subline.

Note: The Image_Holder and Text_Holder containers are set to grow from the Center. To grow the containers from other angles, open the transformation editor, for each container, and adjust the Axis Center properties. If the OTS is placed to the right, try setting the Text_Holder container’s Axis Center X to R (Right), and conversely.

Note: Always scrub the time-line in the time-line editor to check for potential conflicts (caused by rotation of objects).

To Animate Single Containers

This procedure focuses on the animation of a single container, and how to add additional Key Frames to the animation. In this case the background image is animated and an additional Key Frame is added to grow the size of the background image before it shrinks back to its final size.

  1. Open the OTS scene.

  2. Select the BackgroundImage_Holder container.

  3. Set the number of fields to 30 in the Time-line Editor.

  4. Open the Transformation Editor of the BackgroundImage_Holder container.

  5. Set Scaling to 0.0.

  6. Click the Set Key Frame button.

  7. Set Scaling to the original value.

  8. Set the number of fields to 60 in the Time-line Editor.

  9. Click the Set Key Frame button.

  10. Open the Stage Editor.

  11. Select the Scaling animation time-line for the BackgroundImage_Holder.

  12. Move the Time-line Marker to a position closer to the end of the animation.

  13. Click the Add a Key Frame button.

  14. Click the new Key Frame and set the Scaling value to be larger than the final size.

  15. Save the scene.

Note: Always scrub the time-line in the time-line editor to check for potential conflicts (caused by rotation of objects).

To Animate Single Objects

This procedure focuses on the animation of single objects. Animating single objects increases the dynamics of the scene, especially when the scene has reached its final position on-screen and all other animations have stopped.

This procedure describes how to make a flare move, continuously, along another object.

  1. Open the OTS scene.

  2. Open the Stage Editor.

  3. Create a new Director and name it Loop:

    • Click the +D button, or

    • Right-click the Stage Tree and select Add Director.

  4. Select the Loop Director.

  5. Set the Time-line Editor to 0 fields.

  6. Open the Texture Editor of the Image:

    • Set Scale X and Scale Y to 1 and click the Set Key Frame button.

    • Set Scale X and Scale Y to 1.2 and click the Set Key Frame button.

  7. Select both of the ScalingX and ScalingY Key Frames and click the Linear left and right button.

  8. Click the ScalingX and ScalingY channel to open its Channel Editor. Click the Loop out and Infinite buttons. 

  9. The time-line should now look similar to the image above. Save the scene.

To Animate out

Animations to the scene so far has brought the graphic on-screen for the viewer to see. However, the scene should also be able to animate out instead of simply removing it (hard cut). This can be achieved in three ways:

Note: With one or a combination of the following three methods an out animation can be created. The scene now works in terms of animation, however, it does not work well if someone needs to control, for example, when or how the out animation should start. For this we need to add controls (using control plug-ins) that allows an operator to control the scene On Air.

To Fade out the Graphic with the Alpha Plug-in

  1. Add the Alpha plug-in to the Main container.

  2. Set the time-line to the end of the in animation (at 60 fields for example). Be sure to use the Default director

  3. Open the Alpha plug-in editor.

  4. Set the Alpha value to 100%.

  5. Click the Set Key Frame button.

  6. Set the Alpha value to 0%.

  7. Click the Set Key Frame button.

  8. Now we need to add a stop event. This ensures one can take the graphics in, then it is paused until the operator continues the animation which then plays the out animation.

  9. Place the timeline cursor to time 1.0 (where all is animated in) and add a stop event.

When played, the animation animates in, stops at position 1.0 and after clicking on the continue button fades out to Alpha at 0%.

Note: The placed pilot1 stop/tag point on the Default Director’s time-line, at a given field, enables Vizrt control applications to create a thumbnail and show it in, for instance, the playlist.

To Add Controls

Stop/tag points are added to the Director to allow the operator to control the animation. However the operator, when required, should be able to control the content of the Scene. For this purpose Control plug-ins are used.

In our example we would like to control the image and the Head and the Subline text. Therefore, we need to add control plug-ins to the respective containers.

  1. Open the Plugins Panel and search for Control Image.

  2. Drag it to the Image container.

  3. Click on the plug-in and give it a unique identifier (for example, 100).

  4. Search for Control Text.

  5. Drag the plug-in to Headline container.

  6. Drag the plug-in to Subline container.

  7. Give both plug-ins a unique identifier (for example, 101 for headline, 102 for Subline).

    image-20241017-085140.png

If this scene is now imported in, for example, Viz Trio, an operator is able to fill in the control values:

Tip: Number the Field Identifiers to help order them in the control application interface.

Note: To check that an operator can use the scene test it with a control application (for example, Viz Pilot with the Template Wizard, Viz Trio, Viz Channel Branding).