Opening Transition - Bouncing 3D Model

Scan the image above with the Zappar app to see the completed project. For the best experience print this image and lay it flat when scanning.

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 a 3D model falling from the sky and bouncing when landing on the target image.

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

Download the completed project.

All that we’ve done in this project is create a timeline to animate the 3D model and play an audio file within Studio.

Click here to download a zip file containing all the assets we'll need for this experience.


Step by Step

1. Setting up your project

Open Studio and import the Streaming Video in the 3D View project’s zpp file previously downloaded. If you’ve already built this experience, you can simply open it in Studio.

You will also need to import the audio file.

2. Add the audio file to the Hierarchy

Drag the audio file from the Media Library on the root node in the Hierarchy.

3. Create your controller

Create a new controller called “opening transition”.

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

4. Create your animation timeline

Create a standalone timeline called “animation” for the ‘opening transition’ controller. Set the ‘Length’ of the timeline to 2000 ms.

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’.

We recommend that you use the zoom in/out tool to make sure you see the entire timeline (between 0 to 2000 ms).

5. Set the position of the TV group

In the ‘animation’ timeline, set the ‘Time’ (not Length) to -1 ms and change the value of the ‘TV Group’ node’s position to (-0.21, 0.1, 5).

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.

Using timelines is a key component of creating AR experiences using ZapWorks Studio. In this step, we use time -1 ms to define the state in which an object will be found before the start point. This is also the state the that object will return to after it has been reset. To find out more about timelines, check out the article linked here.

6. Create a transition block

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

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

You can set the time back to 0 ms and play the timeline to see how it looks.

7. Add an ease out bounce effect to your timeline

To add an ease out bounce effect to a timeline, in the Controllers panel make sure the timeline is selected and in the timeline panel, right click on the transition block and select ‘Interpolation > bounce > easeOutBounce’.

Set the time back to 0 ms and play the timeline again to see the effect created.

8. Add the audio to the timeline

In the ‘animation’ timeline, set the time to 727 ms. In the Hierarchy, right click on the ‘TV_bouncing.ogg0’ node and select ‘Add Timeline Action > start’.

You will see that the audio file is set to play as soon as the TV is landing on the target image.

When playing a timeline with audio file(s) in Studio, the audio files do not play. The only way to test the timeline with audio file is to preview the experience.

9. Play the transition when the target is seen

The timeline is now ready to be set to play. We’d like the transition to start playing as soon as the tracking image is detected. Consequently, we’ll need to trigger the transition to play when a target image’s ‘seen’ event occurs (for more info, see the Target Events section in the article linked here.

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

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’.

10. Set the animation to play

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

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’.

The opening transition has been added to your experience and is now set to play as soon as the tracking image is detected. However, there is something we’d like to change in order to improve the user experience. The video is currently set to start as soon as the experience is launched and plays while the video is bouncing but we’d like it to start playing only when the TV has finished bouncing.

11. Uncheck autoplay on the video

In the Controllers panel, click on ‘base’. In the Hierarchy, click on the ‘videoplayer0’ node and in the Properties panel, uncheck the box next to ‘autoPlay’ in the ‘References’ section.

12. Delay the start of the video

We will now set the video to play when the ‘animation’ timeline has finished playing.

To do so, open the target image’s ‘seen’ script. In the script, under the ‘seen’ function, add a ‘complete’ event handler for the ‘animation’ timeline.

To add a timeline’s complete event handler, drag the timeline from the Controllers panel into a script and when releasing select ‘Add an event handler > complete’.

13. Insert audio node to on complete function

Drag the ‘videoplayer0’ node from the Hierarchy into the script at the top, before the function and when releasing, select ‘Insert local variable’. Within the animation timeline’s ‘on complete’ function, add: videoplayer0.nodes.control.start();

Congratulations!

The video is now set to start as soon as the opening transition has finished playing. 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.

Suggested Next Steps

  • Think about where else you could add a transition and how you could add them to your projects

Further Reading

To learn more about the concepts covered in this tutorial, please see the following pages:

zapcode branded_zapcode i