Mouvement / Souffle / Boussole / Secousse

Nous vous parlions d’exploiter au maximum les fonctionnalités de la tablette : imaginez votre utilisateur tourner, secouer ou souffler sur sa tablette pour lancer des actions dans votre application !! Oui, oui, les capteurs vous ouvrent un nouveau champ de possibles !! :-)

Pour insérer un capteur, cliquez sur l’icône Composants et choisissez le capteur de votre choix. Celui-ci devient accessible à partir de votre Liste des Objets, en bas à gauche de votre écran, car votre composant n’a pas de représentation physique sur votre état en cours.

Il existe deux principales façons de les utiliser :

en les synchronisant avec d’autres objets (voir Utiliser la synchronisation)
en leur plaçant des marqueurs qui deviennent déclencheurs d’action (voir Comprendre les marqueurs)

Le Capteur de Mouvement

Le Capteur de Mouvement vous permet de prendre en considération les mouvements de la tablette, que ce soit en termes d’inclinaison ou d’orientation.

Propriétés du Capteur de Mouvement : type Tilt ou Orientation, accéléromètre, puis les axes horizontal et vertical avec leurs Min/Max en degrés

Le panneau Propriétés vous donne accès aux réglages suivants :

Marqueurs : cliquez sur la flèche du capteur dans la liste des Objets pour entrer dans son mode d’édition et marquer des inclinaisons spécifiques de la tablette auxquelles vous pourrez ensuite associer des actions particulières (voir Marqueurs).
Accéléromètre : pour choisir d’utiliser ou non l’accéléromètre, c’est-à-dire de baser la sensibilité de l’action sur la force déployée dans l’exécution du mouvement.
Type : pour définir si la reconnaissance du mouvement se base sur une inclinaison de la tablette ou bien sur un changement d’orientation, ainsi que le type d’axe pris en compte (horizontal et/ou vertical).
Min/Max de l’axe horizontal (degré) : pour définir l’amplitude horizontale du mouvement nécessaire à l’exécution intégrale de l’action demandée.
Min/Max de l’axe vertical (degré) : pour définir l’amplitude verticale du mouvement nécessaire à l’exécution intégrale de l’action demandée.

Exemple : Contrôler une séquence par l’inclinaison horizontale de ma tablette.

Insérez le composant Séquence, paramétrez-le et rajoutez un composant Capteur de Mouvement.
Dans le panneau Propriétés du capteur, ne gardez que l’axe horizontal et conservez les propriétés par défaut.
Insérez un composant Synchronisation et dans le panneau Propriétés, cliquez sur + AJOUTER COMPOSANTS. Choisissez la Séquence et le Capteur.
Définissez les propriétés synchronisables : les frames pour la séquence, l’axe horizontal pour le capteur mouvement.

Le Capteur Souffle

Le Capteur Souffle vous permet de reconnaître une action de souffle sur la tablette.

Propriétés du Capteur Souffle : Velocity réglé sur Yes et Duration de 2 secondes

Le panneau Propriétés vous donne accès aux réglages suivants :

Marqueurs : cliquez sur la flèche du capteur dans la liste des Objets pour entrer dans son mode d’édition et marquer des temps spécifiques dans l’action de souffler auxquels vous pourrez ensuite associer des actions particulières (voir Marqueurs).
Vélocité : pour appliquer ou non de la vélocité, c’est-à-dire une adéquation de la vitesse de l’exécution en fonction de l’intensité ressentie
Durée : pour définir la durée requise pour exécuter intégralement l’action demandée.

À savoir : votre utilisateur doit souffler au niveau du micro de la tablette pour que son action soit bien reconnue. Selon la version de la tablette, le micro ne se trouve au même niveau : sur les versions antérieures à l’iPad Air, le micro est à côté de la caméra sur le devant ; le micro de l’iPad Air est placé à côté des contrôles du volume sur la tranche.

Exemple : Déplacer un carré, d’un bout à l’autre de l’écran, par l’action de souffler.

