Opening Transition: Breaking a Target Image Apart


#1

https://zapworksforumuploads.s3-eu-west-1.amazonaws.com/augmented_portal_ot_ns.mp4

You can scan the tracking image with zapcode below to test it out. :slight_smile:
target-image-AP

Difficulty Level: Beginner

Coding Knowledge Required: Beginner

Time to Complete: 10-15 minutes

In this step-by-step tutorial, we will create an AR experience’s opening transition consisting of an experience’s target image breaking apart.

To show you how to add this opening transition to an existing project we’ve built it on top of the Augmented Portal step-by-step project available in the ZapWorks documentation.

To discover how to create this opening transition, take a look below.

Prefer to look at the final version? Download the completed project here! :slight_smile:



We’ve decided to give users the illusion of 2 doors sliding away from each other, progressively revealing the inside of a room.

Using Photoshop we’ve horizontally split the target image into 2 images, a top and a bottom one. After importing these images into Studio, we’ve created a timeline to animate the opening transition and we’ve set it to play when the target image is detected, that’s it! Click here to download a zip file containing the images and the project’s zpp file. Once the file has been downloaded, unzip it.

  1. Open Studio and import the Augmented Portal project’s zpp file previously downloaded. If you’ve already built this experience, you can open the project directly.

  2. Import the top and bottom images previously downloaded into the Media Library.

  3. In the Hierarchy, within the target image node, add a new group called ‘target image cover’ and place it under the ‘Scene Ornaments’ group.

Note: To add a group inside a node, right click on the node, select ‘New > Group’ and name the new group.

augmented_portal_ot-step3

  1. Drag ‘target-image-top.jpg’ from the Media Library into the Hierarchy within the ‘target image cover’ group. For the ‘target-image-top.jpg’, set:
    • The layer mode to test_3d,
    • The position to (0, 0.5, -0.01),
    • The scale to (1, 0.5, 1).

Note: To change the value of an object’s property (scale, position, rotation, color etc.) select the object in the Hierarchy and in the Properties panel change the value of the property.

augmented_portal_ot-step4

  1. Drag ‘target-image-bottom.jpg’ from the Media Library into the Hierarchy within the ‘target image cover’ group. For the ‘target-image-bottom.jpg’ node, set:
    • The layer mode to test_3d;
    • The position to (0, -0.5, -0.01);
    • The scale to (1, 0.5, 1).

augmented_portal_ot-step5

  1. Create a new controller called “opening transition”.

Note: To create a controller, in the Controllers panel, click on the ‘+’ icon next to ‘Controllers’, select ‘New Controller’ and name it.

  1. Create a standalone timeline called ‘animation’ for the ‘opening transition’ controller. Set the length of the timeline to 4000.

Note: To add a standalone timeline to a controller, right click on the controller, select ‘New Timeline’ and name it. To change the length of the timeline, in the timeline panel, update the value next to ‘Length’.

augmented_portal_ot-step8

Note: We recommend that you use the zoom in/out tool to make sure you see the entire timeline (between 0 and 4000ms).
augmented_portal_ot-step8note

  1. Add to the ‘animation’ timeline the position property of the ‘target-image-top.jpg0’ node.

Note: To add an object’s property to a timeline, select the timeline in the Controllers panel, in the Hierarchy select the object and in the Properties panel click on the ‘+’ button next to each property that needs to be added to the timeline.

  1. In the ‘animation’ timeline, set the ‘Time’ (not Length) to 4001ms and change the value of the ‘target-image-top.jpg0’ node’s position to (0,3,-0.01).

Note: To change the value of a node’s property in a timeline, make sure the correct timeline is selected in the Controllers panel, and that in the Hierarchy the correct node is selected as well. You can then edit the node’s property value in the Properties panel.

augmented_portal_ot-step10

11)In the ‘animation’ timeline, on the ‘target_image_top.position’ line, create a transition block between the first and last keyframes.

Note: To create a transition block between two keyframes, select both keyframes, right click on the line between them and select ‘Make Transition’.

augmented_portal_ot-step11

You can set the ‘Time’ to 0 and play the timeline to see how the transition looks so far.

We will now repeat this process for the bottom part of the target image:

  1. Add to the ‘animation’ timeline the position property of the ‘target-image-bottom.jpg0’ node.

  2. In the ‘animation’ timeline, with the time still set to 4001ms, change the value of the ‘target-image-bottom.jpg0’ node’s position to (0,-3,-0.01).

  3. In the ‘animation’ timeline, on the ‘target_image_bottom.position’ line, create a transition block between the first and last keyframes.

augmented_portal_ot-step14

You can set the ‘Time’ to 0 and play the timeline to see how the transition looks.

To give the illusion that, as the top and bottom parts of the tracking image slide in opposite directions light progressively enters the room and illuminates its content, we will make the color of the ornaments change from black (as if there were not light) to normal (as if light had entered the room).

  1. Add to the ‘animation’ timeline the color property of the ‘Scene Ornaments’ group.

  2. In the ‘animation’ timeline, set the time to -1 and change the value of the ‘Scene Ornaments’ group’s color to black (in the Color Picker window, make sure Normalised is set to R = 0, G = 0 and B = 0).

  3. In the ‘animation’ timeline, on the ‘Scene Ornaments.color’ line, create a transition block between the first and last keyframes.

augmented_portal_ot-step17

You can set the ‘Time’ to 0 and play the timeline to see how the transition looks now. It’s almost ready!

We will add a delay at the beginning of the timeline to make sure the user has time to see the tracking image on their device screen before the transition starts happening.

  1. In the ‘animation’ timeline, set the time to 1000ms (we’ve chosen to launch the animation after 1 second, but feel free to change this value!). For each property line, move the second keyframe from Time = 0ms to the cursor (red vertical line positioned in Time = 1000ms).

augmented_portal_ot-step18

You can set the ‘Time’ to 0 and play the timeline one more time to see how it looks.

The opening transition is ready and all you need to do now is set it to play!

We’d like the transition to start playing when the tracking image is detected. Consequently, we’ll need to trigger it when a target image’s ‘seen’ event occurs (for more info, see the Target Events section in the article linked here).

  1. Add a ‘seen’ script to the target image node.

Note: To add a ‘seen’ script to a target image node, right click on the target image node in the Hierarchy and select ‘New > Script > seen’.

  1. Set the ‘animation’ timeline to play within the ‘seen’ script.

Note: To set a timeline to play within a script, drag the timeline from the Controllers panel into the script, inside the function and when releasing select ‘play’.

augmented_portal_ot-step20

The opening transition has been added to your experience and is now set to play as soon as the tracking image is detected! :slight_smile: You can preview the updated experience by clicking the ‘Preview’ button in the top left of ZapWorks Studio. Scan the temporary zapcode generated and once the experience has been loaded, place the tracking image in front of the camera of your device.

target-image-AP


unlisted #4