Introduction

Learn features and benefits of Actions and Events

Blippbuilder launches the all new 'Actions and Events' feature to enable users to create complex AR experiences easily by using nodes, variables and a drag and drop interface to trigger an action or an event on an object without any coding.

Refer the below articles:

• Core features and benefits

• How to Access

• Quickstart Actions and Events

• Result

• Complex Example

Core Features and Benefits

• Easily create complex AR experiences without any coding in a single scene. It provides an Intuitive flow chart-like layout where different objects in the scene can be controlled independently. Allows for looping and branching within the scene for easy sequencing, flow-control and is extendable for adding multiple feature sets.

• Enables the user with complete control of the various events and actions that could be applied for the objects and completely customisable. It provides a simple drag and drop interface allowing users to easily connect various vectors, variables, actions and events.

• Build along interface with powerful in-app preview feature allowing customization before publishing the experience.

• Dynamic in nature allowing easy options for modifications or design change.

How to Access?

In order to access the 'Actions and Events' feature follow the steps below:

• Login to the Blippar Hub, navigate to Blippbuilder and create a new project.

• Choose the type of experience you would like to create: Surface, Marker or Gyro.

• Provide a name for the project and click 'Next'.

• You will be redirected to the Blippbuilder Design Canvas.

• Click on the 'Toggle' icon from the top menu bar and the 'Actions and Events' flow designer will pop-up in the bottom panel. You can resize the tab based on need as shown below:

Access Actions and Events

Quickstart Actions and Events

Follow the steps in this section to create a simple AR experience using 'Actions and Events' on 3D objects:

• Login to Blippar Hub, navigate to Blippbuilder and create any type of project.

• Add any 3D object from the in-built 3D library available in the left panel of the Design Canvas. For eg: Add 'Cone' and 'Arrow' 3D objects.

• Select the 'Arrow' and define as GREEN, from the basic properties on the right panel of the Design Canvas. Similarly, select the 'Cone' and define the colour to AMBER.

• Click on the 'Toggle' icon from the top menu bar to access the 'Actions and Events' flow designer.

Add Objects

Now to trigger an event, 'On Tap' of the 3D object 'Arrow' to initiate an action 'Change/Set Colour' of 3D object 'Cone' follow the steps below:

• Expand the 'Actions and Events' flow designer.

• Drag and drop the 'On tap' event node from the right panel and select the object as 'Cone' from the drop-down as shown below:

Event Node

In case, you have selected the 3D object before you open the 'Actions and Events' flow designer, the selected object will appear in the drop-down when you add the Event 'On Tap'.

• Drag and drop the 'Set Colour' action node and define the objects as 'Cone' from the object drop-down as shown below:

Action Node

• Join the 'On Tap' event node output to the 'Set Colour' action node input.

• Click the plane colour panel and select the required colour. For eg: RED
• Click 'Preview'

Result

'On Tap' of the 'Arrow' object, the colour of another object is updated as desired.

Preview

Result: The preview will display the event 'On Tap' of the object 'Arrow' will immediately change or 'Set Colour' of another object in the same scene 'Cone'

Complex Example

In the below example, using 'Actions and Events' to create a 'Menu' like option using various animation effects and objects is fast, easy and requires no code.

Example Video