← BACK

This article explains how to add a basic gesture to a scene that requires the user to interact with the demo. If needed, see also the video in the tutorial.

To add scene-to-scene transitions that require no user interactions, see Add Transitions. To learn how to create more sophisticated transition logic, for example, with multiple gestures, actions, and transitions added to the same area, see Advanced Transitions.

Tip: Use the following best practices in mind when adding gestures. See also What You Need to Know.

  • Keep your storyboard at hand and use it as a reference when adding actions and transitions.
  • Allow generous space for tapping gestures on the screen. Use full screen for swiping left or right.
  • To preview the video and see where to add the gesture, click Play at the bottom of Canvas View.
  • Name gestures to clearly identify the transition or action associated with them rather than gesture types. For example, “Player Turn 3 to Enemy Turn 3.” If you are planning to reuse the gesture, you may consider a more generic name.

To add a gesture to a scene:

  1. Go to Scenes and select a scene that requires a user interaction.
  2. Go to Elements, drag Gesture Area to the canvas and resize the bounding box to cover the appropriate section of the screen.
  3. In the Gesture Element Properties panel on the right, do the following:
    1. Enter a descriptive Name.
      The name of the gesture element in the Layers panel updates accordingly.
    2. Click Add Gesture to Area and select the desired gesture type.
    3. If needed, in the Actions section, click Add an Action. Select the desired action and in the displayed action menu, make the desired selections in the respective Media, Element, Counter, Trigger, and Text action menus.
    4. Depending on your design, in the Transitions section, click Add a Transition and in the To Scene list, select the next scene.
      If using triggers, skip this step and define your transition logic in the Events & Actions panel. For details, see Triggers.
  4. Save the project.
  5. (Optional) Click Path View to see the gesture transition.

The transition should appear as an arrow pointing from the current scene to the next scene. The gesture transition is indicated by the mini version of the scene where you added it. The gesture area, invisible to the user, appears in green in the transition. See also Path View.

Was this helpful?

Updated June 27, 2019
Tags: