Réseaux Articulate :

Articulate

Comment donner le contrôle aux apprenants avec les curseurs interactifs de Storyline 2

Comment donner le contrôle aux apprenants avec les curseurs interactifs de Storyline 2

Célie-PejotÀ propos de l’auteur : Céline Pejot est conceptrice pédagogique et intégratrice multimédia depuis 2007. Après avoir travaillé dans le domaine du e-learning, de la formation interne en entreprise puis de l’accompagnement au changement, Céline propose depuis près de 3 ans ses services en tant qu’indépendante. Elle conçoit et produit aussi bien des formations 100% en ligne que des parcours mixtes. Pour les aspects graphiques, elle travaille en collaboration avec Émilie Vitte.


Si comme moi vous utilisez Storyline 2, vous avez découvert avec enthousiasme l’une des nouveautés phares de cette seconde version : les curseurs interactifs !

Cette fonctionnalité permet non seulement à l’apprenant de découvrir les informations à son rythme, mais également de pouvoir décomposer une idée, un processus (comme dans cet exemple) pour mieux se l’approprier.

Jusque-là, je n’avais fait que « jouer » avec (oui, c’est bien le mot). Mais au cours d’un récent projet sur lequel j’ai travaillé, l’opportunité s’est présentée d’intégrer ces fameux curseurs.

Il s’agissait de montrer les différentes voies d’accès réglementaires aux bâtiments par les pompiers. Alors plutôt que d’animer un camion de pompiers le long d’une simple trajectoire, pourquoi ne pas permettre aux apprenants de faire avancer eux-mêmes le camion ? C’est là que les curseurs interactifs interviennent ! Voici le rendu final.

Consultez les étapes ci-dessous pour savoir comment j’ai procédé.

Étape 1 : Poser le décor

Avant toutes choses, il faut mettre en place le décor de l’écran. Ici une vue schématique d’en haut afin de bien voir le dessin de la route sur laquelle va se déplacer le camion. J’utilise toujours les masques des diapositives pour le graphisme d’arrière-plan de mes écrans. De cette façon, je peux réutiliser les mises en pages rapidement et ça représente toujours un élément de moins sur la chronologie, qui peut parfois être très fournie !

curseurs-1

Étape 2 : Insérer l’élément interactif

En l’occurrence, le camion de pompiers. Le décor de mon écran étant en place, je peux redimensionner et positionner l’image du camion de façon précise. Et je la renomme sur la chronologie pour m’y retrouver plus facilement (très utile quand il y a beaucoup d’éléments).

curseurs-2

Étape 3 : Décomposer le mouvement

La notion que je souhaite illustrer avec le curseur est l’intérêt de la « surlargeur » (zone rouge dans le virage de gauche) sur la voie. Il faut donc simuler la façon dont le camion de pompiers prendrait ce virage dans la réalité. Pour cela, il faut décomposer le mouvement pour obtenir une trajectoire idéale. La fonctionnalité États va me permettre de faire exactement ça !

Je commence par dupliquer l’état « Normal » du camion pour en créer un nouveau que j’appelle « step1 ». Dans ce nouvel état, je vais déplacer légèrement le camion vers la gauche. Je valide, et voilà ! La trajectoire est amorcée. Au total, je vais créer 17 états. Dans chacun d’entre eux je ferai avancer légèrement le camion, et je lui appliquerai une rotation dans le virage, pour créer la trajectoire souhaitée.

Un conseil : dupliquez toujours le dernier état que vous venez de créer (dupliquez l’état « step1 », et non pas l’état « normal », pour créer l’état « step2 »). Cela vous permettra de gagner du temps et d’avoir un mouvement propre. Bien évidemment, plus vous créez d’états, et plus le mouvement sera fluide lors de la manipulation du curseur.

Étape 4 : Ajouter et paramétrer le curseur

Tous les états sont créés, il faut maintenant les animer. C’est là que le curseur entre en scène.

curseurs-3

Après avoir inséré le curseur, je dois ajuster ses propriétés pour qu’il fonctionne en association avec l’élément que je souhaite animer. Le camion ayant 18 états (17 créés + l’état « normal »), je paramètre la variable « Curseur1 », associée à mon curseur, de la façon suivante :

