Réseaux Articulate :

Articulate

Guide des boutons de Storyline

Guide des boutons de Storyline

Les boutons par défaut et les boutons personnalisables

Dans Articulate Storyline, il y a deux types de boutons : ceux intégrés par défaut et ceux que vous pouvez personnaliser. Les boutons par défaut se trouvent dans l’onglet Insertion en cliquant sur Commandes.

L’intérêt des boutons par défaut, c’est qu’ils sont conçus avec 5 états prédéfinis (Normal, Survol, Enfoncé, Visité et Désactivé) et qu’à l’insertion d’un bouton par défaut, un déclencheur est également ajouté d’office. Un déclencheur est ce qui permet de définir l’action qui sera déclenchée lorsque l’apprenant interagit avec l’objet (ici le bouton). Par exemple, passer à la diapo suivante, lancer une vidéo, etc.

Vous pouvez également personnaliser les boutons par défaut en leur ajoutant une icône. Pour ce faire, sélectionnez votre bouton puis ouvrir l’onglet Format. Ensuite, cliquez sur la flèche qui se trouve en bas à droite des icônes pour voir l’ensemble des icônes.

Vous pouvez choisir de faire un bouton avec juste une icône ou d’y ajouter un texte, comme ci-dessous :  

Si vous voulez un style plus personnel, vous pouvez créer des boutons à partir de n’importe quel objet dans Storyline – comme une forme ou une image – en ajoutant simplement vos propres états et un déclencheur.

Astuce de pro : si vous voulez créer un bouton à partir d’une forme, insérer simplement un bouton par défaut, cliquez dessus et utilisez le pinceau de reproduction de la mise en forme pour appliquer les états par défaut à votre objet.

Et voilà, en quelques secondes, j’ai créé des états pour mon bouton en forme d’étoile.

Maintenant, tout ce que j’ai à faire, c’est d’ajouter un déclencheur (on verra comment plus loin dans cet article).

Les états des boutons

Nous parlons des états des boutons mais à quoi servent-ils réellement ? Les états des boutons vous permettent d’animer visuellement vos boutons. Un des avantages d’Articulate Storyline, c’est qu’il intègre un certain nombre d’états par défaut qui peuvent être utilisés tels quels sans déclencheur. Créer des états devient un jeu d’enfant ! Bien évidemment, vous pouvez aussi créer vos propres états et ajouter des déclencheurs personnalisés. Regardons d’un peu plus près comment fonctionne chaque état prédéfini dans Storyline.

Normal : L’état Normal est l’état neutre de l’objet. Par défaut, c’est aussi l’état initial (c’est-à-dire l’état que l’on voit lorsque l’objet apparaît pour la première fois), mais vous pouvez tout à fait modifier cela. La plupart des concepteurs ne font pas vraiment attention à cet état, mais savez-vous que l’on peut en fait ajouter des objets sur l’état Normal ? Cette technique est particulièrement utile lorsque vous voulez créer un bouton personnalisé qui comporte plusieurs objets, car les états ne peuvent être créés sur un groupe d’objets. Pour cela, ajoutez simplement les objets secondaires sur l’état Normal de l’objet principal. C’est ce que j’ai fait dans cet Exemple d’activité pédagogique pour présenter les membres d’une équipe, que j’ai créé il y a quelques temps.

Comme vous pouvez le voir, le personnage et le texte sont créés sur l’état Normal du bouton et pas directement sur la diapo.

Survol : cet état apparaît lorsque l’objet est survolé par le curseur de la souris. L’intérêt de cet état est de signaler à l’apprenant que l’objet est cliquable. Comme tous les états, vous pouvez modifier sa mise en forme. Par défaut, l’état Survol consiste en un simple changement de couleur, mais vous pouvez aussi ajouter un libellé, comme je l’ai fait dans ce template interactif inspiré des plans de métro.

Enfoncé : cet état apparaît lorsque l’objet est en train d’être cliqué. Il indique à l’apprenant qu’il est, à ce moment précis, en train de cliquer sur le bouton. Comme pour l’état Survol, la plupart du temps, cet état se matérialise par un simple changement de couleur de l’objet.

