Gestion des événements de boutons dans Adobe Animate

Code : ajout d'un comportement bouton au movieClip
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 comment activer la gestion des événements de souris pour les movie clips.
  • Apprendre à modifier le style du curseur pour indiquer l'interactivité.
  • Prévenir les conflits graphiques en désactivant l'interactivité des enfants dans les boutons.

Apprenez à gérer les événements de boutons avec des scripts dans Adobe Animate.

Dans cette leçon, nous allons explorer comment ajouter de l'interactivité à un bouton dans Adobe Animate en utilisant des scripts. Nous commencerons par activer la gestion des événements de souris sur les symboles de type movie clip. Ensuite, nous ajouterons des styles pour nos boutons afin d'améliorer l'expérience utilisateur.

La partie la plus essentielle comprend trois lignes de code cruciales : activer la gestion du mouse over, changer le style du curseur en pointe de main pour indiquer l'interactivité, et désactiver l'interaction des éléments graphiques enfants pour éviter le parasitage. Cette approche assure que votre bouton répond correctement et offre une expérience utilisateur fluide.

Cette vidéo ne couvre pas les événements de clics, déjà abordés dans une précédente leçon, et se concentre principalement sur l'interaction par survol de la souris.

Voir plus
Questions réponses
Pourquoi est-il important d'activer la gestion des événements de souris pour les movie clips ?
Sans activer cette gestion, les événements de souris sur les movie clips ne seront pas détectés, rendant le bouton inopérant.
Quel est le rôle de la ligne de code stage.enableMouseOver ?
Cette ligne de code active la gestion du survol de souris, permettant à l'application de détecter les mouvements de la souris sur les movie clips.
Pourquoi devons-nous désactiver l'interaction des éléments graphiques enfants dans un bouton ?
Cela prévient les conflits entre les éléments graphiques enfants, garantissant une réactivité propre et sans parasitage du bouton.
Donc maintenant si je teste, je constate qu'il ne se passe toujours rien tout simplement parce que pour l'instant je n'ai pas mis d'interactivité, je n'ai pas inséré d'interactivité de gestionnaire d'événements pour gérer les événements de mon bouton. Donc je retourne sur mon scénario principal et sur le calque prévu à cet effet, je vais rajouter mon code. Donc toujours essayez de commenter pour expliquer un petit peu les choses. Donc je vais prévoir deux scripts, un script pour le survol et un script pour la sortie du survol. Je ne mettrai pas d'événements de clics puisqu'on l'a déjà vu tout à l'heure dans la partie initiation à la programmation et on n'en a pas vraiment besoin pour cet exercice. Alors avant de démarrer sur les gestionnaires d'événements, lorsqu'on utilise un movie clip, il y a deux petites instructions qu'on doit prévoir qui sont importantes sinon notre bouton à partir d'un movie clip ne pourra pas fonctionner. C'est déjà activer pour le scénario la gestion du mousse over, donc de l'interactivité sur les symboles movie clip. Donc pour ça on a une instruction à ajouter qui est stage enable mousse over. Donc je vais mettre un commentaire, ça va être active la gestion du curseur. Ensuite je vais pouvoir rajouter un style à mon bouton parce que si je teste là actuellement, je vois que mon bouton quand il est survolé, j'ai toujours le, alors bon faite abstraction du petit cercle là qui tourne, c'est un problème qui est avec mon navigateur que je n'arrive pas à gérer pour l'instant, j'ai pas vraiment le temps et qui fait que j'ai quelque chose qui tourne en boucle, qui se charge, je ne vois pas où c'est mais bon c'est pas très grave, ça ne m'empêche pas de continuer. Donc j'ai quand même l'état, j'ai seulement l'état flèche, en fait j'ai pas l'état main qui m'indique que ce bouton est interactif. Donc ça je vais pouvoir le gérer par le code en rajoutant une petite ligne de code ici, vis, bouton, curseur, donc je vais mettre un style égale pointeur. Alors une chose que j'ai peut-être, ouais que je n'ai pas faite, que j'ai oublié de faire, c'est de donner un nom à mon bouton, à mon occurrence, donc ça c'est primordial parce que sans ça je ne peux pas y accéder par le code. Donc mon bouton est bien nommé bouton au niveau du panneau de propriété. Alors déjà je vais tester voir si ça fonctionne ce que j'ai mis là et je passe sur mon bouton, je vois que ça fonctionne bien, j'ai bien le changement de curseur quand je passe dessus avec la souris. Et une troisième ligne de code est importante, bouton mouseChildren égale false. Alors ça c'est important, je ne vais pas vraiment rentrer dans le détail, mais si on oublie de mettre cette instruction on risque d'avoir un parasitage en fait au niveau des éléments graphiques vectoriels qui sont contenus dans le symbole du bouton, dans la mesure où tous les éléments graphiques vont être considérés comme interactifs et vont se parasiter les uns par rapport aux autres. Donc en mettant cette ligne de code en fait, on dit au compilateur Animate au niveau du code de ne pas prendre en compte les éléments graphiques qui sont contenus à l'intérieur de mon bouton. Donc ça évitera énormément de problèmes au niveau de la réactivité de mon bouton. Voilà donc c'est pour ça qu'il faut pas oublier de mettre cette instruction en début de script.

Programme détaillé de la formation

Nos dernières formations Animate CC