Réaliser un quiz Flash 8 /ActionScript

b.t.s.
communication visuelle / option mma
2
TECHNO
Réaliser un quiz
Flash 8 / ActionScript
°année
multimédia
Le quiz détaillé ici comprend cinq questions avec trois possibilités de réponse à chaque fois. Afin de passer à la
question suivante, il est impératif d’avoir coché une réponse. Dans le cas contraire, un message d’erreur apparaît à
l’écran.
Afin de sélectionner une seule réponse à chaque fois, l’animation fait appel à des fonctions basiques de Flash telles
que les boutons qui, grâce à un peu d’ActionScript, agissent comme les boutons radios que l’on retrouve dans les
formulaires HTML. Après avoir terminé le quiz, une page récapitulative se charge d’afficher le résultat ainsi qu’un
message personnalisé correspondant au nombre de points obtenus.
L’INTERFACE
DU QUIZ
ORGANISATION DES ÉLÉMENTS
Créer un premier calque et nommer-le fond
Placer sur ce calque l’arrière-plan de votre quiz : fond coloré, dégradé, images, etc.
Insérer un nouveau calque et nommer-le questions.
Placer-le au-dessus du calque fond
Créer 5 images-clés (F6) correspondant à chacune des questions qui seront insérées par la suite
Enfin, un calque nommé Actions contiendra le code ActionScript. Ici il s’agira d’initier les variables qui composent
l’animation.
INSÉRER LE CODE ACTIONSCRIPT
Écrire sur chaque image une question et les 3 propositions de réponses correspondantes
Placer votre curseur sur la 1ère image-clé du calque Actions
Ouvrir la fenêtre d’actions
Insérer le code suivant :
stop();
varselection = false;
msg._visible = false;
total = 0;
Stop() permet de stopper l’animation à la première image-clé.
varselection est une variable qui permet de vérifier si une question a été cochée (true) ou non (false).
msg est l’occurrence du movie-clip avertissement qui contient le message d’avertissement et sera créée par la
suite. Au lancement de l’animation, celui-ci est invisible.
total est une variable correspondant au nombre de points acquis et qui permettra d’afficher un message
personnalisé à la fin de l’animation.
CRÉATION DU MESSAGE D’AVERTISSEMENT
Afin de progresser dans le quiz, une réponse est obligatoire pour chaque question. Au cas où l’utilisateur souhaiterait
passer à la question suivante sans avoir coché de réponse, un message d’avertissement apparaît.
Créer un symbole Clip depuis le menu Insertion/Nouveau symbole et nommez-le avertissement
Placer le texte du message, "veuillez cocher une réponse"
Revenir sur la scène principale
Créer un nouveau calque et nommer-le message. Celui-ci doit se prolonger jusqu’à l’image 5, afin d’être visible à
tout moment
Placer le texte sur le calque message
Afin de pouvoir être utilisée en programmation ActionScript, l’occurrence de ce symbole doit être nommée.
Ouvrir la fenêtre Propriétés depuis Fenêtre/Propriétés et nommer l’occurrence msg
1
lyceelecorbusier_jcg_2006/2007
PASSAGE D’UNE QUESTION À L’AUTRE
Afin de passer d’une question à l’autre, il est nécessaire de cliquer sur un bouton permettant de passer la suivante.
Lors du clic, un test est également effectué afin de s’assurer qu’une réponse a bien été cochée.
Créer un nouveau bouton (Ctrl + F8) nommé bt_suivant
Dessiner le bouton sur l’image Haut
Revenir sur la scène
Placer le bouton sur le calque message
Ouvrir la fenêtre d’actions (F9) et insérer le code suivant [sur le bouton]:
on (press) {
if (varselection == false) {
msg._visible = true;
gotoAndStop (this._currentframe);
} else {
nextFrame();
valide._y = -100;
varselection = false;
msg._visible = false;
total = Number(total)+points;
}
}
Lors d’un clic sur le bouton, grâce à la fonction on(press), Flash vérifie si l’une des réponses a été sélectionnée.
Si la variable varselection est égale à false, c’est-à-dire qu’aucune réponse n’a été sélectionnée, le message
d’avertissement créé ultérieurement apparaît à l’écran en activant sa visibilité à true.
Dans le cas contraire, c’est-à-dire si un bouton a bien été coché, Flash passe à la question suivante. Le message
d’avertissement disparaît et les points éventuellement acquis sont ajoutés lors du passage à la question suivante.
Afin de tester votre animation, appuyer sur Ctrl + Entrée.
Il est possible maintenant passer d’une question à l’autre et constater que, dans le cas où aucune réponse n’aurait été
sélectionnée, un message d’avertissement apparaît.
CRÉATION DES
BOUTONS DU QUIZ
CRÉATION DE L’ÉTAT COCHÉ
Dans ce quiz, chaque proposition de réponses se trouve après un bouton radio qui dispose de deux états: vide et
coché. Une seule réponse peut être cochée à la fois. Cet état va être reproduit très facilement à l’aide des symbolesbouton de Flash.
Créer un nouveau calque sur la scène et nommer-le validation
Se placer sur l’image-clé du calque validation
Appuyer sur F5
Prolonger le calque validation jusqu’à l’image 5
Dessiner un cercle rempli représentant votre bouton coché
Sélectionner le dessin
Appuyer sur F8
Choisir le comportement Clip
Nommer-le mc_coché
Revenir sur la scène
Placer ce clip en-dehors de la scène
En effet, celui-ci va servir de moteur au quiz puisqu’il va contenir du code, mais il sera invisible.
Nommer l’occurrence de ce clip valide depuis la fenêtre de Propriétés
CRÉATION DE L’ÉTAT VIDE
Créer un nouveau symbole Bouton nommé bt_radio_clip
Dessiner le bouton sur l’image Haut.
Créer un nouveau symbole Clip
Nommer-le mc_radio_clip
Insérer le bouton bt_radio_clip dans ce movie-clip
Sur ce bouton, insérer le code suivant :
on (press) {
_root.valide._x = this._x;
_root.valide._y = this._y;
_root.varselection = true;
_root.msg._visible = false;
_root.points = result;
}
2
lyceelecorbusier_jcg_2006/2007
Lors d’un clic sur le bouton radio, le clip coché prend la position en X et en Y du bouton. Afin de savoir si un clic
a été effectué, la variable varselection prend pour valeur true. Dans le cas où aucune réponse n’aurait été
sélectionnée, la valeur de la variable varselection est false.
Revenir maintenant sur la scène.
TESTER LES
RÉSULTATS DU QUIZ
COMPTER LES POINTS
Ouvrir la bibliothèque
Sélectionner le clip mc radio clip avec un clic droit de la souris
Choisir Définition du composant qui s’affiche
Appuyer sur le bouton +
Créer une variable nommée result
Valider
En appliquant une variable à un clip, il se transforme en composant.
Placer ce composant devant chaque proposition de réponses, soit 15 fois en tout (5 questions et 3 réponses possibles
par question), sans oublier à chaque fois d’attribuer une valeur à la variable result précédemment créée depuis la
fenêtre de Propriétés > Paramètres.
Chaque bonne réponse aura une valeur 1 et chaque mauvaise réponse aura pour valeur 0.
Le test s’effectuera lors du passage à la question suivante, en cliquant sur le bouton bt_suivant.
RÉALISER L’ÉCRAN FINAL
Créer un nouveau calque et nommez-le écran final.
Selon le nombre de points réalisés à la fin du quiz, un message personnalisé apparaît. Ici, 3 messages ont été créés :
_ le nombre de bonnes réponses est égal ou inférieur à un;
_ le nombre de bonnes réponses est compris entre deux et quatre;
_ le nombre de bonnes réponses est égal à cinq, soit un sans-faute.
Créer un symbole-clip nommé mc_fin.
Placer le texte de votre choix qui correspondra à un sans-faute.
Créer 2 autres images-clés en appuyant sur F6.
Sur la seconde image-clé, insérer le texte correspondant à un score moyen (2 à 4 bonnes réponses)
Sur la dernière image-clé, le texte correspondant à un nombre de bonnes réponses inférieur à 1.
Le calque comporte maintenant trois images-clés.
Créer un nouveau calque dans votre clip et nommez-le chiffre. Ce calque doit se prolonger jusqu’à l’image 3.
Un texte dynamique correspondant au score réalisé sera placé sur le calque.
3
lyceelecorbusier_jcg_2006/2007
Pour l’insérer, sélectionner l’outil Texte
Ouvrir la fenêtre de Propriétés et sélectionner Texte dynamique
Dans le champ variable, insérer pour nom _root.total
_root indique à Flash que l’on s’adresse à une variable qui se trouve sur la scène, ici la variable total qui stocke
le score final du quiz.
Utiliser maintenant l’outil Texte afin de créer un champ de texte dynamique vide.
Votre champ de texte apparaît sous forme de pointillés sur la scène.
Créer un nouveau calque nommé Actions.
Sur la 1ère image clef ajouter le code suivant :
stop();
if (_root.total ==5) {
gotoAndStop (1);
}
if (_root.total >= 2 & _root.total < 5) {
gotoAndStop (2);
}
if (_root.total < 2) {
gotoAndStop (3);
}
Revenir sur la scène.
Sur le calque écran final, créer une nouvelle image-clé à l’image 6.
Placer sur l’image créée le clip fin.
Créer un bouton qui permettra de recommencer le quiz
Dessiner votre bouton sur l’image Haut
Insérer ce bouton sur le calque écran final
Sélectionner le bouton et ajouter le code suivant :
on (press) {
gotoAndStop (1);
}
Tester et publier l’animation...
4
lyceelecorbusier_jcg_2006/2007