CATALOGUE Code & Data Formation Animate CC Ateliers créatifs Adobe Animate CC

Gestion des événements JavaScript dans Adobe Animate

Retour à la formation
Chapitre 2 Leçon 3
Précédent
Suivant

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.

Détails de la leçon

Description de la leçon

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.

Objectifs de cette leçon

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.

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé :

  • D'avoir des connaissances de base en JavaScript.
  • De comprendre les fondamentaux d’Adobe Animate.
  • D'être familier avec la gestion des événements en programmation.

Métiers concernés

Les compétences abordées dans cette vidéo sont utiles pour :

  • Les développeurs interactifs.
  • Les animateurs numériques.
  • Les professionnels du marketing digital souhaitant créer des animations interactives engageantes.

Alternatives et ressources

Comme alternatives, vous pouvez utiliser :

  • Google Web Designer pour des animations HTML5.
  • GreenSock Animation Platform (GSAP) pour des animations et interactions JavaScript performantes.
  • librarie Three.js pour les animations 3D interactives.

Questions & Réponses

Les événements principaux abordés sont mouseover (survol) et mouseout (sortie de survol).
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.
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.