Gestion des événements JavaScript dans Adobe Animate

Code : ajout de gestionnaires d'évènements pour cibler les animations internes du MC
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Ateliers créatifs Adobe Animate CC
Revoir le teaser Je m'abonne
Transcription

39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis

39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Les objectifs de cette vidéo sont de :

  • Comprendre l'ajout de gestionnaires d'événements JavaScript dans Adobe Animate.
  • Apprendre à cibler correctement les éléments en utilisant event.currentTarget.
  • Maîtriser l'animation des états de boutons pour des interactions riches.

Découvrez comment insérer et manipuler des gestionnaires d'événements dans Adobe Animate pour créer des interactions avancées avec les boutons.

Dans cette leçon, nous explorons les gestionnaires d'événements dans JavaScript et leur application au sein d'Adobe Animate. Vous apprendrez à utiliser les méthodes addEventListener pour les événements de mouseover (survol) et mouseout (sortie de survol) d'un bouton. La leçon montre d'abord comment ajouter ces gestionnaires et tester leur bon fonctionnement en traçant des messages dans la console. Ensuite, nous aborderons les bonnes pratiques pour cibler correctement l'élément sur lequel se produit l'événement en utilisant event.currentTarget au lieu de this. Cette technique est cruciale pour éviter les interférences entre le scénario principal et le scénario interne d'un bouton, assurant ainsi une interaction fluide et précise. Enfin, vous verrez comment animer les différents états du bouton (survol et sortie de survol) pour enrichir l'expérience utilisateur. La leçon insiste aussi sur l’importance de nommer correctement les fonctions et de structurer proprement le code afin de faciliter la maintenance et le débogage.

Voir plus
Questions réponses
Quels sont les événements principaux abordés dans cette leçon ?
Les événements principaux abordés sont mouseover (survol) et mouseout (sortie de survol).
Pourquoi utiliser <code>event.currentTarget</code> au lieu de <code>this</code> ?
Utiliser event.currentTarget permet de cibler l’élément sur lequel l'événement s'est produit, évitant ainsi les interférences entre le scénario principal et le scénario interne du bouton.
Comment ajoute-t-on un gestionnaire d'événement en JavaScript ?
On peut ajouter un gestionnaire d'événement en utilisant la méthode addEventListener, en spécifiant l'événement à écouter et la fonction à exécuter en réponse.
Maintenant que j'ai préparé mon script, je vais pouvoir insérer mes gestionnaires d'événements comme on l'a déjà fait dans un des exercices précédents. Donc, AddEventListener pour le MousseOver. Je vais appeler une fonction que je vais appeler SurVol. Voilà, je crée ma fonction SurVol. Alors pour l'instant, je vais lui mettre un traçage. Console.Log, bouton SurVoler. Et je vais copier tout ce script pour pouvoir aller un petit peu plus vite, changer juste l'événement MousseOut, sortie du SurVol. Et je teste pour voir si ça fonctionne. En ouvrant la console, et je vois que ça marche bien. Oui, alors j'ai dû faire une erreur quelque part. Oui, j'ai oublié de changer le nom de ma fonction, donc je vais l'appeler sortie. Parce que là, j'avais gardé le même nom de fonction, du coup, c'était la même fonction qui était appelée deux fois, sur le SurVol et sur la sortie du SurVol. Voilà, donc là on a bien le bouton SurVoler et la sortie du SurVol. Maintenant que je vois au niveau du traçage que mes gestionnaires d'événements fonctionnent parfaitement, j'ai plus qu'à remplacer cette instruction par la bonne. Et la bonne instruction, ça va être de cibler le bouton. Alors, vis bouton, go to end play. Et là, je vais renvoyer vers les étiquettes que j'avais prévues, SurVol. Et là, vis bouton, sortie. Je vérifie quand même que c'était bien ces noms que j'avais donnés à mes étiquettes. Oui, c'est bien ça, sortie et SurVol. Je teste. Alors là, je vois qu'il y a un souci. Alors, oui, mon souci. Ah oui, c'est au niveau du ciblage. Alors, effectivement, on va procéder différemment. Plutôt que d'utiliser vis, alors si je prends le mot clé vis, le problème c'est qu'Animate va considérer que c'est ce scénario sur lequel je suis. Il va y avoir une interférence entre le scénario principal et le scénario interne de mon bouton. Donc la solution, c'est d'utiliser EventCurrentTarget plutôt que vis. EventCurrentTarget, en fait, ça va me permettre de cibler l'élément sur lequel il y a une sortie de SurVol. Alors du coup, je vais devoir enlever le bouton. Je ne vais plus me servir du nom du bouton pour le ciblage. Donc EventCurrentTarget, c'est le bouton en lui-même. Donc je donne l'instruction d'aller dans le bouton qui est SurVolé, d'aller à telle image ou à telle image. Alors, ça ne marche toujours pas. Ah oui, dans ce cas-là, il faut mettre Event, effectivement. J'ai oublié de passer. Étant donné que je passe sur un fonctionnement un petit peu différent, en utilisant CurrentTarget, je dois bien sûr rajouter dans les paramètres de ma fonction, un mot clé qui est purement arbitraire, qui est un nom pour l'événement. Il pourrait très bien être E et non pas EVT, auquel cas il faudrait remplacer ici par E. Et là, c'est bon. On n'a plus de soucis. On n'a plus d'erreurs au niveau de la console JavaScript. Et on a bien un bouton qui, à la différence des boutons simples qu'on a programmés tout à l'heure, a un état animé sur le survol et un état animé sur la sortie du survol.

Programme détaillé de la formation

Nos dernières formations Animate CC