On m’a demandé d’expliquer comment implémenter (et animer) des statistiques avec Articulate Storyline, alors j’ai pensé vous faire une série d’articles là-dessus. On commence par la « pie chart », puisque… bon, c’est l’Action de grâces aujourd’hui et que cela m’a inspiré.
Étape 1 : Créer le modèle de base
En matière de « pie chart », plusieurs solutions sont possibles. Celle que j’ai retenue fait appel à deux formes superposées : un cercle, au premier plan ; et un camembert, au deuxième. Le camembert est légèrement plus grand que le cercle. C’est lui qui va simuler le mouvement. Le cercle, lui, va servir à définir les états.
Étape 2 : Définir un repère
Il va nous falloir ouvrir le camembert précisément. Je me suis fait un repère avec le site https://www.meta-chart.com/. J’ai ensuite importé le repère en question en Articulate Storyline sous la forme d’une image. C’est l’image que vous voyez en arrière-plan. Vous pouvez éliminer l’image après vous en être servi.
Étape 3 : Définir les états du cercle
Lorsqu’on définit les états d’un objet, on ne peut pas animer l’objet en question. On peut néanmoins animer les objets qu’on ajoute à l’état. C’est la raison pour laquelle on parle de définir les états du cercle et non pas les états du camembert. Dans l’exemple, le cercle comporte 9 états : l’état normal (le cercle vide), puis 8 états correspondant à l’une des ouvertures que j’ai décidé d’avoir (45º, 90º, 135º, 180º, 225º, 270º ou 360º).
Chacun des états a été implémenté en ajoutant un camembert avec l’ouverture mentionnée. Les ouvertures ont été choisies arbitrairement. Vous pouvez choisir celles qui conviennent à votre contenu. Le camembert est au second plan (derrière le cercle).
Étape 4 : Définir les déclencheurs
Il ne reste plus qu’à définir les déclencheurs (triggers) selon la logique de ce que vous désirez implémenter. Dans l’exemple, de simples boutons permettent de changer l’état du cercle.
Voici le résultat:
Powered by elearningfreak.comCliquez sur les boutons pour voir l’interaction.
Patricia
(17)