← BACK

The Path Mode lets you create a multi-directional swipe with a series of predefined stop points, transitioning to different scenes until the user lifts the finger.

With this complex gesture, you can produce a trailing effect as the user moves the finger on the screen, changing direction and scene at each stop point.

Tip: You can use Path Mode in combination with Angle Mode, which in addition to the direction of the movement also allows you to define its speed. Just add both types to the same gesture area.

Below are generic steps for creating a Path gesture.

If you want to test the steps and try this type of gesture, start with the additional Create a Full Experience instructions to create a project. For a complete tutorial with sound effects and other features, see Academy tutorials.

How to Create a Path Gesture
  1. (Optional) If you want to preview a sample project, download the files and create the project as described in Create a Full Experience.
  2. From the Elements panel, drag the Gesture Area element to the current scene and define its Name and Placement properties. If needed, see Add Gestures for details.

    Note: To allow generous space for swiping, resize the gesture bounding box to cover the entire screen.

  3. In the Properties panel, click Add Gesture to Area and select Path Mode.
    The scene on the canvas becomes darker, while the mouse cursor appears with a green circle and a plus sign attached to it. This is Path Mode view.
  4. Starting at the beginning of the path that you are defining and proceeding in the order you expect the user to swipe, click each turning point sequentially to add a stop to it.
    A numbered bounding box appears under each point you click, for example:

  5. Resize and place each bounding box as desired on the screen.
  6. In the Properties panel, click Exit Path Mode.
  7. Define scene transitions for each stop to form a continuous path.
    For example:

  8. Save the project.
  9. (Optional) If you are going to try it now and preview the project, add a Replay button as described in step 4 in Create a Full Experience below. 
Create a Full Experience

In this exercise, you will create a multi-directional swipe that follows a triangular path and allows you to swipe from the bottom-left, red corner to the top, yellow corner and then down to the bottom-right, blue corner. With each movement, a light ball along the corresponding edge will turn on to indicate success. 

  1. Create a new project, download four video assets, and add them to the project.
  2. Add the following four scenes and drag the respective video assets to each scene as indicated below:
    • Path loop scene with the pathmode_loop_01.mp4 file.
    • 1 Results scene with the pathmode_result_01.mp4 file.
    • 2 Results scene with the pathmode_result_02.mp4 file.
    • 3 Results scene with the pathmode_result_03.mp4 file.
  3. Select the Path loop scene in the Scenes panel and follow the How to Create a Path Gesture instructions above.
  4. To be able to replay the experience during preview and testing, select the 3 Results scene and do the following:
    1. From the Elements panel, drag a Replay Button element to the canvas and place it over the path mode button as shown below.
    2. Under Properties, select the Path loop scene to go to next. If needed, see Add Buttons.

  5. Save and preview your project with the AppOnboard Studio app.
Updated May 31, 2019