Motion / Blow / Compass / Shake

Why keep things classic when you can tap into the full range of tablet features: imagine users turning, shaking or blowing on their tablet to interact with your app! Sensors can make that happen! :-)

To add a sensor, click on the Components icon and select your sensor. It will then become accessible from the List of Objects, at the bottom left of your screen - as otherwise your component is not visible on your state.

There are two main ways to use sensors:

Motion Sensor

Motion Sensor takes into consideration tablet moves in terms of tilt or orientation.

motion sensor

The Properties window gives you access to the following features:

  • Edit motion sensor: this lets you define types of tilts to which you can link specific actions (also accessible by double-clicking on the component).
  • Options: to choose if you want to use the accelerometer, i.e. base an action's sensivity on the strength of the user's movement.

  • Type: to define whether the tablet will detect a movement based on its tilt or on its orientation, and also what type of axis (horizontal and/or vertical).

  • Horizontal axis Min/Max (degree): lets you define the horizontal amplitude required to fully execute the requested action.

  • Vertical axis Min/Max (degree): lets you define the vertical amplitude required to fully execute the requested action.

Example: Manage a sequence using my tablet's horizontal tilt

  1. Add the Sequence, configure it and add a Motion sensor component.
  2. In the Properties window of the sensor, select only the horizontal axis and keep its default properties.
  3. Insert a Synchronization component and in the Properties window, click on + ADD COMPONENTS. Select the Sequence and the Motion Sensor.
  4. Define the synchronizable properties: frames for the sequence and horizontal axis for the motion sensor.

2. Blow Sensor

The Blow Sensor detects when your user blows on the tablet.

blow sensor

The Properties window gives you access to the following features:

  • Edit blow sensor: lets you define stages in the action of blowing to which you can match specific
  • Options: you can choose to apply velocity, i.e. match the speed of execution of an action to the intensity of the user's blow/p>

  • Duration: to define the duration required to fully execute the requested action.

 Please note: your user has to blow in front of your tablet micro for his/her action to be recognized. Where the micro is located depends on the version of the tablet: on the iPad Air, you’ll find it next to the volume control buttons, on the edge, but on the older iPads it’s located on the front, next to the camera.

Example: Get a shape to move from one side of the screen to the other, when the user blows on the tablet.

  1. Create a first state containing a shape located on the left of the screen and a second state (based on this first state) in which you move this shape to the right of the screen.
  2. In the first state, insert the Blow Sensor, which then shows up in the List of Objects. Click on Properties to open its window. Select the Velocity option so that my shape will move according to the intensity of the blow and define how long your users need to keep blowing (for example 4 seconds).
  3. Click on Edit blow sensor to create a half-time marker: in the dedicated window, go to 2.0 seconds and create a marker by clicking on the + ADD TIME button.
  4. To create interactivity: select the Blow Sensor and click on Interactivities. Click on + ADD ACTION and select the trigger: Blow 2secs. As an action, select Change screen state for state 2.
  5. Blow on your project: after 2 seconds, you'll see the shape going from the left to the right.

3. Compass Sensor

The Compass Sensor detects the tablet's direction in terms of pivot angle. It can’t yet indicate you North or South, but it does rely on the magnetic field to assess the tablet's position.

⚠️ Only for iOS & Android apps: These features are only available for native apps.

compass sensor

Compass Sensor properties:

  • Edit compass sensor: to add directions, i.e. mark specific angles in pivoting movement to which you can match particular actions (also accessible by double-clicking on the component).
  • Direction Min/Max (degree): use this to define the amplitude requested to fully perform the requested action (360° maximum)

Example: Unveil more images when moving the tablet.

  1. Create an horizontal Scrolling Area component in which I add an landscapte image. Insert a Compass Sensor component.
  2. Add a Synchronization component: in its Properties window, select the Scrolling Area and Compass Sensor components.
  3. Define the synchronizable properties: directions for the Compass Sensor, x positions for the Scrolling Area (horizontal scrolling).

 Shake Sensor

The Shake Sensor detects when the user shakes the tablet.

⚠️ Best for mobile apps: These features are adapted for mobile applications (web and native). Desktop users can shake the mouse to trigger shake events.  

shake sensor

Using the Properties window, you can define the following features:

  • Edit shake sensor: to mark some moments in the shaking motion to which you can match specific actions (also accessible by double-clicking on the component).
  • Duration: to define the duration required to fully execute the requested action.

Example: Get the user to “smash” a square shape by shaking the tablet

  1. Create a first state including four square shapes piled on each other and located at the center of the screen. Create a second state (based on this first state) in which you scatter those four squares proportionally in each diagonal (as the shape would look once smashed).
  2. In the first state, insert the Shake Sensor, which then shows up in the List of Objects. Click on Properties to open the window. Define how long the user needs to blow to trigger the action (for example, 2 seconds).
  3. Click on Edit shake sensor to create a half-time marker: in the dedicated window, go to 1.0 second and create a marker by clicking on the + ADD TIME button.
  4. To create interactivity: select the Shake Sensor and click on Interactivities. Click on + ADD ACTION and select the trigger: Shake 1secs. As an action, select Change screen state for state 2.
  5. Shake the tablet: after 1 second, you'll see the smashing square.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.