->>Work in Progress on Beta Site – Workflow and illustration may differ from the current version of the Authoring Tool<<-

btn_overlay The Overlay Editor lets you:


  • Include a graphical asset positioned either on the screen or spherically within the video.
  • Create animated overlays by using sprite sheets.
  • Make the Overlay gaze based by  assigning it to a HITBOX.

Video Tutorial


See more Tutorials

Add an Overlay Event

  1. Set an IN and OUT point in the timeline.
  2. Click on add_icon next to btn_overlay the left of the Timeline
  3. A new Event overlaybar will appear on the Timeline
  4. The OVERLAY EVENT EDITOR will appear in the Preview Window

Add an Image to your project



In order to use a graphic as an overlay you have to first import the image  into your project.

  1. Drag and drop JPEG or PNG files on the PREVIEW WINDOW.
  2. The authoring tool will ask if you wish to copy the files into the Assets folder of your project. Click on YES.
  3. Click SELECT in the OVERLAY EDITOR to choose an image.
  4. The SOURCE IMAGE WINDOW now let’s you browse all images accessible to the project. Hover over the image to see its dimensions. Click the image to select it.
  5. The selected image can now be seen in the SOURCE IMAGE WINDOW of the OVERLAY EDITOR At the same time the image appears in the PREVIEW WINDOW of the Authoring Tool for further manipulation.

Importing Multiple Images

Drag multiple image files onto the Preview Window to save time.

Working with Spherical Overlays



Spherical Overlays are pinned to the 360 video sphere at a given horizontal and vertical rotation point and move with the video sphere.

To create a Spherical Overlay:

  1. Choose SPHERICAL in the OVERLAY TYPE drop down box.
  2. Selected overlays have a red frame around them in the PREVIEW WINDOW. Click and hold your mouse inside the red frame to move the Overlay to the desired location.
  3. You can also type values directly into the Horizontal and Vertical Rotation input fields.
  4. Use the SCALE SLIDER to size the Overlay.
  5. You can also type a scale value directly into the SCALE input field.
  6. Use the OPACITY SLIDER  to adjust the Opacity of the overlay.
  7. Set the depth at which your overlay is displayed in 3D space using the DEPTH input field.

Understanding DEPTH

The DEPTH input field can be used to order overlapping spherical overlays. Spherical overlay close to the viewer are rendered over overlays that are further away. In a monoscopic sphere DEPTH will influence the size of the spherical overlay. As it moves further away from the viewer the spherical overlay will appear smaller.


You can also use DEPTH to spatially place a Spherical Overlay along the Z (depth) axis in 3D space over stereoscopic 3D footage. However there are some real limitations on how well this works. Stereo 360 videos have convergence points that change from shot to shot and also within the shot as people and objects move in relation to the camera. This means that there is no specific depth at which an overlay can be placed that will work in conjunction with a stereoscopic 360 scene. In all likelihood there will be at some point a discrepancy between convergence point of the objects in the 360 scene and the overlay, making it difficult for the brain to resolve the overlay and the 360 video correctly. In most cases this leads to double vision.


The only way to resolve this properly is to have a depth map of each frame and programatically place overlays on the fly while viewing the video. We are currently looking at developing such capabilities but it is formidable problem to solve.


Working with Overlaid (2D) Overlays



Overlaid (2D) overlays are images placed on a 2D plane on top of the 360 video sphere. In general this type of Overlay is best used when viewing 360 video on a flat screen. When you turn the sphere this type of overlay stays in place while the video rotates behind it.

To create an Overlaid Overlay:

  1. Choose OVERLAID in the OVERLAY TYPE drop down box.
  2. Selected overlays have a red frame around them in the PREVIEW WINDOW. Click and hold your mouse inside the red frame to move the Overlay to the desired location.
  3. You can also type values directly into the X  and Y POSITION input fields.
  4. Use the SCALE SLIDER to size the overlay.
  5. You can also type a scale value right into the Scale Input Field
  6. You can choose an alignment for your Overlay.
  7. Use the OPACITY SLIDER  to adjust the Opacity of the overlay.
  8. Determine the order in which the Overlaid overlays are rendered using the ORDER input field. Overlays with a higher order are rendered over overlays with a lower order number. You can use values from x to y. (Find out range from Franz)


