Gestion des Conditions et des Événements avec Create.js

Code : ajout d'une action avec condition
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'utilisation des conditions et des gestionnaires d'événements en programmation, et de maîtriser les spécificités de Create.js pour une gestion efficace des états.

Apprenez à utiliser les conditions pour gérer les événements dans Create.js grâce à une programmation efficace.

Dans cette leçon, nous explorons l'utilisation des conditions pour contrôler les événements dans Create.js. Vous apprendrez comment utiliser l'instruction if pour vérifier l'état d'une variable et exécuter des actions en conséquence. En particulier, nous nous concentrons sur la gestion d'un gestionnaire d'événements commun pour toggler entre deux états : on et off.

Nous aborderons également une approche pratique pour cibler un scénario depuis l'intérieur d'une fonction. Cette technique est essentielle pour éviter les problèmes courants rencontrés avec Create.js, comparé à ActionScript, où la gestion des scénarios est plus intuitive.

En ajoutant et modifiant des étiquettes et en ajustant les valeurs des variables dynamiquement, vous serez en mesure de créer une fonction réutilisable et efficace. Enfin, nous couvrons les pièges à éviter, tels que la duplication des gestionnaires d'événements, et comment assurer une programmation propre et fonctionnelle.

Voir plus
Questions réponses
Pourquoi utilise-t-on des conditions dans un gestionnaire d'événements ?
Les conditions permettent d'exécuter différentes actions en fonction de l'état d'une variable, ce qui rend le code plus flexible et modulable.
Quelle est la différence entre un égal simple et un double égal en programmation ?
Un égal simple (=) est utilisé pour assigner une valeur à une variable, tandis que le double égal (==) est utilisé pour comparer la valeur de deux variables.
Comment éviter la duplication des gestionnaires d'événements dans Create.js ?
Pour éviter la duplication, assurez-vous que l'étiquette liée à l'événement ne réinitialise pas le gestionnaire d'événements à chaque boucle, ou placez le gestionnaire en dehors des cycles redondants.
Maintenant je vais utiliser pour l'instruction à l'intérieur de ma fonction cliquer, switcher, je vais utiliser ce qu'on appelle une condition pour pouvoir vérifier, pour pouvoir donner une instruction en fait en fonction de la variable actif. Donc comment ça va se passer ? A chaque fois que je vais cliquer sur cette zone en fait, je vais vérifier si la variable actif est égale à off ou à on, et en fonction je renverrai vers off ou vers on. Ça me permet en fait d'avoir une seule programmation, un seul gestionnaire d'événements, mais en fonction de la valeur d'une variable, on voit un petit peu à quoi peut servir une variable d'une manière pratique, en fonction de la valeur de la variable actif, je renverrai vers tel ou tel état. Donc pour créer une condition, on utilise if, entre parenthèses, la condition en elle-même. Ouvrez la collade et fermez la collade. Alors si cette condition est vraie, exécuter cette action qui se trouvera ici, ou si ça n'est pas le cas, exécuter une autre instruction qu'on va pouvoir saisir ici. Alors la condition, ça va être if this active est égal à off, donc ce sera le cas dès le début en fait, puisque au début de notre script, on a créé la variable actif et on lui a donné la valeur off. Donc dès le début, cette valeur va s'avérer vraie, et du coup c'est cette ligne de code qui va être exécutée en premier. Alors c'est là que je vois que plutôt que d'utiliser this, c'est-à-dire le scénario sur lequel je suis, je vais utiliser la variable que j'avais créée ici pour récupérer le chemin du scénario, de manière à pouvoir y accéder depuis l'intérieur de ma fonction switcher. C'est un problème qu'on a avec Create.js, qu'on n'a pas en ActionScript. On a difficulté à pouvoir cibler un scénario depuis l'intérieur d'une fonction, et on doit recourir à cette astuce pour mémoriser le scénario principal dans une variable et pouvoir y accéder depuis l'intérieur d'une fonction. Donc if this active est égal à off, alors là vous voyez qu'on a une petite variante entre le égal qui se trouve ici et celui-ci. Là on a un égal simple qui sert à donner une valeur à une variable, cette variable je lui donne la valeur this, cette variable je lui donne la valeur chaîne de caractère off, et le double égal sert à vérifier la valeur d'une variable. Donc si cette variable a la valeur off, j'exécute cette instruction. Donc l'instruction que je vais donner, là je vais encore utiliser, alors je vais enlever les commentaires parce que ça va plus fonctionner, this goto and stop on, et si ce n'est pas le cas this goto and stop off. Alors c'est là que je me rends compte que tout à l'heure j'avais dit qu'il ne fallait pas de label, mais en fait là je suis en train de renvoyer vers des labels, donc il faut quand même rajouter ces labels, ces étiquettes, sinon je peux éventuellement renvoyer vers les numéros d'images, mais autant rajouter des labels, ça sera plus parlant. Donc this goto and stop on ou this goto and stop off. Donc c'est un renvoi vers une étiquette qui s'appelle on et vers l'étiquette qui s'appelle off, que j'avais oublié d'insérer. Et la dernière chose qu'il ne faut pas oublier, c'est le changement de la valeur de la variable active, parce qu'en fait à chaque fois on vérifie si la valeur est égale à off ou à on, mais ensuite on renvoie vers un nouvel état. Donc il faut changer la valeur de cette variable. Donc si elle est égale à off, je vais la passer sur la valeur on et ici si elle est égale, donc si elle n'est pas égale à off, c'est à dire qu'elle est égale à on, et du coup je vais devoir la passer à la valeur off. Alors ça je vais le passer, je vais mettre cette instruction en premier parce que ça me paraît, dans la séquence, ça me paraît plus logique de la mettre en premier, même si dans les deux cas ça fonctionnera. Oui j'ai passé en premier, active égale on, active égale off. Voilà je pense que ça devrait être bon. Je vérifie, je teste, je lance ma console pour voir si j'ai pas d'erreur et je vois que ça fonctionne. Ah oui alors là juste le petit souci, alors je vais tester, je vais faire un test dans la console sur le clic pour voir éventuellement d'où vient le problème, parce que j'ai, console log cliquer, j'ai oublié de fermer, et je clique. Je vois d'où vient le problème, je vois qu'à chaque fois que je clique en fait j'ai plusieurs fois le trace, ça ça veut dire que effectivement, j'ai compris d'où venait le souci, en fait j'ai mis mon étiquette off sur la première image et comme sur la première image je crée mon gestionnaire d'événements, en fait à chaque fois que je reviens, alors là quand j'avais mis mon étiquette ici, à chaque fois que je revenais sur la première image, un nouveau gestionnaire d'événements était rajouté sur la zone, du coup je me retrouvais avec plusieurs gestionnaires d'événements et qui se parasitaient les uns avec les autres. Donc là en déplaçant l'étiquette off, théoriquement j'ai mon instruction, mon premier gestionnaire d'événements qui est placé, qui est déclaré sur ma zone et je ne devrais plus avoir de problèmes. Voilà c'est bon. On est bon, on a un bouton qui fonctionne parfaitement.

Programme détaillé de la formation

Nos dernières formations Animate CC