← BACK

In this tutorial, you will learn how to add gesture with transitions. These transitions occur only after the user interacts with the demo using the type of gesture that you specify.

You will add three gestures, one swipe and two tap gestures. You will iterate essentially the same steps three times—add a gesture area to a Loop scene, name the gesture element, select the type of gesture, and add a transition to it.

  1. Go to Scenes and select Move 1 Loop.
  2. Go to Elements, drag Gesture Area to the canvas and resize it to cover the entire screen.
  3. On the Properties tab on the right:
    1. Name the gesture Move 1 Loop to Move 1 Action.
    2. Click Add Gesture to Area and select Swipe Left.
    3. Click Add a Transition and in the To Scene list, select Move 1 Action.
  4. Repeat the following steps twice to add the appropriate tap gestures.
     

    Tip: The steps are identical for the Move 2 and Move 3 scenes. First, compete the steps replacing # with 2 for Move 2 scenes. Then, do the same but replace # with 3 for Move 3 scenes.

    1. Go to Scenes and select the next Move # Loop.
    2. Go to Elements, drag Gesture Area to the canvas, position and resize it as appropriate, for example, to cover the Play button image in the center for Move 2 or the Jack of Spades card for Move 3.
       

      Tip: To see where to place the gesture, refer to the storyboard or play the video to preview it.

    3. On the Properties tab on the right:
      1. Name the gesture Move # Loop to Move # Action.
      2. Click Add Gesture to Area and select Tap.
      3. Click Add a Transition and in the To Scene list, select Move # Action.
  5. Click Path View and make sure that the three transitions are set correctly, with the image labels on the transition arrows, and all scenes are connected sequentially.
  6. Save your project.

Was this helpful?

Updated June 27, 2019