# 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. 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. * 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:

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

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:

{% 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:

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

{% 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' {% 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.

## **Screen Resize** 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** 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:

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

### **c) Targeted Screen Resize** 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:

### **d) Window see-through** 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.

--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.blippar.com/blippbuilder-documentation/actions-and-events/introduction.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.