Blog ENI : Toute la veille numérique !
En raison d'une opération de maintenance, le site Editions ENI sera inaccessible le mardi 10 décembre, en début de journée. Nous vous invitons à anticiper vos achats. Nous nous excusons pour la gêne occasionnée
En raison d'une opération de maintenance, le site Editions ENI sera inaccessible le mardi 10 décembre, en début de journée. Nous vous invitons à anticiper vos achats. Nous nous excusons pour la gêne occasionnée
  1. Livres et vidéos
  2. Animate 2023
  3. Interroger et déboguer
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

Interroger et déboguer

Introduction

Lorsque vous testez une animation en HTML5, il arrive souvent que le navigateur ne s’ouvre pas ou que l’animation ne fonctionne pas. Il est fort probable que ce soit le code JavaScript qui en soit la cause.

Deux méthodes pour interroger ou alerter

Nous nous bornerons ici à la méthode alert() qui affiche dans le navigateur une boîte de dialogue dans laquelle est reproduite la valeur demandée, et la méthode console.log() qui affiche cette valeur non pas dans le navigateur mais dans les outils de débogage accessibles par la touche F12.

La méthode alert() - exemple 1

Fichier de départ : 0401Deb.fla

Fichier résultat : 0401Fin.fla

Visualisation web : 0401Fin.html

Objectif : utiliser la méthode alert() à l’ouverture de la page web.

Code JavaScript : alert()

 Dans Animate, ouvrez le fichier 0401Deb.fla.

 Testez l’animation dans le navigateur (CtrlEntrée).

Une boîte de dialogue s’ouvre en premier. Il faut d’abord cliquer sur le bouton OK pour confirmer que vous avez lu l’avertissement et pour ensuite avoir accès à l’affichage de la page HTML.

images/04SF01.png

Message d’alerte

 Fermez le navigateur et revenez à Animate.

Affichez la fenêtre Actions (touche F9) du calque action.

 Remarquez d’abord l’absence en début de code de l’instruction :

this.stop() 

Ce n’est pas nécessaire car le scénario ne comporte qu’une seule image.

 Par contre, notez la ligne de commande :

alert("Voici 6 liquides."+"\n"+"Attention, certains ne sont  
pas comestibles !!!") ; 

Ce texte doit apparaître...

Déboguer une animation

Des commentaires parfois bien utiles

Fichier de départ : 0404Deb.fla

Fichier résultat : 0404Fin.fla

Visualisation web : 0404Fin.html

Objectif : utiliser des commentaires pour trouver une erreur de syntaxe dans le code JavaScript.

 Ouvrez le fichier 0404Deb.fla.

 Testez l’animation dans le navigateur.

La page est vierge, rien n’apparaît, il y a donc une erreur.

 Appuyez sur la touche F12 pour afficher la fenêtre de débogage.

Une nouvelle fenêtre s’ouvre dont le nom commence par DevTools.

Un lien avec le nom du fichier y figure.

images/04SF07.png

Lien mentionnant une erreur

 Cliquez sur ce lien.

L’erreur, soulignée en rouge, indique que le problème vient de la syntaxe. Ce genre d’erreur est parfois difficile à trouver.

images/0708.png

Erreur de syntaxe

 Fermez le navigateur et revenez dans Animate.

 Affichez la fenêtre Actions (touche F9) et sélectionnez tout le texte.

 Faites un clic droit, puis choisissez l’option Commenter la sélection.

La totalité du code devient gris clair et chaque ligne est précédée de deux barres obliques.

 Testez l’animation dans votre navigateur.

La page s’affiche normalement mais aucun message n’apparaît et si vous cliquez sur une bouteille il ne se passe rien.

De même si vous utilisez la fenêtre de débogage...

Poser des questions

Il est parfois très utile d’avoir une idée sur les éléments qui composent une animation. Nous étudierons ici trois exemples pour obtenir des renseignements sur les occurrences qui composent la scène.

Connaître le nombre d’occurrences

Fichier de départ : 0405Deb.fla

Fichier résultat : 0405Fin.fla

Visualisation web : 0405Fin.html

Objectif : savoir combien d’occurrences comportent la scène.

Code JavaScript : numChildren

 Ouvrez le fichier 0405Deb.fla.

La scène présente une table sur laquelle sont placés un certain nombre de bouteilles. 

 Sélectionnez la première image du calque action et affichez la fenêtre Actions (touche F9). Saisissez le code :

alert(this.numChildren) ; 

 Testez l’animation dans le navigateur.

À l’ouverture de la page HTML, une alerte vous donne le nombre 7. Ce qui veut dire qu’il y a sept occurrences placées sur la scène.

 Fermez le navigateur et revenez dans Animate.

 Affichez la fenêtre Bibliothèque en haut à droite de l’écran.

On distingue les six symboles dont les occurrences ont été déposées sur la scène. Notez le cas du lait : 1 symbole et 2 occurrences.

images/0711.png

Nombre d’occurrences

Connaître le nom d’une occurrence

Fichier de départ : 0406Deb.fla

Fichier résultat : 0406Fin.fla

Visualisation web : 0406Fin.html

Objectif : afficher le nom d’une occurrence quand vous cliquez dessus.

Code JavaScript : e.currentTarget et name

 Ouvrez le fichier 0406Deb.fla.

La scène présente toujours la même table et les mêmes bouteilles.

 Testez l’animation dans le navigateur et cliquez tour à tour sur chaque bouteille. À chaque clic, un message vous indique le nom de la bouteille (bouteille1, bouteille2, etc.).

 Fermez le navigateur et revenez dans Animate.

Affichez la fenêtre Actions pour consulter le code.

//ECOUTEURS 
this.bouteille1.addEventListener("click", avertir1.bind(this)) 
this.bouteille2.addEventListener("click", avertir2.bind(this)) 
this.bouteille3.addEventListener("click", avertir3.bind(this)) 
this.bouteille4.addEventListener("click"...