Comment implémenter des statistiques avec Articulate Storyline

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.

Choix de la forme Camembert qui va servir à implémenter des statistiques.
Choix de la forme Camembert qui va servir à implémenter les statistiques.

É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).

Définition des états du cercle qui va servir à représenter les statistiques.
Définition des états du cercle qui va servir à représenter des statistiques.

É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.com

Cliquez sur les boutons pour voir l’interaction.

Patricia

(8)

Merci de partager !

Un commentaire? On vous écoute.

Ce site utilise Akismet pour réduire le pourriel. En savoir plus sur comment les données de vos commentaires sont utilisées.