Créez un premier état comprenant un carré situé tout à gauche et un deuxième état (basé sur ce premier état) dans lequel vous déplacez ce même carré tout à droite.
Sur le premier état, insérez un Capteur souffle qui se place dans la Liste des Objets. Dans le panneau Propriétés, passez Vélocité à Oui pour que le carré se déplace selon l’intensité du souffle et définissez la durée de l’action de souffler (par exemple, 4 secondes).
Cliquez sur la flèche du Capteur souffle dans la liste des Objets pour entrer dans son mode d’édition : placez-vous à 2.0 secondes et créez un marqueur avec le bouton +.
Pour créer l’interactivité du déplacement : sélectionnez le Capteur souffle et ouvrez le panneau Actions. Ajoutez une action et choisissez votre marqueur comme déclencheur. Comme action, choisissez Changer l’état de l’écran pour l’état 2.
Soufflez sur votre projet : au bout de 2 secondes, vous voyez le carré se déplacer de gauche à droite.

Le Capteur Boussole

Le Capteur Boussole mesure la direction de la tablette, en termes d’angles de pivot. Il ne permet pas encore de représenter le Nord, mais s’appuie sur le champ magnétique pour définir des positions de la tablette.

Uniquement pour les apps iOS & Android : Ces fonctionnalités ne sont disponibles que pour les applications natives.

Propriétés du Capteur Boussole : Direction Min 0° et Max 360°

Ses propriétés sont :

Marqueurs : cliquez sur la flèche du capteur dans la liste des Objets pour entrer dans son mode d’édition et ajouter des directions, c’est-à-dire marquer des angles spécifiques dans l’action de faire pivoter la tablette auxquels vous pourrez ensuite associer des actions particulières (voir Marqueurs).
Min/Max direction (degré) : pour définir l’amplitude pour exécuter intégralement l’action (max. 360 degrés donc)

Exemple : Dévoiler plus d’images au déplacement de la tablette

Créez un composant Zone de Défilement horizontal dans lequel vous insérez une image qui prend toute la largeur. Rajoutez un composant Capteur Boussole.
Insérez un composant Synchronisation : dans le panneau Propriétés, sélectionnez les composants Zone de Défilement et le Capteur Boussole.
Définissez les propriétés synchronisables : les directions pour le Capteur Boussole, les positions en x (car défilement horizontal) pour la Zone de Défilement.

Le Capteur Secousse

Le Capteur Secousse vous permet de reconnaître quand votre tablette est agitée (avec un minimum de force) par votre utilisateur.

Pour les apps mobiles : Ces fonctionnalités sont optimisées pour les applications mobiles (web et natives). Les utilisateurs d’ordinateurs peuvent secouer la souris pour déclencher des événements de secousse.

Propriétés du Capteur Secousse : Duration de 2 secondes

Le panneau Propriétés vous donne accès aux réglages suivants :

Marqueurs : cliquez sur la flèche du capteur dans la liste des Objets pour entrer dans son mode d’édition et marquer des temps spécifiques dans l’action de secouer auxquels vous pourrez ensuite associer des actions particulières (voir Marqueurs).
Durée : pour définir la durée requise pour exécuter intégralement l’action demandée.

Exemple : “Exploser” un carré par l’action de secouer.

Créez un premier état comprenant quatre carrés situés les uns sur les autres au milieu de l’écran. Créez un deuxième état (basé sur ce premier état) dans lequel vous déplacez les carrés, proportionnellement dans chaque diagonale.
Au niveau du premier état, insérez le Capteur Secousse qui se place dans la Liste des Objets. Dans le panneau Propriétés, définissez la durée de l’action de secouer (par exemple, 2 secondes).
Cliquez sur la flèche du Capteur Secousse dans la liste des Objets pour entrer dans son mode d’édition : placez-vous à 1.0 seconde et créez un marqueur avec le bouton +.
Pour créer l’interactivité de l’explosion : sélectionnez le Capteur Secousse et ouvrez le panneau Actions. Ajoutez une action et choisissez votre marqueur comme déclencheur. Comme action, choisissez Changer l’état de l’écran pour l’état 2.
Secouez votre tablette : au bout de 1 seconde, vous voyez le carré exploser.