Introduction
Learn features and benefits of Actions and Events
Last updated
Learn features and benefits of Actions and Events
Last updated
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:
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.
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:
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.
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:
Drag and drop the 'Set Colour' action 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 'Preview'
'On Tap' of the 'Arrow' object, the colour of another object is updated as desired.
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'
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.
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:
You can increase the space for designing various 'Actions and Events' by maximising the screen space. Follow the steps below:
Refer image below:
You can manually resize the screen by using the expand icons from the side panels of the 'Actions and Events' tab as shown below:
You can choose various targeted screen resize options as mentioned below:
Expand the 'Actions and Events' panel.
Refer Image below:
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.
Click on the 'Toggle' icon from the top menu bar to access the 'Actions and Events' flow designer.
Click the plane colour panel and select the required colour. For eg: RED
Click the toggle icon to access the 'Actions and Events' panel.
To expand the 'Design Canvas', click or icon to increase space.
Click the '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'.
