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