Introduction Video

Designer

Introduction Video

1. Introduction

In this video we're going to introduce you to the Designer, which gives you complete control over how your content is displayed and allows you to stick your content to an image of your choice.

Notice how the content tracks with the card.

2. Downloading a Zapcode

The first step, having created a Designer code from the new zapcode page and selected it, is to add the zapcode to the image you'd like to track. You can download the code by selecting 'Edit Zapcode Content' and clicking the 'Download Your Zapcode' button.

This will take you to a selection of zapcode designs which you can choose from, and then download as either a .PNG or .SVG file.

3. Editing and Uploading a Tracking Image

We've used Mac's Preview app to add our code to the corner of our image but you can use whichever image editor you like.

Upload the final image by dragging from your desktop or with the upload button.

ZapWorks will analyze your image to ensure it will work well with the Designer. It will look for good contrast and detail across the image, as well as the correct zapcode ensuring that the image tracks solidly and provides a good user experience.

4. Designing Content

After confirming your image, ZapWorks will start processing it for use in the app. While this is happening you can start designing your content.

In the ZapWorks Designer you will see your target image on the left and a list of content possibilities on the right.

To add a piece of content, select an item from the list. In this example we're going to add a video, you can upload a video, or select one you have used recently.

5. Zappifying

New videos will be zappified - this is ZapWorks converting the video into a format suitable for the app. It may take a few minutes but once complete your video will appear on the view to the left.

6. Positioning Content

You can position your content on the target and change its scale and rotation by clicking and dragging. Alternatively, you can also use the text boxes in the upper left to set the width, height, x and y pixel values of your content.

7. Adding Additional Content

We are going to add another item. This time a button to allow the recipient of the card to choose a gift from amazon.

From the actions area at the bottom of the screen you can indicate what should happen when the user taps the button. In this case we're going to link to Amazon.com.

Once you've added and customized your content, tap the Publish button.

When the process is complete users will be able to scan your code and interact with your content.

8. Next Steps

The ZapWorks Designer has a number of additional features that you may find useful, as well as a number of options that differ depending on content type. For more information, check out the Designer documentation.

If you're looking to create more sophisticated experiences with a greater range of content and customization, including 3D models and gyroscope-oriented environments, check out ZapWorks Studio. You can find more details, including an introductory video in the Studio documentation.

Open in new window