Blog ENI : Toute la veille numérique !
💥 Un livre PAPIER acheté
= La version EN LIGNE offerte pendant 1 an !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. Animate 2023
  3. Texte et tableaux
Extrait - Animate 2023 Créer des contenus animés et interactifs en HTML5
Extraits du livre
Animate 2023 Créer des contenus animés et interactifs en HTML5 Revenir à la page d'achat du livre

Texte et tableaux

Introduction

Dans ce chapitre, vous réaliserez un quiz de culture générale constitué de quatre questions consécutives. Pour chaque question, l’utilisateur de ce quiz devra choisir entre quatre réponses possibles. Selon sa réponse, un smiley vert ou rouge lui indiquera si la réponse est correcte ou non. Enfin, à la fin de ces quatre questions, l’utilisateur obtiendra une note.

En fin de chapitre, vous reviendrez sur les variables de type array (tableau) pour que les questions de ce quiz arrivent dans un ordre aléatoire.

Gestion du texte

Réalisation d’un quiz

Fichier de départ : 1601Deb.fla

Fichier résultat : 1601Fin.fla

Visualisation web : 1601Fin.html

Objectif : réaliser un quiz de quatre questions. Passer d’une question à une autre à l’aide d’une barre de navigation.

Code JavaScript : gotoAndStop(numéro d’image)

 Ouvrez le fichier 1601Deb.fla. Ce fichier est constitué de trois calques.

Le calque fond ne contient que deux cadres texte et en bas de page une barre de navigation. Le cadre exercices contient un clip nommé exercice.

 Affichez la fenêtre Actions du calque action.

 Consultez tout d’abord la partie Global - Script.

Des variables ont été définies, elles serviront à afficher les consignes au fur et à mesure de l’avancement du quiz. Notez également sur la dernière ligne les variables qui seront utilisées pour la notation.

 Consultez ensuite la partie Séquence 1 - action : Image 1.

Rien de nouveau pour vous au départ si ce n’est les lignes 5 à 8 :

this.exercice.gotoAndStop(0) 
for(i=0; i<9; i++) {this.barreMenu["btMenu"+i].visible=false} 
this.barreMenu.btMenu7.visible=true ; 
var ctrlValid=true ; 

Le clip exercice est initialisé sur l’image 0.

Tous les boutons de la barre de navigation sont invisibles sauf le bouton n°7.

Enfin, une variable ctrlValid est définie à true.

 Portez également votre attention sur l’écouteur associé à la fonction actualiser :

Au départ, le code précise quel doit être l’affichage des cadres texte.

Une variable noImage est définie, elle correspond au numéro de l’image du clip exercice.

Ensuite, à partir de la ligne 22, le code est présenté sous forme de commentaires donc inactif. Vous le modifierez ultérieurement.

images/16SF01.PNG

Début du script de la fonction actualiser()

 Remarquez également, en bas de la fenêtre Actions le code des fonctions de navigation.

Les écouteurs sont définis sur les boutons btMenu6 et btMenu7 de la barre de navigation.

La fonction verifier est partiellement codée en commentaires. Seule une variable ctrlValid est définie à...

Tableaux

Vous avez déjà utilisé les tableaux dans les chapitres précédents. Cette fois-ci, vous aborderez un peu plus en détail ce type de variable.

Un tableau est un objet de type Array. Alors qu’une variable ne possède qu’une seule valeur à la fois, un tableau permet de stocker et de manipuler plusieurs données.

Dans un premier temps, vous allez créer un tableau et utiliser quelques-unes des nombreuses méthodes qui permettent de manipuler les données. Ensuite, vous reprendrez le quiz du début de ce chapitre et le modifierez pour que les différents tests arrivent dans un ordre aléatoire.

Gérer les entrées des tableaux

Fichier de départ : 1604Deb.fla

Fichier résultat : 1604Fin.fla

Visualisation web : 1604Fin.html

Objectif : manipuler les données d’un tableau.

Code JavaScript : length, push(), sort(), pop(), splice()

 Ouvrez le fichier 1604Deb.fla.

images/16SF13.PNG

La scène

La scène présente quatre cadres texte et huit boutons.

Les cadres texte devront afficher différents messages :

  • affichage0 (0) : contenu du tableau avant toute action des boutons,

  • affichage1 (1) : contenu du tableau après action des boutons,

  • affichage2 (2) : indication du rôle du bouton cliqué.

 Testez l’animation dans le navigateur, pour vérifier qu’à part le titre de la page, aucun texte ne s’affiche.

 Affichez la fenêtre Actions et définissez deux tableaux dont les entrées seront des fruits. Écrivez le code en ligne 17 :

var fruits0 = ["Pomme", "Poire", "Prune", "Orange", "Banane",  
"Abricot"] 
var fruits = ["Pomme", "Poire", "Prune", "Orange", "Banane",  
"Abricot"] 

Les actions des boutons modifieront les données du tableau fruits. C’est pour cette raison que, pour conserver l’affichage initial de ces données, vous devez définir un second tableau nommé fruits0.

 Ensuite, placez des écouteurs sur chaque bouton :

//Ecouteurs 
for(i=1; i<9; i++) { 
      this["bt"+i].etiquette.text="Action "+i 
      this["bt"+i].addEventListener("mouseover"...