Adding Alpha Transparent Videos

You can easily add animated overlays to your script using either H.264 or H.265 video files. Before you start, create your overlay in a video editor and make sure to export at the same resolution as your script. Hypno supports alpha transparency with H.264 and H.265 video files. Follow the export directions below.

Adding an Animated Overlay with H.264

H.264 files do not render transparency, so in order to add video animations as overlays, you'll need to provide the script with two files: one normal export (RGB), and one with just the alpha channel.

We recommend using Adobe Media Encoder which has a "Render Alpha Channel Only" Option in Export Settings.

Once you have imported your video files to your project, you'll add them to the your timeline, putting your alpha track behind the main video and the RGB track in front of the main video. Then, you set the alpha track as the matte key when setting up the RGB clip in buildTimeline. See the code and NYX examples below.

import * as hypno from './stl.js'

// Animated Overlay Demo H.264 RGB+ALPHA

const alphaTrack = composition.track("alpha")
const mainTrack = composition.track("main")
const rgbTrack = composition.track("rgb")

let runtime = 150 //setting a global duration to 5 seconds

hypno.buildTimeline({

    fps: 30,
    resolution: new Vector(960, 1280),
    clips: [
        {
            start: 0,
            duration: runtime,
            track: alphaTrack,
            asset: new Asset("./graphics_alpha.mp4")
        },
        {
            // we're going to omit the asset key so the 
            // track defaults to the camera input
            start: 0,
            duration: runtime,
            track: mainTrack
        },
        {
            start: 0,
            duration: runtime,
            track: rgbTrack,
            matte: alphaTrack,
            asset: new Asset("./graphics.mp4")
        }
    ]
})

Here's a project file of the code above if you want to try it out in NYX:

1MB

HypnoScript-AlphaOverlay-Demo.zip

archive

Adding an Animated Overlay with H.265 (HVEC)

Hypno script also supports H.265, a new video codec that can render transparency. Adobe does not support the H.265 video format, but you can easily convert your graphics to H.265 using Apple's Compressor app.

To add an animated overlay using an H.265 file, first you will need to import your video file to your project. Then, you'll add it to the your timeline, putting your overlay track in front of the main video track. Lastly, you'll set the alpha key to true when setting up the overlay clip in the clips array to account for the H.265 alpha channel. See the code below.

const mainTrack = composition.track("main")
const overlayTrack = composition.track("overlay")

let runtime = 150 //setting a global duration to 5 seconds

hypno.buildTimeline({

    fps: 30,
    resolution: new Vector(960, 1280),
    clips: [
        {
            // we're going to omit the asset key so the 
            // track defaults to the camera input
            start: 0,
            duration: runtime,
            track: mainTrack
        },
        {
            start: 0,
            duration: runtime,
            track: overlayTrack,
            alpha: true,
            asset: new Asset("./graphics.mp4")
        }
    ]
})