Events and interactions

Create fully-functional web and mobile prototypes by defining UI element interaction. This tutorial will explain how to do so using events, a key Justinmind feature.

Making UI elements interactive with events

An event interaction consists of:

  • An event trigger: how the user engages with the interface (e.g. a click, or mouse hover)
  • An action: the result of the event trigger (e.g. navigating from one screen to another, or changing the properties of a UI element).

You can add multiple event interactions to the same UI element. For example, you can click on a rectangle and change its border, and you can also swipe left on the rectangle and rotate it.

You can also add multiple resulting actions to the same UI element. For example, you can click on a rectangle and change its color, and then move that rectangle to a different position on the screen.

Adding an event to a UI element

An event is created by selecting a UI element, which will be the source of the event trigger.

To add an event, select the UI element you wish to add an event to, go to the Events palette and click “Add event”.

add event

In the dialog that appears, you can define the event trigger and action:

Events Dialog

  1. Select the event trigger from the drop-down menu on the left
  2. Select an action from the drop-down menu on the right
  3. Select the target UI element that the event trigger will apply to from the Canvas, or select it in the Outline palette (highlighted in the image). You can zoom in on the Canvas at the top of the Events dialog to see which UI element you’re selecting more closely
  4. Select the action’s specific resulting changes. Depending on the action, this may be a visual property or a numeric value

Once you’ve created your event interaction, click “OK”. It will appear in the Events palette.

The Events palette

In the events palette, you can see the events you’ve created so far, as well as other operations to modify your events.

Events Palette Simple

  1. Click on this to add a new event.
  2. These are the events you have created.
  3. These are the interactions you have created. You can rename them if you’d like.
  4. These are the actions you have created so far.

Action operations

You can modify actions one by one or as a group.

To select an individual action, click it. A blue border will appear around the action when selected. To select a group of actions, hold down the Control key (or Command key for Mac) and select them with the mouse.

action operations

You’ll then be able to add another action, modify the selected action, move its position left or right, or delete the action.

The sequence of actions in an interaction

By default, actions will run in the order in which they have been created. However, you can reposition actions and re-order them by dragging and dropping them into place, or shifting them left or right (see above section “Action operations”).

You can also change the way actions run by defining their position. Click on arrow and a few options will appear:

Sequence of actions

  1. This option will maintain the default order of the actions
  2. You can make the actions run at the same time
  3. You can define a delay in milliseconds before the next action will run