Skip to main content
Version: 5.x

Face In Video

To make it easier for you to mix-and-match our different examples, this template has been converted to an importable asset in the Asset Library with the name Face in Video.

The Face In Video template allows you to attach your own content to a video using tracking data from After Effects.This template is great for building a Lens which tracks the user's face to content in a video. This guide covers how to export After Effects tracking data and sequences using a provided script, and how to use it to build a Lens in Lens Studio.

This template requires use of Adobe After Effects to export tracking data from a video.

Tutorial

Guide

Download the After Effects to Lens Studio script

After Effects to Lens Studio Script

The Face In Video template is used with an After Effects script that lets you export the position, scale and rotation keyframes of a layer to a file which you can use in Lens Studio to attach your own content to a video.

Installing the After Effects to Lens Studio script

After downloading the After Effects to Lens Studio script, copy the AEtoLensStudio.jsx into the After Effects ScriptUI Panels folder

  • (Windows) Program Files\Adobe\Adobe After Effects<version>\Support Files\Scripts\ScriptUI Panels
  • (Mac OS) Applications/Adobe After Effects<version>/Scripts/ScriptUI Panels

If you place a script in the ScriptUI Panels folder while After Effects is running, you must restart After Effects for the scripts to appear in your After Effects.

Load the After Effects to Lens Studio script

After installing the script, you can run the script by selecting the Window -> AEtoLensStudio.jsx in After Effects.

Now you should be able to see the AEtoLensStudio panel.

After Effects Sample Project File

Peapod Project Files

Download this example After Effects project to follow along this guide.

Exporting To Lens Studio

To create a Face in Video Lens, you’ll need both a video and tracking data for that video.

Tracking data is a layer in After Effects which contains keyframes for:

  • Position
  • Scale
  • Rotation

You can use After Effects' built-in tracking tool or Boris Effects Mocha to get the tracking data for your video.

When preparing your composition, make sure to note the following:

  • Your video resolution is the exact same as your comp resolution size

  • If your comp timeline has a beginning and end mark, make sure to trim the comp so you have a comp with no beginning and end mark

  • For the best user experience, a Lens should optimally be less than 2 MB in total file size (with a maximum of 8 MB). With this in mind, your video should have a length of less than 4-5 seconds

  • Creating a loopable video will result in a more seamless Lens experience

Once you have your After Effects tracking data, you can export your tracking data to Lens Studio by using the script from earlier. First select the tracking data layer and make sure it is selected and then click on Export Tracking Data button in the AEtoLensStudio’s panel.

If you are using the script for the first time, you’ll see a dialog box asking you to allow the script to write files onto your computer.

To allow scripts to write files, you need to give permission in the Scripting & Expressions section of your After Effects preferences. Click OK in the dialog box to open your After Effects preferences window. In the After Effects preferences window, check the Allow Scripts To Write And Access Network checkbox and then click OK.

With permission granted, you should now be able to export your tracking data. Select your tracking data layer, then click Export Tracking Data in the AEtoLensStudio’s panel.

Finally we need to export the movie as an animated sequence. First select the composition that you want to render, then click Export PNG Sequence in the AEtoLensStudio’s panel.

When exporting is done, you’ll see a Render Successfully Done message.

Importing Assets Into Lens Studio

Now that we have all the assets that we need, let’s import them into Lens Studio.

To import the tracking data, drag and drop the file from your computer into the Asset Browser panel.

Next, we will import our video which was exported as a PNG sequence. In the Asset Browser panel select + -> 2D Animation From Files. Then, select all the images that were exported from After Effects and press OK. Next, a new window will pop up that allows you to configure how your animation will be imported.

Please refer to 2D Animation Guide to learn more about animated textures.

Clicking OK will create a new animated texture in the Asset Browser panel.

Customize the Face In Video

Let’s use our newly imported resources. First, select the FaceInVideoController [EDIT_ME] object in the Scene Hierarchy panel. Then, in the Inspector panel, click on the Tracking Data script input and select the Tracking Data that we imported.

To set the background video, drag and drop the animated texture from Asset Browser panel into the Background Video input in the Inspector panel.

At this point you’ll see your animation paused with a red color overlay on the screen.

In this template, this means that there is some misconfiguration in our project. To see the issue, open the logger panel by pressing Window -> Panel -> Logger in the menu bar.

In this example it says that we need to set the duration of the animated texture to 0.967.

To set the animation duration, select your animated texture in the Scene Hierarchy panel, and in the Inspector panel set the duration field to the number shown in the logger. Then, refresh your Lens, and you should see your animation playing with an image attached to the video!

By default, Lens Studio import the animated texture with a duration of 1.

Toggle the background video

You can hide the background video by unchecking the Show Video checkbox.

This option will allow you to have any image animated by the data that we exported earlier.

if you keep the Show Video option disabled, you can reduce the size of your Lens by clearing the Background Video’s texture input so that the video does not get exported as part of the Lens.

Changing the Image

A custom texture can be added to replace the face texture as well. You can change the texture by changing the Image property to a custom texture.

You can add an opacity image to your tracked image by changing the Opacity Image texture property. Take a look at the example face_mask texture in the Asset Browser panel for an example of an opacity mask.

Adjust the Image Size, Position and Rotation

The template also allows you to modify how your tracked content is displayed.

You can adjust the image size using the Size slider.

You can adjust the image position using the Offset X and Offset Y slider.

You can adjust the image rotation using the Rotation slider.

You can adjust the opacity of your image using the Alpha slider.

Adjust the Image Sort

If you want your image to be drawn on top of the video, change the Image Sort to In Front of Video.

You can also sort how your image is drawn using the Scene Hierarchy panel by setting the Image Sort to Manual.

Previewing Your Lens

You’re now ready to preview your Lens. To preview your lens in Snapchat, follow the Pairing to Snapchat guide.

Was this page helpful?
Yes
No

AI-Powered Search