Bringing images to life with video
In this video, we're going to take a look at a cool piece of functionality using the Designer tool, where you grab the first frame of a video and have it as your tracking image. We’ll overlay the video on top of the image so when you scan the code it looks like the image is coming to life with the video.
There are a couple of different scenarios this can be used in, either having part of your tracking image display the video, similar to the Harry Potter wanted posters coming to life. Or you can have the whole tracking image display your video. We're going to do the latter.
2. Asset Preparation
There are a few steps of preparation, the first step is to head over to my.zap.works and create a new Designer code. We’ve created a Designer code already and we’ve downloaded the code so we can create our tracking image with it.
The main piece of content we’re going to need is the video which we’re bringing to life, in our case we have a simple video filmed at the office for the holidays.
Finally, we need the first frame of the video as an image file. There a few different ways to obtain this automatically depending on what tool you're using. Premiere Pro has a way of exporting a screenshot for a single frame of video as well as some media players, such as VLC. Alternatively, you can just take a screenshot.
3. Creating the Tracking Image
The first thing we’re going to do with our zapcode and the first frame of the video is to create a tracking image. Taking the code and putting it onto our image can be done in any photo editing software, on our Mac we’ve used the Preview app.
We open both images with Preview and, with the code selected, we can click ‘Edit > Select All’ then copy and paste it onto our video screenshot image.
We’ll scale down the code keeping it big enough so that it's easy enough to scan but small enough so that it doesn’t take up too much on the image. After placing the code in the bottom left-hand corner, we can save our tracking image. It’s worth mentioning that for a polished experience we would also want to include a “call to action” on the tracking image, explaining what users need to do (i.e. download the Zappar app and scan).
4. Uploading the Tracking Image
We’re now ready to go back to my.zap.works and create our experience. We’re going to click on the Designer code that we created in preparation for this experience and then ‘Edit zapcode content’.
As this is the first time we’re editing the content it's going to ask us to download the zapcode so we can then upload the tracking image. As we’ve already got our zapcode we can hit continue on this step and upload the tracking image we just created.
Zappar will then analyze the tracking image to make sure that the correct code is found, as well as the image having good areas of contrast. Our image here has good detail and contrast so it should work well. For more information please see the 'What makes a good tracking image?' article. After clicking to use the tracking image it will appear in the canvas view of Designer.
5. Uploading the Video
We now want to add our video so we click the ‘Video’ content button on the right-hand side and then select ‘Upload your own video’. After finding our video, it will be uploaded and then zappified, this is where ZapWorks converts it into a format suitable for mobile phones. This can take a few moments depending on how big the video file is and how fast your internet connection is. Once this is done we should see the video appear in the center of the canvas view.
We can click and drag:
- on the video to move it around,
- the corners to size it up and down
- and the top square to rotate it.
6. Positioning the Video
We want to make sure that the video is the same size as the tracking image so it matches exactly when augmented on the physical image. We can roughly line the video up with the bottom left corner of the tracking image in the canvas view and then scale it up to cover the image completely.
If your video is a different aspect ratio or resolution compared to the tracking image, you can always lock and unlock scaling which allows you to scale the width and height of the video separately.
There is also the grid functionality which creates a grid that you can scale and move. Enabling the 'Snap to grid' checkbox then makes it easier to line content up.
7. Editing the Video Properties
Before we preview our experience there are a few properties of our video we want to edit. If we click on the video and then scroll down to the properties panel we're presented with a number of options.
When the code is scanned and the tracking image is first seen we want to make sure the video plays straight away so it looks like it's coming to life. For this, we check the ‘Play on start’ checkbox.
We’re also going to loop our video so that it replays after finishing, and hide the video controls as we don’t want the end user pausing the video.
Now we are ready to preview our experience by clicking the ‘Preview’ button. This generates a temporary code that we can use to scan alongside our tracking image to preview our experience on a device.
9. Next Steps
This completes our tutorial on bringing an image to life using a video in Designer. You could expand upon this project to add multiple scenes and additional content and interaction after the video plays.
We hope this video was insightful, for more information on the Designer tool please take a look at our documentation.
If you have any issues feel free to get in touch, we're firstname.lastname@example.org.