Booster les images 360° d’Articulate Storyline façon « Escape Game » (partie 1)

1) L’idée : Booster les images 360°

Les images 360° dans Articulate Storyline offrent déjà une expérience immersive assez intéressante, mais j’avais envie d’essayer de les rendre encore plus captivantes et d’y ajouter d’autres fonctionnalités. Vous trouverez tous les détails de ma démarche dans cet article.

Quelques liens utiles :

▶️ Lien du post Linkedin (avec extrait vidéo).
▶️ Lien de la démo.

2) Inspiration

Je note régulièrement des idées qui me viennent à l’esprit un peu n’importe quand (en courant, en travaillant, en lisant, en expérimentant, etc…).

Dans ce cas-ci, j’ai été grandement inspiré par les travaux de Paul Alders et son astucieux « faisceau lumineux » sans JavaScript (note : dans ce prototype avec des images 360°, j’ai dû utiliser du JavaScript), ainsi que ceux de Chris Hodgson et ses partages concernant l’utilisation des images 360°.

3) Contraintes auto-imposées

Pour assurer une certaine efficacité en cas de mise en application de ce prototype dans un projet concret, je me suis imposé certaines contraintes :

• Maximiser tout le travail directement dans Articulate Storyline, grâce à la fonction JavaScript intégrée.
• Ne faire aucune modification dans le répertoire du projet exporté (pour faciliter les modifications futures).
• Permettre au module d’être autonome, c’est-à-dire lui de fonctionner hors ligne (pour un usage local ou sur un LMS interne non connecté au web).

4) Étapes et réalisations :

1️⃣ Création de l’image 360° (BlockadeLabs)

La première étape a consisté à générer une image 360° avec BlockadeLabs.

2️⃣ Ajouts d’éléments supplémentaires sur l’image 360° (Photoshop Bêta avec Firefly)

Ensuite, j’ai voulu ajouter des éléments interactifs à cette image en gardant le même style graphique, c’est pourquoi j’ai utilisé la version Bêta de Photoshop (qui inclut le remplissage génératif avec Firefly).

Voici les éléments qui ont été créés / ajoutés :

• • Objet magique (celui qui vous plonge dans le noir).
  • La boîte mystérieuse.
  • La clé.

3️⃣ Développement dans Articulate Storyline

Comme vous vous en doutez, le plus gros du travail a été ensuite fait dans Storyline pour intégrer et la programmer tous les éléments, déclencheurs et codes JavaScript.

• • Intégration de l’image avec la fonction 360° de Storyline.
  • Ajout de zones de clic sur l’image.
  • Paramétrages de calques fixes (messages, interactions, etc…)
  • Tests & Ajouts de fonctionnalités JavaScript :
    • Effets sur le curseur :
      • Changement de la forme (croix au lieu du pointeur « flèche »).
      • Trainée lumineuse au déplacement (quand le « clic-gauche » est enfoncé).
      • Réactions au clic (étincelles, éclairs, tremblements, sons).
    • Effets d’animations :
      • Faisceau lumineux (lors de la recherche d’éléments).
      • Tremblement d’écran (en fonction des interactions / événements).
      • Flashs (en fonction des interactions / événements).

4️⃣ Tests, tests, tests et re-tests

Et oui, car comme bien souvent, il faut beaucoup tâtonner et tout ne fonctionne pas du 1ᵉʳ coup. Il s’agit d’un long jeu de va-et-vient, d’export, de modifications, etc… Surtout quand il y a du JavaScript et que l’on ne peut pas tester les fonctionnalités sans export.

J’ai donc passé pas mal de temps dans la console du navigateur (F12) et ChatGPT a été d’une grande aide et m’a fait gagner un temps considérable pour les bugs et le JavaScript.

5) Autres idées / possibilités envisageables :

Bien entendu, quand on voit les nombreuses possibilités offertes par les fonctionnalités JavaScript, les idées peuvent être nombreuses, en voici quelques :

• Ajouter des effets dans les scènes (neige, pluie, brouillard, etc…).
• Orienter l’apprenant vers des actions spécifiques avec des effets de curseur.
• Mettre en évidence certains éléments à l’écran.
• Utiliser certains effets dans un module plus « classique » (ex : tremblement d’écran en cas de réponse fausse)
  Merci à Clément Cahagne pour l’idée.
• Etc…

6) Bugs & Améliorations possibles :

Je me répète un peu, mais il s’agit d’un prototype et certains bugs sont possibles. Voici ceux que j’ai notés : 

• L’effet de trainée lumineuse (étincelles) peut « s’imprimer » en cas de transition avec un calque.
• En mode plein écran, certains effets peuvent disparaître (en code JS spécifique peut résoudre le problème).

Pour les améliorations (ou plus fonctions complémentaites, toujours dans cet esprit « Escape Game », j’ai quelques idées !

Mais ça, je vous en parlerai dans la partie 2 (je ne veux pas « spoiler » 😉).

Pour aller plus loin :

▶️ Si cet article vous parle et que vous souhaitez collaborer sur un projet similaire (ou différent) : contactez-moi.

Autres articles :