Studio

Actions

Introduction

In this video, we're going to introduce Actions, a way to add interactivity to your ZapWorks Studio experiences without having to write any code.

Actions allow you to play timelines, activate states, take snapshots, launch websites and much more.

Following this simple example, you'll learn how to create an action for playing a timeline when the user taps on a button.

Project Breakdown

To allow us to focus solely on actions we're going to use a project put together earlier.

In the Hierarchy we have a 3D model of the earth tracked to a tracking image, followed by two images in a UI group tracked to the screen.

In the Controllers panel we have an earth controller with a spin timeline within it. This timeline alters the rotation of the earth model and if we play it we can see the earth spinning one complete rotation.

It's best practice to use states and timelines whenever you want to change a property during an experience. They allow you to preview animations within the tool as well as use actions to their fullest as we're about to see.

Adding an Action

This spin timeline is the one we want to activate when the user taps on the spin button.

We can do this by adding an action to the spin button node in the Hierarchy. Only certain node types support actions, for a full list of what nodes are supported as well as what events and functionalities are available, please see our Actions documentation page.

With the spin button selected in the Hierarchy we can add an action from the Properties panel by clicking the Add button in the Actions section. We're presented with a few options of what event we want the action to respond to, in this case we want to use the On Tap event. The following menu then lets us select what action we want to carry out, we're going to select Play Timeline.

Timeline Action Options

After selecting our action a new entry will appear within the Actions section stating first the event and then the action. For the Play Timeline property, we are presented with two drop-down boxes, the first showing a list of controllers and when a controller is selected, the second shows a list of available timelines within that controller.

We want to play the spin timeline which is located in the earth controller so we select those options from the dropdown menus. Beneath the dropdown boxes we also have two additional properties for timelines.

The From start option instructs the timeline to play from the start as opposed to continuing where it was last left at. The loop option replays the timeline after it finishes playing indefinitely. As we only want this timeline to play once and it is already at the start by default, we can leave these options unticked.

Previewing

We've now successfully created our first action and can preview our experience!

Conclusion

Hopefully, this mini-project has shown you the power of actions and you'll be adding them into your future projects.

Thanks for watching.

Open in new window