Visité : l’état Visité correspond à l’apparence d’un objet lorsqu’il a déjà été cliqué. Il est particulièrement utile lorsque vous avez créé un menu personnalisé dans votre module car il permet aux apprenants de savoir quelles parties du cours ils ont déjà regardées. Bien que vous puissiez simplement changer la couleur de l’objet pour montrer cet état, vous pouvez aussi ajouter, comme on peut le voir dans beaucoup de modules, une coche, une croix, ou tout autre objet de votre choix. Par exemple, dans cet exemple au sujet du bien-être, l’état Visité est visible par l’ajout d’un cœur :

Désactivé : Cet état indique un objet visible mais inactif. Vous pouvez l’utiliser lorsque vous voulez que les apprenants voient le contenu dans un ordre précis, tout en leur permettant d’avoir un aperçu des éléments du menu. En général, on utilise la couleur grise ou une icône en forme de cadenas pour indiquer un élément qui n’a pas été débloqué et qui est encore inactif, comme dans cet exemple (en anglais).

S’il n’y a pas d’indice visuel pour signaler aux apprenants qu’un bouton est verrouillé, ils risquent de penser qu’il ne marche tout simplement pas. Si vous paramétrez un bouton à l’état Désactivé par défaut, vous devez ajouter un déclencheur pour l’activer à nouveau (c’est-à-dire pour le remettre à l’état Normal).

Sélectionné : Cet état apparaît lorsque l’objet est effectivement sélectionné. Il est généralement utilisé dans les quiz, par exemple, pour indiquer la réponse que l’apprenant a choisi. Vous pouvez utiliser cet état combiné avec un ensemble de boutons, pour qu’un seul des boutons ne soit sélectionnable à la fois (voir la prochaine partie de cet article pour plus d’informations sur les ensembles de boutons).

Caché : Cet état rend l’objet invisible. Si vous avez paramétré un objet pour qu’il soit caché par défaut, vous devrez utiliser un déclencheur pour le rendre visible.

Les ensembles de boutons

Une autre fonctionnalité très utile de Storyline est les Ensembles de boutons. Comme mentionné plus haut, cela vous permet de définir un groupe de boutons en tant qu’ensemble pour qu’un seul de ces boutons ne soit sélectionnable à la fois, par exemple dans un questionnaire à choix multiple.

Pour définir un Ensemble de boutons, tout ce que vous avez à faire c’est de sélectionner les boutons que vous voulez inclure dans l’ensemble, faire un clic droit et choisir l’Ensemble de boutons auquel vous voulez les ajouter. Si vous voulez créer un nouvel Ensemble de bouton (en plus de celui par défaut), il vous suffit de cliquer sur Nouvel ensemble.

Ajouter des déclencheurs aux boutons

Une fois que vous avez ajouté et mis en forme vos boutons, la dernière étape consiste à leur ajouter des déclencheurs. Storyline vous permet de réaliser cette étape en un clin d’œil. Pour les boutons par défaut, cliquez simplement sur Ajouter un déclencheur, cela ouvre l’assistant de déclencheur. Ensuite, sélectionnez l’action que vous voulez obtenir lorsque l’utilisateur cliquera sur le bouton.

Pour les boutons personnalisés, sélectionnez l’objet, cliquez sur l’icône Nouveau déclencheur et suivez ensuite les mêmes étapes que pour les boutons par défaut.

Et voilà, c’est aussi simple que cela ! Créer et personnaliser ses boutons n’a jamais été aussi simple.

Vous avez des questions ou des remarques sur cet article ? N’hésitez pas à m’en faire part dans les commentaires ci-dessous.

Vous voulez tester Storyline mais vous ne possédez pas de logiciel Articulate ? Profitez d’un essai gratuit de 30 jours d’Articulate 360 (qui comprend Storyline 360) et voyez par vous-même ! Et n’oubliez pas de vous abonner au blog pour ne rater aucun article et profiter de tous les trucs des pro du e-learning.

Community Manager International chez Articulate et experte e-learning passionnée possédant des années d’expérience dans la création de modules e-learning efficaces.

