> For the complete documentation index, see [llms.txt](https://docs.blippar.com/blippbuilder-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.blippar.com/blippbuilder-documentation/actions-and-events/introduction.md).

# Introduction

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.&#x20;

Refer the below articles:

* [Core features and benefits](#core-features-and-benefits)
* [How to Access](#how-to-access)
* [Quickstart Actions and Events](#quickstart-actions-and-events)
* [Result](#result)
* [Complex Example](#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.&#x20;
* 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 <img src="/files/2WxL1jU8wqfBCganFDB3" alt="" data-size="line">'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:

<figure><img src="/files/G8cDvsN3YwqvLEWvlUHK" alt=""><figcaption><p>Access Actions and Events</p></figcaption></figure>

## 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.&#x20;
* 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.&#x20;
* 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 <img src="/files/2WxL1jU8wqfBCganFDB3" alt="" data-size="line">'Toggle' icon from the top menu bar to access the **'Actions and Events'** flow designer.

<figure><img src="/files/lBF2PEM122ddkTgItd2e" alt=""><figcaption><p>Add Objects</p></figcaption></figure>

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:

<figure><img src="/files/uKgAOrUqs8K8J3yjsz9w" alt=""><figcaption><p>Event Node</p></figcaption></figure>

{% hint style="info" %}
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'.
{% endhint %}

* Drag and drop the **'Set Colour' a**ction node and define the objects as **'Cone'** from the object drop-down as shown below:

<figure><img src="/files/ZySK4uJ6PSfq48MJ8c0x" alt=""><figcaption><p>Action Node</p></figcaption></figure>

* Join the **'On Tap'** event node output to the **'Set Colour'** action node input.&#x20;
* Click the plane colour panel <img src="/files/9UtouNJa3EEt3EzqwiC9" alt="" data-size="line"> and select the required colour. For eg: RED
* Click **'Preview'**&#x20;

<figure><img src="/files/WgFGfH85rL9h2hOZOJeD" alt=""><figcaption></figcaption></figure>

## Result

'On Tap' of the 'Arrow' object, the colour of another object is updated as desired.&#x20;

<figure><img src="/files/OO1riFgUelCKs2QAYdEp" alt=""><figcaption><p>Preview</p></figcaption></figure>

{% hint style="success" %}
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'&#x20;
{% endhint %}

## 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.&#x20;

<figure><img src="/files/fvCMpdyoU2tmbLzHAwbR" alt=""><figcaption><p>Example Video</p></figcaption></figure>

## **Screen Resize** <a href="#screen-resize" id="screen-resize"></a>

There are multiple methods in which you can modify the screen size to enable the user to easily edit and create a desired flow of actions and events to the various 3D models, widgets, audio, video etc. inserted. The following are the options:

* [Maximise Screen](#a-maximise-screen)
* [Manual Screen Resize](#manual-screen-resize)
* [Targeted Screen Resize](#c-targeted-screen-resize)
* [Window See Through](#d-window-see-through)

### **a) Maximise Screen** <a href="#a-maximise-screen" id="a-maximise-screen"></a>

You can increase the space for designing various 'Actions and Events' by maximising the screen space. Follow the steps below:

* Click the ![](https://docs.blippar.com/~gitbook/image?url=https%3A%2F%2F749348736-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FQE63O5x3zPZ7UyVORwnh%252Fuploads%252FRGHXTwaON93qmRiwfQGt%252FScreenshot%25202023-10-18%2520at%25208.54.24%2520PM.png%3Falt%3Dmedia%26token%3Dbd0f82c9-8f8a-41ef-8e96-0b0ec977533a\&width=40\&dpr=4\&quality=100\&sign=1af1160b\&sv=1) toggle icon to access the 'Actions and Events' panel.
* To expand the 'Design Canvas', click ![](https://docs.blippar.com/~gitbook/image?url=https%3A%2F%2F749348736-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FQE63O5x3zPZ7UyVORwnh%252Fuploads%252F2KHbXfUcdc5eRo4KHRmb%252FScreenshot%25202023-10-18%2520at%25209.36.36%2520PM.png%3Falt%3Dmedia%26token%3D7211bcc3-100e-4dee-a0c7-5b9d875a6e2f\&width=13\&dpr=4\&quality=100\&sign=46601ebd\&sv=1) or ![](https://docs.blippar.com/~gitbook/image?url=https%3A%2F%2F749348736-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FQE63O5x3zPZ7UyVORwnh%252Fuploads%252FM409jYpv7TPYDoPPZTmn%252FScreenshot%25202023-10-18%2520at%25209.37.15%2520PM.png%3Falt%3Dmedia%26token%3De0fef501-3722-43c5-b040-d1925d5c85e7\&width=22\&dpr=4\&quality=100\&sign=aa3a7bf7\&sv=1)icon to increase space.

Refer image below:

<figure><img src="/files/2npOeNB7m9YSgHjTFG7K" alt=""><figcaption><p>Maximise Screen</p></figcaption></figure>

## **Manual Screen Resize** <a href="#manual-screen-resize" id="manual-screen-resize"></a>

You can manually resize the screen by using the expand icons from the side panels of the 'Actions and Events' tab as shown below:

<figure><img src="/files/mBpbINEJzuKM1erLlKdv" alt=""><figcaption><p>Manual Screen Resize</p></figcaption></figure>

### **c) Targeted Screen Resize** <a href="#c-targeted-screen-resize" id="c-targeted-screen-resize"></a>

You can choose various targeted screen resize options as mentioned below:

* Expand the 'Actions and Events' panel.
* Click the ![](https://docs.blippar.com/~gitbook/image?url=https%3A%2F%2F749348736-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FQE63O5x3zPZ7UyVORwnh%252Fuploads%252F9KfI6K9zdZ2lggLGq2jW%252FScreenshot%25202023-10-18%2520at%25209.43.47%2520PM.png%3Falt%3Dmedia%26token%3D9df8a457-29d2-47f6-ae9c-80b9e71ffeb1\&width=41\&dpr=4\&quality=100\&sign=113c3043\&sv=1) 'Screen Resize' from the top panel to access various targeted resizing options. You can choose to 'Maximise', 'Tile window to left' or 'Tile window to Bottom'.

Refer Image below:

<figure><img src="/files/2IBgHw3xBZEbo3SNekBM" alt=""><figcaption><p>Targeted Screen Resize</p></figcaption></figure>

### **d) Window see-through** <a href="#d-window-see-through" id="d-window-see-through"></a>

To enhance view of various 3D objects on the design canvas you can enable the 'Window see-through' option. This provides better visibility of the objects inserted behind the 'Actions and Events' panel.

<figure><img src="/files/qdRiBCvG7lDZg1egLsC1" alt=""><figcaption><p>See through Window Panel</p></figcaption></figure>
