Exercises: Events and interactions

Check out the examples below and learn how to build common UX/UI interactions with events in Justinmind.

You’ll use the Events dialog to define triggers, which are how you interact with a prototype (click, mouse over, etc.) and actions, which are what happens after the trigger (change color, move, etc.).

You can visualize all of the interactions you create by simulating your prototypes.
Click the play button to simulate a prototype

Swipe through screens

Use Gesture triggers and transition effects to build smooth and lifelike screen navigation.
Swipe between screens simulation

  1. Create a mobile or tablet prototype with two screens.Create a prototype with 2 screens
  2. Go to Screen 1 and double-click on the Canvas, or select the screen in the Layers palette. This will select the base screen Canvas.Select the base screen by clicking on it in the layers palette
  3. Look to the Events palette and click ‘Add event’, which will open the Events dialog. This is where you’ll build the link between screens.Click add event in the events palette
  4. From the ‘Choose Trigger’ dropdown, hover over the Gestures section and pick the On Swipe Left trigger.Pick the on swipe left trigger from the trigger dropdown
  5. You’ll see the ‘Choose Action’ dropdown appear next. Click on it and choose the Navigate To action.Choose a navigate to action from the actions dropdown
  6. Choose Screen 2 from the list of screens below. Then, select the ‘Slide left’ transition effect. Click ‘OK’ to finish building the event.Select screen 2 and add a swipe left condition from the dropdown
  7. Go to Screen 2 and select the base screen. Go to the Events palette and click ‘Add event’.
  8. Pick an On Swipe Right trigger and a Navigate To action, and choose Screen 1 to link to. Add a ‘Slide right’ transition effect, and click ‘OK’ to finish building the event.Choose an on swipe right + navigate to action on screen 2 and link to screen 1 with a slide right effect

You should now have two events in total – one on Screen 1 that links you to Screen 2, and one on Screen 2 that links you to Screen 1.

Click the ‘Play’ button to simulate your prototype and check out how you can swipe between the screens.

Download this example.

Hide content

Next, you’ll learn how to create events to hide elements on the screen.
Hiding content example

  1. Place a Button B and an Image I on the Canvas and style them as preferred. You can find them in the Toolbar.

    Label the button “Hide image”.
  2. Select the “Hide image” button, go to the Events palette and click “Add event”.Click add event with the hide image button selected
  3. Follow the steps below to build the event:
    Creating the hide event

    • a. From the Trigger dropdown, hover over the Tap section and pick an On Tap trigger.
      Note: if you’re using a Web prototype, On Tap will be listed as On Click instead.
    • b. From the Action dropdown, pick the Hide Element action. You’ll then see a preview of the Canvas appear.
    • c. This is where you can select the target of the action – the element that you want to hide when you tap on the “Hide image” button. Select the image you created earlier. Click ‘OK’ to finish building the event.

Click the ‘Play’ button to simulate your prototype. Tap the “Hide image” button and see how the image disappears.

Download this example.

Mouse-over effects

In this exercise, you’ll learn how to create an On Mouse Over event and change the appearance of a button.
Mouse over example

  1. Create a new Web prototype. Mobile and Tablet prototypes won’t work for this example since you can’t mouse over a touch screen.
  2. Place a Button B on the Canvas and style it as preferred.
  3. With the button selected on the Canvas, go to the Events palette and click ‘Add event’.
  4. Follow these steps to build the event:
    • a. From the Trigger dropdown, hover over the Mouse section and choose the On Mouse Over trigger.
    • b. In the Action dropdown, pick the Change Style action.
    • c. Select the button as the target of the action in the Canvas preview. You’ll see a dropdown appear below where you can specify the styles of the element you’d like to change.

    For this example, change the background color.

  5. Click ‘OK’ to finish building the event.

Click the ‘Play’ button to simulate your prototype. Mouse over the button and see how it changes color. Move your mouse away and you’ll see the button revert back to its original color.

Download this example.

Drag and drop

You can also create interactions to drag and drop elements on the Canvas. Here’s how:
Drag rectangle example

  1. Place a Rectangle R on the Canvas and style it as preferred.
  2. With the rectangle still selected, go to the Events palette and click ‘Add event’.
  3. Follow these steps to build the event:
    • a. From the Trigger dropdown, hover over the Mouse section (On Tap for Mobile/Tablet) and choose the On Drag trigger.
    • b. In the action dropdown, select the Move element action.
    • c. You’ll see a Canvas preview appear, where you can choose the rectangle as the target of the action.
    • d. Look to the bottom of the dialog, where you’ll now find two dropdowns where you can define where you want to move the rectangle when you drag it.

      Click on the X (horizontal movement) dropdown and select the ‘With cursor’ option.

      Click on the Y (vertical movement) dropdown and select the ‘With cursor’ option as well.

      Both of these options will allow you to move the rectangle with your mouse when you simulate. Tap ‘OK’ to finish building the event.

Click the ‘Play’ button to simulate your prototype. Start dragging the rectangle to move it around the screen. Drop the rectangle to stop its movement.

Download this example