Explain how the alignment is best for a flat screen video where the aspect ratio is not known exactly such as the web or mobile devices with various aspect ratios. The alignment settings are in a sense adaptive guaranteeing optimal placement within varying aspect ratios. Use the X and Y positions to offset any alignment.

Adding Fades to an Overlay Event

  1. When creating an new Overlay it comes with a default 30 frame fade in and fade out
  2. To change the length of the fade in or fade out type the value into the input field.
  3. A fade is only executed during playback if you check the FADE ENABLED box.


If you are trying to manipulate an overlay in the PREVIEW WINDOW and you are near the IN Point of your overlay you may not see the actual overlay only the red frame around it. This is because at the beginning of a Fade In the overlay is not supposed to be visible.


To help the overlay authoring process it can be useful to temporarily uncheck FADE ENABLED to see the overlay properly. Don’t forget to re-enable it when you’re done authoring or the fade won’t be executed during playback.


You can also move past the Overlay Fade In in the timeline to fully see the overlay.

Creating Animated Overlays





You can create animated Overlays by using so called Sprite Sheets. Sprite sheets are two dimensional images where the individual cells of an animation are are ordered in lines and columns. Liquid Cinema can work with JPEG and PNG based sprite sheets.

To the left is an example of a Sprite Sheet that is made up of 4 lines and six columns.

Note that the number of lines (4) are counted from top to bottom and the number of columns (6) are counted from right to left. This is important during the authoring process.


To author an animated Overlay you have to:

  1. Import the sprite sheet into the project by dragging the JPEG or PNG file on to the Preview Window.
  2. The authoring tool will ask you if you wish to copy the the files into the Assets folder of your project. Click on YES.
  3. Click SELECT in the Overlay Event Editing Panel
  4. The Source Image Window now let’s you browse the images accessible to the project. Click on the image you want to select.
  5. The image you selected is now previewed in the Source Image Window and should be visible in the Preview Window
  6. Click the Animation Button
  7. The animation window will pop up where you can input the parameters of your animation.
  8. Click the Animation Check Box to make sure your sprite sheet animates during playback.
  9. Now you can define how many lines your animation has in the NB LINE input field.
  10.  Now you can define how many lines your animation has in the NB COLUMN input field.
  11. Set the frame rate at which you want the animation to play back.
  12. Set how many times you want the animation to loop before it freezes. Set this value to zero for endless looping.

Endless Animation

If you want your sprite animation to loop endlessly set the value in the LOOPS input field to zero.

Making Your Overlay Gaze Based


What To Watch Out For

Explain how Liquid Cinema suppresses an Overaly linked to a hitbox  if it cannot play out in its full duration during a hitbox event.

Delete an OVERLAY Event

  1. Click on an Overlay Event on the Timeline
  2. The Overlay Editor will appear
  3. Click on delete_icon
  4. A confirmation appears – select “”Delete”” to permanently delete that Event across all platforms, or “Cancel” to cancel the request

Once deleted, the OVERLAY EVENT EDITOR will close and the Event will disappear from the Timeline.

Moving and minimizing the Camera Event Editor

  • Click and hold the left mouse button over the top bar to move the panel
  • Click on icon_mini_png on the top right corner of the window to minimize the panel
  • To close the panel click on icon_close_png on the top right corner of the window
  • Can I place Graphical Overlays over 3D 360 footage?

    You will have to be careful when adding graphics to 3D footage because the depth positioning of the graphic may overlap with the depth of the items in the 3D footage. The user will see items with opposing depths and that could become disorienting or ruin the 3D nature of the footage as perceived by the user..