Alpha Video requires the latest version of ZapWorks Studio to work, please make sure you download the latest version from the ZapWorks website
In this beta tutorial we will be taking you through how to prepare and display alpha video using ZapWorks Studio. We’ll be using Premier Pro as our video editing software of choice, but hopefully the process will be similar in other tools.
Video Preparation
While this demonstration outputs a video with a resolution of 3840x1080 we highly recommend that you keep your resolution beneath 2048 in both dimensions as some lower end devices may have trouble playing them.
First we start with our video, here we have some frankly excellent footage of Zappar’s Co-Founder, Dr Simon Taylor pretending to fly around like a familiar superhero who has jets in his feet and hands…
We’ve got this footage, which has a green screen background, in a sequence in a Premiere Pro project.
- The first thing to do is copy and paste this clip, and place the copy directly above the original in the timeline.
- Select the top clip and search for ‘Ultra Key’ in the Effects panel.
- Drag ‘Ultra Key’ onto the top clip and double click to open the Effect Controls panel.
- Use the Eyedropper tool to select the Key Color - click on the green in the Program Monitor.
- Copy and Paste the whole ‘Ultra Key’ effect onto the below clip.
- Now, reselect the top clip, and in the Ultra Key Effect Control, select ‘Alpha Channel’ as the Output.
You will see that Simon becomes a solid white shape.
- Next, we need to make the sequence we’ve been working in twice as wide so select Sequence > Sequence Settings and change the horizontal Frame Size to double the width of your original video (3840 in our case as our original video was 1920 pixels wide).
- Next, we need to position the clips so they are side by side. This needs to be pixel perfect, so don’t move the clips by eye. Double click the top clip in the timeline to open the Effect Controls panel. Change the horizontal position to 75% of the width of the sequence (2880 in our case). You will see the solid white version of Simon move over to the right in the Program Monitor.
- Now double click the bottom clip, and change the horizontal position to 25% of the width of the sequence (960 in our case).
You will see the full color version move over to the left.
- Now, we’re ready to export the video as an h.264 mp4 file.
Below you can see the before and after of this process.
Before
After
- The final preparation step is to grab a single frame snapshot of the video for reference later on when creating our experience. In Premiere you can create a snapshot by clicking the camera icon in the Program Monitor or using the appropriate keyboard shortcut (for us, on a mac, it’s Shift and E).
Another options is to use the VLC Snapshot feature.
Snapshot
Studio Project
- Start a new project and import your exported side-by-side MP4 video along with your snapshot image into the media Library.
- Drag both the video and image into the Hierarchy.
- Select the snapshot image node in the Hierarchy and scroll down to the scale property within the properties panel. Make a note of the first value (in our case 3.52) as we’ll be using it in a following step.
- The next step is to add two TransformedTextures which will allow us to seperate out the left and right side of our video as if they were two seperate video textures. We add TransformedTextures by right clicking on the root node and selecting ‘New > Textures > TransformedTexture’. Do this twice to get two TransformedTexture nodes.
- Rename one of the TransformedTextures to “colorTexture” and the other to “maskTexture” to help differentiate them.
- Select the colorTexture and in the properties panel set it’s texture to be that of the snapshot image. This will help us line things up for the final video texture which at this moment in time has no preview (why we are using the snapshot). After doing this you should see the snapshot appear in a small window in the top right of the 3D view.
- Now we want to position and scale the colorTexture so that it fits perfectly over the color side of our video. To do this we want to recall the scale number from before (3.52) and use that as the first (x-axis) scale value here. We then need to move the texture over to the color side of the snapshot so we take half of the scale value (1.76) and use that to set the first (x-axis) position. With this done we can now see that the color portion of the video shown in the preview box in the top right of the 3D view.
- Now we want to setup our maskTexture in the same way following steps 6 and 7 however this time we want the texture to cover the other side of the snapshot so we set the first (x-axis) position value to -1.76 instead of 1.76. We now see the mask portion of the snapshot in the preview box.
- With the TransformedTextures setup using the snapshot for guidance we can now switch both of their textures to the video. This will cause a default preview image to appear in the preview box but the video will be used when the experience is run.
- Next we want to create a new material that will use our TransformedTextures to create the alpha video effect. We do this by right clicking the root node in Hierarchy and selecting ‘New > Material’. Naming it videoMaterial or something similar for clarification.
- Selecting the material node in the Hierarchy we set the skin property to the color TransformedTexture, the mask property to the mask TransformedTexture, and the maskAlphaChannel to either r, g or b (we’ll pick r). The reason it doesn’t matter is because our mask is using black and white so either of the color channels is fine.
- Now we need a plane to display our video on so we drag one from the Media Library into the hierarchy renaming it “videoPlane”.
- With our plane selected in the Hierarchy we change it’s material property to the video material we created in step 10.
- We now just need to tell our video to play at some point during our experience, for ease of use we’ll use the existing ‘show’ script. With it selected in the Hierarchy we’re presented with a editor view where we can drag our video node (not the video plane or material but our original video node) into. We can drag it in above the parent show function and insert it as a variable then allowing us to call the start function on it within the show function.
- The final thing we want to do before previewing our experience is to select the snapshot image we used for guidance earlier and set it’s visibility property to false so this doesn’t appear within our experience. We do this by selecting it in the Hierarchy and navigating to the visible property in the Properties panel and unchecking it.
- We can now preview our experience by selecting the preview option in the top left and giving the resulting code a scan with the Zappar App!
You can take a look at our completed project here - AlphaVideo.zpp (1.6 MB)
Considerations
-
It may take some fiddling around with the scale and positioning of the TransformedTextures to get them lined up correctly, it’s helpful to click between the mask and color nodes to ensure they are lined up correctly.
-
The snapshot can be removed from the Hierarchy and project all together once you have positioned the TransformedTextures as it’s just used as a guide.
Any questions or issues with the tutorial let us know