curseurs-4

  • Valeur initiale : 0 (correspondra à l’état « normal » du camion)
  • Valeur finale : 17 (correspondra à l’état « step17 »)
  • Incrémentation de la variable de 1 en 1
  • Mise à jour du curseur lorsqu’il est déplacé.

Il ne manque plus qu’à définir des événements pour lier le curseur au camion. Je commence par définir le déclencheur correspondant au positionnement initial du camion :

curseurs-5

Puis je définis un second déclencheur pour modifier l’état du camion à l’état « step 1 » quand la valeur du curseur est égale à 1 :

curseurs-6

Je duplique ce déclencheur autant de fois que nécessaire (à l’aide des boutons copier/coller dans le panel de déclencheurs), en modifiant à chaque fois 2 choses :

  1. l’état du camion
  2. la valeur de la variable « Curseur1 » (qui correspond ici à la Condition « égal à »).

Mon prochain déclencheur modifiera l’état du camion à « step2 » quand la valeur de la variable sera égale à 2, et ainsi de suite pour l’ensemble des états.

J’ai maintenant mes 18 déclencheurs :

curseurs-7

Le paramétrage du curseur est terminé ! Après mise en forme du curseur et finalisation du contenu de l’écran, j’obtiens ce résultat :

curseurs-8

Vous pouvez consulter la démo ici. (Curseurs accessibles en cliquant sur les boutons 2 et 3).

Questions ? Commentaires ? Laissez-moi un message dans la zone ci-dessous.

10 commentaires

  1. Juliette Follin ll y a 8 ans

    Je trouve cette fonctionnalité intéressante et vous avez bien réussi à éviter l’effet saccadé. En revanche je la trouve un peu lourde à développer, 17 états cela me semble le bout du monde 😉

    • Céline Pejot ll y a 8 ans

      Bonjour Juliette, excusez-moi pour la réponse tardive. En réalité la création des états est très rapide (quelques minutes) à condition évidemment d’avoir une idée bien précise du rendu souhaité. Lancez-vous, vous serez surprise 😉

  2. Tim ll y a 7 ans

    Bonjour,

    Est il possible d’utiliser le curseur pour se déplacer dans la chronologie de la diapositive ?

    • Allison LaMotte ll y a 7 ans

      Bonjour Tim ! Pas à ma connaissance. Y a-t-il une raison pour laquelle vous souhaitez passer par un curseur eu lieu d’utiliser la barre de progression par défaut ?

  3. Aurore ll y a 6 ans

    J’ai du mal à visualiser le résultat final et le lien de la démo renvoie sur une page en construction, dommage !

  4. Ophélie ll y a 6 ans

    Bonjour,
    Est-il possible d’utiliser le curseur pour avancer dans une vidéo ? Je souhaite personnaliser la barre de progression du contrôle vidéo mais je n’y arrive pas, j’ai donc pensé à cela.

    • Allison LaMotte ll y a 6 ans

      Avez-vous essayé d’insérer les contrôles vidéos, tout simplement ? Il suffit de sélectionner cette option dans l’onglet format qui apparaît quand la vidéo est sélectionnée.

      • Allison LaMotte ll y a 6 ans

        Si vous souhaitez forcément utiliser la barre de progression et non les contrôles vidéo, voici un solution :
        1. Ajoutez votre vidéo
        2. Ajustez les paramètres de la vidéo pour qu’elle joue automatiquement et pour ne pas afficher les contrôles vidéo
        3. Insérez un rectangle transparent de la même taille que la vidéo et placez-le par dessus votre vidéo.

        De cette manière, l’apprenant ne peut pas cliquer sur la vidéo pour l’arrêter, et la vidéo sera toujours synchronisée avec la barre de progression.

        Voici mon fichier (créé avec Storyline 360) : http://drops.articulate.com/JMxuId/BJnfjTCYqO au cas où ça peut vous aider.

        Bonne journée !

Laisser un commentaire à Céline Pejot Cliquez ici pour annuler votre réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*