Actions and Events

How to connect different parts of your prototype to create advanced interactions

Actions

Actions are commands that get executed in the prototype for example when user taps an element or as part of a transitions. This allows you to build interaction and navigation and also create more complex timed sequences.

There are three types of actions:

  • Open a web link like an url or a mailto-link in the default app of the device.
  • Move to a new page of the prototype.
  • Send an event to a different element in prototype.
To create an action click on the action property of an element or a transition to open the editor. You can select if you want to open a link, move to a new page or send an event and enter the parameters.
tutorials

Events

Events are like messages that can be sent from one element to another that will trigger a transition or a feature of the same if they exists. You can use events to create transitions that trigger on global events like tapping an element or you can send events to trigger features like playing an animation or a sound. Events are also recursive, i.e. when you send an event to element, also all the child elements of it will receive the event.

Global Events
Currently the following global events are supported:
  • OnTap - When a group is tapped by user. Happens only when group is tappable, i.e. some tap action is defined.
  • OnShow - When a group is enabled, specifically before navigating to a new page. It can be used e.g. to initialize transitions states like move, zoom or fade.
  • OnHide - When a group is disabled, specifically after navigating away from a page. It can be used e.g. to reset transitions states like move, zoom or fade.
  • OnPageEnter - Transition to move in a new page defined either at page root or at the Layout-group.
  • OnPageExit - Transition to move old page out defined either at page root or at the Layout-group.
  • OnTouchStart - When user starts touching a group similar to the hover event in HTML.
  • OnTouchEnd - When user stops touching a group similar to the hover event in HTML.
Smart Content Events
Different types of Smart Content can have custom events for triggering features.