40 commentaires

  1. Stéphane ll y a 6 ans

    Bravo Allison pour ce guide.
    Plein de bonnes astuces.
    Stéphane

  2. laetitia ll y a 6 ans

    Bonjour,
    petite question concernant les boutons : je ne comprends pas pourquoi certaines fois j’ai la main qui apparaît au survol du bouton et d’autres fois non ? Je n’arrive pas à comprendre d’où vient le problème car les boutons sont toujours les mêmes et n’ont pas le même comportement… (test en html5 avec 1 bouton créé d’après bouton par défaut dans lequel j’ai rajouté mes visuels et que j’utilise plusieurs fois dans le module).

    • Auteur
      Allison LaMotte ll y a 6 ans

      Bonjour Laetitia,
      C’est étrange. Normalement vous devriez toujours avoir la main quand vous avez un état de survol. Je vous conseille d’envoyer votre fichier à notre équipe support : support@articulate.com

  3. Hugo ll y a 6 ans

    Bonjour

    Peut on associer à un bouton plusieurs déclencheurs: le premier étant: aller à une diapositive et en même temps enlever 10 points à une variable?
    Et comment faire en sorte que cela marche; J’ai beau essayé, je trouve pas la solution.
    Merci

    • Auteur
      Allison LaMotte ll y a 6 ans

      Bonjour Hugo !
      Oui, vous pouvez. Mais dans ce cas, l’ordre des déclencheurs est important. Il faut mettre le déclencheur qui mène vers une autre diapo en dernier car sinon ça changera de diapo avant que les autres déclencheurs aient eu le temps de déclencher. J’espère que c’est plus clair !

      • hugo ll y a 6 ans

        Bonjour Allison

        Merci pour votre renseignement, je n’y avais pas pensé!

  4. lilou ll y a 6 ans

    Bonjour,

    comment faire pour faire apparaître un à un des objets différents suite à un clic dans une même zone???
    merci pour votre retour

  5. Alain ll y a 5 ans

    Bonjour,

    Comment pouvons-nous lancer une application (Word, Excel, Antidote ou autre) avec un bouton dans Storyline?

    J’ai trouvé comment lancer l’application Photos (en inscrivant ms-photos:) dans l’action Ouvrir une URL/un fichier du déclencheur. Mais je ne n’arrive pas à trouver comment faire pour les autres logiciels.
    ——————-
    Aussi, si j’intègre un éditeur de texte tinyMCE comme objet web dans une slide, est-il possible de récupérer le texte que l’utilisateur y saisit (via une variable et/ou un JS?

    Merci 🙂
    Alain D.

    • Auteur
      Allison LaMotte ll y a 5 ans

      Bonjour Alain,

      Le seul moyen que je connaisse de lancer une application serait d’ajouter un bouton qui ouvre un fichier créé avec le logiciel en question.

      Je ne connais pas non plus de moyen de récupérer le texte saisi en dehors du module.

      Je vous invite à poser la question sur E-Learning Heroes pour voir si d’autres utilisateurs ont trouvé des astuces pour y arriver.

  6. Nathalie ll y a 5 ans

    Bonjour,
    J’ai crée un déclencheur sur un bouton qui permet lorsqu’on clique dessus cela permet de télécharger une fiche synthèse qui se trouve sur mon ordi.
    Cette fiche synthèse est également accessible lorsqu’on clique sur le lien ressources (paramétrer à partir du bouton lecteur).
    Ensuite je publie et je dépose le e learning sur Moodle.

    L’apprenant peut accéder à la fiche synthèse lorsqu’il clique sur le lien Ressource mais pas lorsqu’il clique sur bouton. Comment procéder afin que cela fonctionne ?

    Merci pour votre réponse

  7. Nathalie ll y a 5 ans

    Super ! cela fonctionne
    Merci Allison

  8. Nathalie ll y a 5 ans

    Bonjour Alison,
    Je crée des déclencheurs sur une zone clic de différentes captures vidéos en mode simulation (insérer en tant que diapositives par étape) :
    Par exemple :
    Lire le média Capture Vidéo e l’écran Quand l’utilisateur effectue un clic droit
    ou
    Lire le média Capture Vidéo de l’écran Quand l’utilisateur effectue un double clic

    Or lorsque l’apprenant effectue un clic droit ou un double clic cela ne fonctionne pas.

    Mercie pour votre réponse.

    • Auteur
      Allison LaMotte ll y a 5 ans

      Bonjour Nathalie,

      Qu’est-ce qui se passe ? Rien ? Le mieux serait que vous m’envoyiez votre fichier : alamotte [at] articulate.com

  9. Nathalie ll y a 5 ans

    Bonjour Allison,
    Petite précision le clic droit fonctionne sur articulate mais pas sur moodle

    Merci

    • Auteur
      Allison LaMotte ll y a 5 ans

      Bonjour Nathalie,
      Avez-vous pu tester le module sur SCORM Cloud? Sinon, je vous conseille de le faire. C’est le standard en LMS aujourd’hui donc on l’utilise pour déterminer si le problème vient du module ou du LMS. Voici un article qui explique la procédure à suivre pour tester le module : https://blogs.articulate.com/les-essentiels-du-elearning/comment-depanner-votre-lms-avec-scorm-cloud/

      En gros, si le module fonctionne sans problème sur SCORM Cloud, le problème vient du LMS. Si le module rencontre le même problème sur SCORM Cloud que sur votre LMS, le problème vient du module. 

      Si le problème vient du module, il faudrait envoyer les fichiers sources et à notre équipe de support en leur expliquant le problème pour qu’ils puissent vous aider à le résoudre. Si le problème vient du LMS, il faudrait contacter votre fournisseur de LMS pour essayer de le résoudre.

      J’espère que ça répond à  votre question ! N’hésitez pas à revenir vers moi si besoin.

  10. Nathalie ll y a 5 ans

    Bonjour Allison,
    Merci pour l’info. Je ferai un test sur le SCORM Cloud.

  11. pascale ll y a 5 ans

    Bonjour
    Merci pour ce guide trés complet. je ne trouve toutefois pas la réponse à ma question. Lorsque que l’on créé des boutons avec des formes et que l’on associe un état normal et un état sélectionné, lorsque l’on passe d’un bouton à l’autre, la couleur devait changer: lorsque l’on clique sur le bouton 2, le bouton 1 passe à l’état normal. Sur vos templates ça marche mais lorsque je le reproduis ça ne fonctionne pas !
    merci d’avance pour votre aide

    • Auteur
      Allison LaMotte ll y a 5 ans

      Bonjour Pascale,
      Pour ça, il faut utiliser un ensemble de boutons. C’est expliqué dans l’avant dernière partie de l’article. Dites-moi si jamais ça ne fonctionne toujours pas après.

  12. sebastien ll y a 5 ans

    Bonjour Allison,

    Je cherche un moyen de déclencher un jeu ludique une fois que les apprenants ont visualisé plusieurs cours.
    Cours et jeu sont dans des scènes différentes à chaques fois. Je ne trouve pas l’état et le déclencheur correspondant.
    Comment puis-je faire svp

    • Auteur
      Allison LaMotte ll y a 5 ans

      Bonjour Sébastien,
      Est-ce que votre module est linéaire ou bien les apprenants peuvent suivre le module dans l’ordre qu’ils souhaitent ?

  13. Lolita ll y a 4 ans

    Bonjour Allison,
    Merci pour ce guide mais je ne trouve malheureusement pas la réponse à mon soucis.
    Je suis en train de créer un quiz sur storyline.
    J’ai créer un bouton à partir d’un icone.
    J’ai mis un déclencheur « valider… » quand l’utilisateur « clique… ».
    Le calque « correct » s’affiche parfaitement bien quand je sélectionne la bonne réponse. Par contre, quand je sélectionne une mauvaise réponse, je suis obligée de cliquer deux fois sur le bouton pour que le calque incorrect s’affiche.
    Sauriez-vous pourquoi?
    Merci
    Lolita

    Bien cordialement

  14. francois ll y a 4 ans

    Bonjour Allison,
    Voici ma problématique de vieux bourlingueur sous Flash.
    J’utilise les boutons intégrés au lecteur.
    Je masque donc le bouton SUIVANT en entrée de slide et le remet en normal en fin de slide.
    Mon soucis est lors d’un retour par PRECEDENT.
    Je n’arrive pas provoquer une condition de slide déjà vu pour laisser le bouton SUIVANT en normal sans utiliser une variable par slide. Par avance merci.

    • Auteur
      Allison LaMotte ll y a 4 ans

      Bonour François,
      Le plus facile serait de changer les paramètres de diapo à « reprendre l’état sauvegardé » au lieu de « décider automatiquement » ou « réintialiser » pour que le module « mémorise » le fait que l’apprenant a déjà vu la diapo.

  15. julien ll y a 3 ans

    Bonjour Allison,
    J’ai un souci avec 6 boutons qui peuvent se déclencher en même temps si l’apprenant clique sur les 6 boutons.
    Pour info 1 bouton déclenche 1 calque avec un texte + une voix.
    Du coup j’ai les 6 voix en même temps.
    J’ai utilisé la technique de sélection des 6 boutons + clic droit + ensemble des boutons1..
    Mais ça ne fonctionne pas.
    Vous avez une idée ?

    Merci de votre aide et très bonne journée
    Cordialement
    Julien

    • Auteur
      Allison LaMotte ll y a 3 ans

      Bonjour Julien,
      Avez-vous bien coché la case « masquer les autres calques » dans les propriétés de calque ?

  16. SANDRINE ll y a 3 ans

    Bonjour Alisson,
    Comment faire pour qu’un objet sur une diapo (celle du plan) change d’état à partir du moment où certaines slides ont été visionnées ? Merci.

    • L’équipe Articulate ll y a 3 ans

      Bonjour Sandrine,
      vous pourriez créer une variable (Vrai/Faux) puis modifier sa valeur (avec un déclencheur) quand une certaine diapositive a été visionnée. Sur votre diapositive principale, vous pouvez changer l’état d’un objet au démarrage de la chronologie à l’aide d’un déclencheur avec une condition qui vérifie la valeur de la variable. Téléchargez le template du tableau de bord, il vous aidera à démarrer. Bonne journée !

  17. emmanuelle ll y a 2 ans

    Bonjour !
    J’ai crée un questionnaire (pas un quiz) avec des boutons radio. Je dois comptabiliser le nombre de réponses A, le nombre de réponses B et additionner ces 2 totaux pour obtenir un score.
    J’ai choisi une syntaxe du type : ajouter la valeur 1 à total A quand l’utilisateur clique sur bouton Calculer si l’état de Question-1A est égal à sélectionné (inspirée du travail de Chris Foster sur le questionnaire Burn Out, mis a part que mon questionnaire comporte deux dimensions).
    Je m’aperçois que c’est le nombre de clics sur le bouton qui est comptabilisé et non pas l’état du clic au moment d’appuyer sur le bouton de résultat. Comment « figer » l’état affiché à l’écran ? Un grand merci pour votre aide !
    J’aurai d’autres questions relatives à l’addition de variable, que je soumettrai si j’arrive à surmonter le pb ci-dessous.
    Mille mercis par avance

    • L’équipe Articulate ll y a 2 ans

      Bonjour Emmanuelle,
      on vous conseille d’envoyer votre fichier au support technique pour qu’ils regardent de plus près.
      Assurez-vous de ne pas rajouter 1 point à chaque clic sur un bouton radio. Le calcul de points se fait au moment d’appuyer sur le bouton Calculer. Merci, bonne journée !

  18. Mahery Razaka ll y a 7 mois

    Bonjour,
    j’arrive pas à masquer le bouton validé si la réponse est fausse (code déclencheur confondu), est-ce-que vous pouvez m’aider s’il vous plait.
    Merci

Pingbacks

  1. […] Si vous créez votre module dans Storyline 360, vous pouvez utiliser la fonctionnalité États pour modifier le format de vos boutons lorsque les apprenants les survolent, cliquent dessus ou les font glisser, par exemple. Pour en savoir plus, cliquez ici : Guide des boutons de Storyline. […]

Laisser un commentaire à Lolita Cliquez ici pour annuler votre réponse

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

*