Dans ce tutoriel, vous allez découvrir comment utiliser la fonction Survol.
Cette fonctionnalité va vous permettre d'interagir avec des éléments en passant simplement dessus. On appelle ces mouvements "Hover in" (permet de rentrer dans l'objet) et "Hover out" (permet de sortir de l'objet) tout en le survolant.
Un cas d'usage est lors de la présentation d'un lieu. Des informations peuvent apparaître lorsque le participant survol un endroit donné sans surcharger la scène.
Dans le cadre d'une gamification, le survol d'un trigger peut aussi donner un indice au participant par exemple.
Afin de voir comment utiliser la fonctionnalité survol, nous allons réaliser le scénario ci-dessous :
“Dans l’expérience nous aurons 3 déclencheurs, chacun d'eux ajoutera 10 points dans le scoring. Une fois le palier des 30 points acquis un cadenas apparaîtra sur le coffre pour le déverrouiller."
Notez que l'élément cadenas possède 2 aspects.
Grandes étapes
Une fois que les éléments sont en place, voici les étapes à suivre :
- Créer une image possédant 2 aspects,
- Créer les déclencheurs et une Variable Nombre,
- Définir la fonctionnalité survol
Étape 1 : Créer une image avec 2 aspects
Dans cette étape, nous allons créer une image avec 2 aspects pour utiliser la fonction survol.
A noter que l'image doit être mise en invisible.
Étape 2 : Créer des déclencheurs et une variable nombre
Dans cette étape, nous allons créer des déclencheurs liés à la variable nombre pour un scoring. L'image mise dans l'étape 1 apparaîtra une fois le score atteint.
Étape 3 : Définir la fonctionnalité survol
Dans cette dernière étape, nous allons définir notre fonctionnalité survol dans les implications. Pour ce faire deux nouvelles interactivités apparaissent en plus du clic :
"Hover in" vous permet d'afficher le deuxième aspect en passant sur l'image avec votre curseur.
"Hover out" permet quant à lui d'afficher à nouveau le premier aspect quand votre curseur quitte cette image.
Voici le rendu final du scénario ci-dessus :
[Tutoriel] Fonctionnalité survol - Speedernet Sphere
Partagez-nous les scénarios sur lesquels vous allez vous baser avec survol et faites-nous part de vos commentaires !
Je vous invite également à consulter le tutoriel suivant :
À très bientôt pour le prochain tutoriel ! 🙂
Commentaires
0 commentaire
Vous devez vous connecter pour laisser un commentaire.