Introduction Video

Studio
Search tags:
Studio

    Introduction Video

    1. Introduction

    This video tutorial introduces ZapWorks Studio and demonstrates the creation of a simple Zappar experience.

    Once you have watched the video, we recommend you continue by reading the Getting Started guide:

    2. Downloading

    You can download ZapWorks Studio from the following page:

    ZapWorks Studio Download Page

    3. Starting a Project

    ZapWorks Studio includes a number of panels:

    The Hierarchy
    It's a tree of all the things that make up our experience, be they objects, scripting nodes, sounds or groups. We call these things in the Hierarchy "nodes".
    The 3D View
    Your content will appear here but it's empty when you start a new project.
    The Media Library
    It's a toolbox that contains all of the source files that we can use in our Hierarchy and contains things like images, 3D models, sound files, etc.

    4. Adding a Plane

    All new projects start with one entry in the Media Library, the plane. It's a flat, square, object that we can use to place images into our experience.

    We can add a new plane into the Hierarchy by dragging it from the Media Library. Here we add it into the topmost group in our project, the root node. Once dropped the plane appears in the 3D view.

    With the plane node selected its position can be changed using the controls in the 3D view. There are also controls for changing scale and rotation.

    These properties, and many others, can be changed directly from the Properties panel below the Hierarchy.

    5. Adding an Image

    Images can be imported into ZapWorks Studio by dragging from our computer into the drop area at the top of the Media Library.

    With the plane in our Hierarchy selected, the materials property can be changed to the image that we've dragged in.

    6. Adding Interactivity

    We're going to add some interactivity by right clicking on the plane in the Hierarchy and adding a new event, in this case pointerdown. This event allows us to write some script that will run when the user taps on the plane with their finger or mouse pointer.

    We will keep things simple and make the plane disappear when tapped on. To do this we:

    1. Drag the plane from the Hierarchy into the top area of the event, this gives us a variable to modify the plane with.
    2. In the return function we can change the visible property of the node by typing the following:
    plane0.visible(false);

    You can return to the 3D view by selecting one of the other nodes in the Hierarchy.

    A lot can be done with ZapWorks Studio's scripting support, the documentation has reference material and a number of articles that should get you up and running with it.

    Once such relevant article here is the Scripts article from the getting started section.

    7. Previewing

    Let's now try this on the device.

    We hit the preview button in the top left of ZapWorks Studio, it uploads the content to Zappar's servers and then gives us a temporary zap code that we can scan with the Zappar app.

    The content appears on the device and if we tap the image it disappears.

    You can download the Zappar App from the following places:

    8. Tracking

    So far the content has appeared flat on the device so let's incorporate some augmented reality and have the content track from an image, we will do this in a new project.

    For this we have a pretend restaurant flier which with have in .JPG form on the computer and have also printed out to test on.

    Using the '+' button in the Media Library we can select 'Train Image File' and pass in the file we'd like to train up. It takes a little while for the Studio to analyse the image but once it has done so it appears as an entry in our Media Library. Images trained up for augmented reality are known as 'targets'.

    If we drag the target into the Hierarchy it appears in the 3D view and we can look around the target using the tools in the bottom right of the view.

    From here we can:

    1. Drag a plane from the Media Library onto our target node and scale it down so we can see the target underneath it. You'll notice the plane moves with the target in the 3D view, like it will do on the device.
    2. Drag in a custom made button image to the Media Library and set it as the material for the plane (and scaling it to the right proportions).
    3. Add a pointerdown event to the plane, within here we will add the following code to direct the user to our website:
    Z.device.launchUrl("http://www.zappar.com");

    Now we can hit preview and see the content follow the flier as we point the camera at the print out and move it around. Tapping on the button will then take us through to the website.

    9. Next Steps

    That's a whistle-stop introduction to ZapWorks Studio, there's more to the tool than we've been able to cover in here so please do give the documentation a good read through. We recommend you continue by reading the Getting Started guide:

    We're excited to see what you can produce with ZapWorks Studio so let us know how you get on by contacting us at: support@zappar.com

    Open in new window