Créer des interactions entre Speedernet Sphere et Storyline

Est-ce possible de créer des interactions entre une expérience réalisée avec Sphere et un projet

Storyline ? Tout à fait.

Suivez ce tutoriel pour découvrir la réponse à cette question !

Pour faciliter la compréhension, voici un exemple de situation : 

"Dans une visite virtuelle d’un site, le plan du lieu s’affiche automatiquement, en haut à droite de l’écran. 

Dans chaque partie de la visite virtuelle, l’utilisateur a la possibilité d’identifier sa position grâce à ce plan.”

Avant de rentrer dans le vif du sujet, voici un aperçu du rendu final :

Grandes étapes 

Cette réalisation se fait en trois grandes étapes :

1. Sur Storyline : Ajouter le  plan du site, le point rouge et prévoir leurs interactions 
2. Sur Sphere : Créer l’interaction avec Storyrline dans la visite virtuelle
3. Sur Storyline : Ajouter l’export de la visite virtuelle dans Storyline 

Étape 1 - Ajouter le plan du site dans la partie Storyline du projet

Commençons par le plan du site.

Dans cet exemple, l’image du plan du site s'intègre, en position masquée, sur la diapositive où l’export de la visite virtuelle sera ajouté. 

Pour ce faire :

• Ajoutez une diapositive
• Insérez l’image du plan du site
• Cliquez sur l’onglet "States"
• Modifiez l’état initial de l’image en "Hidden" (masqué)
• Placez-la selon votre besoin

Ensuite, créez la variable et le déclencheur pour afficher l’image du plan du site :

• Ouvrez la fenêtre "Manage project variables"
• Créez une nouvelle variable
• Nommez la variable : “plan “

* Attention au nom que vous donnez à votre variable car vous l’utiliserez dans la partie de visite virtuelle (le projet Sphere).

•  Choisissez "True/False" pour le type de variable avec une valeur par défaut ; "False"
• Validez
• Ajoutez un nouveau déclencheur et saisissez l’interaction ci-dessous :

[Change state of "plan.png" to Normal

When the "plan" variable changes to True] 

Dans notre exemple, un point rouge sur la carte indique la localisation de l’utilisateur dans sa visite virtuelle du site.

Pour ce faire, toujours dans Storyline :

• Dans la même diapositive, ajoutez un layer
• Nommez-le : "Bureau 1"
• Ajoutez un marqueur (Vous pouvez utiliser également une forme ou une image)
• Positionnez-le sur la carte

Dans cette exemple, nous montrons la localisation du "Bureau 1" sur le plan.

Ensuite, créez la variable et le déclencheur pour afficher le point rouge :

• Ouvrez la fenêtre "Manage project variables" (Gérer les variables du projet)
• Créez une nouvelle variable
• Nommez la variable : "bureau1"

* Attention au nom que vous donnez à votre variable car vous l’utiliserez dans la visite virtuelle (le projet Sphere).

•  Choisissez "True/False" pour le type de variable avec une valeur par défaut ; "False" 
• Validez
• Ajoutez un nouveau déclencheur et saisissez l’interaction ci-dessous :

[Show layer  "Bureau 1"

When the "bureau1" variable changes to True] 

Étape 2- Créer l’interaction avec Styorline dans la visite virtuelle sur Sphere

Rendez-vous dans la partie Sphere de votre projet.

La visite virtuelle déjà créée, concentrons-nous sur la création de l’interaction entre Sphere et Storyline.

Rappelez-vous que le plan du site doit s’afficher 3 secondes après le lancement de la visite virtuelle par l’utilisateur.

Pour ce faire, dans la première scène de votre projet :

• Ouvrez l’ "Outil Événement"
• Ajoutez un nouvel événement :

[À 3s 

Alors Changer variable Storyline "plan” (saisissez le nom exact de la variable que vous avez créé sur Storyline) en "True" (dans le champs valeur les termes : True ou False)]

Dans notre exemple, nous souhaitons que le point rouge de localisation s’affiche à la demande de l’utilisateur en interagissant avec un bouton dans chaque scène.

Rendons-nous dans la scène "Bureau 1" ; où nous avons prévu un point rouge de localisation sur le plan dans Storyline :

• Ajoutez un élément. Dans cette exemple, nous utilisons un texte
• Nommez-le dans la colonne des éléments : “localisation”
• Rendez-vous dans la fenêtre des propriétés de l’élément et définissez ses paramètres selon votre besoin : 
• Aspect : "Où suis-je ?”
• États : Visible et interactif

• Ouvrez la fenêtre des “Implications” de l’élément et ajoutez une nouvelle implication :

[Si clic sur "localisation"

Alors changer variable Storyline "bureau1" (saisissez le nom exact du variable que vous avez créé sur Storyline) en "True" (saisissez la valeur exacte que vous avez définie sur Storyline)]

• Exportez votre projet Sphere  

Étape 3 - Ajouter l’export de la visite virtuelle dans Storyline 

Dans cette dernière étape :

• Ajoutez le dossier export de Sphere dans la diapositive de Storyline, à l’aide du Web Objet. Pour en savoir plus sur ce point, consultez l’article Intégrer l’expérience Sphere dans Storyline !
• Publiez le projet Storyline puis hébergez-le sur un serveur ou une plateforme LMS pour visualiser le résultat. 

Vous pouvez enrichir cet exemple ou créer d’autres types d'interactions entre les outils Sphere et Storyline selon votre besoin.

N'hésitez pas à nous faire part de vos commentaires et questions !

À très bientôt sur le prochain tutoriel !