Share
Dans ce didacticiel, je vais vous expliquer le cadre d'événements ActionScript 3.0. Après ce tutoriel, vous devriez avoir une idée claire du fonctionnement des événements, des répartiteurs et des écouteurs d’événements..
Comme le cadre d’événement AS3 est énorme, nous examinerons toutes les choses qui le composent. Nous allons en apprendre davantage sur les points suivants:
Je pense vraiment que vous auriez du mal à comprendre le cadre de l’événement si nous passons directement au jargon technique. C’est pourquoi je vais tout d’abord décrire une situation réelle. La situation dans son ensemble est une métaphore du cadre de l'événement. Ok, alors on y va:
Je suis un lecteur assidu de Arts informatiques et j'attends chaque jour le nouveau numéro. Quand je reçois le problème, je commence à le lire.
Bon, il y a plusieurs choses qui se passent:
J'ai mentionné plusieurs choses:
Un événement est un objet qui décrit une occurrence, dans Étape 1 l'événement est l'arrivée d'un nouveau numéro.
La plupart du temps, vous verrez un événement écrit dans une structure similaire à celle-ci:
MouseEvent.CLICK
Cet extrait de code comprend deux choses:
Le type d'événement est en fait une chaîne de constante statique. Cela peut paraître étrange, mais un événement n'est rien d'autre qu'une chaîne. Essayez d'exécuter cet extrait.
trace (MouseEvent.MOUSE_MOVE);
Vous aurez comme sortie mouseMove. Nous venons de suivre la constante MOUSE_MOVE, qui fait partie de la classe MouseEvent. Un événement est une chaîne! Mais cette chaîne représente l'occurrence de (dans cet exemple) le mouvement de la souris.
Un événement se passe toujours quelque part. Où l'événement se produit est l'endroit où il est renvoyé (expédié). Les racines des événements de répartition se trouvent dans la classe EventDispatcher. Rendez-vous compte que l'endroit où l'événement est envoyé est l'endroit où il se produit. Donc si clip vidéo A envoie un événement, puis un écouteur d'événements (les écouteurs d'événements seront expliqués à l'étape 5) ajouté à clip vidéo B ne recevrait pas cet événement.
Pour faciliter les choses, tous les objets d'affichage ont la fonction intégrée dispatchEvent (événement: événement), juste comme beaucoup d'autres classes.
var myMC: MovieClip = new MovieClip (); myMC.dispatchEvent (new Event (MouseEvent.CLICK));
Mais la plupart du temps, les événements ne sont pas envoyés manuellement, la plupart du temps, ils sont automatiquement envoyés. Par exemple, si je clique sur le clip A, l'événement MouseEvent.CLICK sera automatiquement envoyé..
Lorsqu'un événement donné se produit, nous, développeurs Flash, souhaitons faire quelque chose pour répondre à cet événement. Les auditeurs d'événements sont ce dont vous avez besoin. Les auditeurs d'événements n'ont pas leur propre classe, non, ils sont un peu différents. Les écouteurs d'événement sont ajoutés à un objet. Les écouteurs d'événement sont des objets qui "écoutent" un certain événement. Lorsque cet événement se produit, une fonction sera appelée, un gestionnaire (fonction).
Regardez l'image ci-dessous, montrant la syntaxe derrière la fonction addEventListener (), qui est utilisé pour ajouter un écouteur d'événement:
En fait, ce ne sont pas tous les paramètres acceptés par la méthode addEventListener, il en reste trois que je n'ai pas mentionnés. Vous ne les utiliserez presque jamais, en particulier lorsque vous venez de commencer à utiliser des écouteurs d'événement. Regardons à nouveau la structure de la méthode addEventListener.
addEventListener (type: String, auditeur: Function, useCapture: Boolean = false, priorité: int = 0, useWeakReference: Boolean = false): void
Discutons donc des 3 derniers paramètres:
Supprimer un écouteur d'événement est aussi simple que d'en ajouter un.
// ceci ajoute un écouteur d'événement à la scène stage.addEventListener (MouseEvent.CLICK, clickHandler); // ceci supprime l'écouteur d'événements ajouté à la scène stage.removeEventListener (MouseEvent.CLICK, clickHandler);
Lorsque l'événement qu'un écouteur d'événements est à l'écoute se produit, il appelle une fonction. Cette fonction s'appelle le gestionnaire ou la fonction auditeur. Regardez l'image ci-dessous, montrant la syntaxe du gestionnaire:
Notez l'argument dans le gestionnaire, cet argument est obligatoire. La fonction d'écoute n'a qu'un seul argument et n'est pas autorisée à en avoir plus. Cet événement contient des informations sur l'événement, nous en parlerons dans étape 9.
Maintenant, nous voulons que myMC réponde à l'événement envoyé. Nous allons donc ajouter un événement et ensuite la fonction de gestionnaire. Notre code ressemblera à ceci:
Accentsconagua
// crée notre clip myMC var myMC: MovieClip = new MovieClip (); // laisse myMC envoyer l'événement MouseEvent.CLICK myMC.dispatchEvent (new Event (MouseEvent.CLICK)); // ajouter un écouteur d'événement à myMC, écoutant l'événement MouseEvent.CLICK et appelant clickHandler myMC.addEventListener (MouseEvent.CLICK, clickHandler); // définit la fonction du gestionnaire function clickHandler (event: Event) trace ("Ive entendu l'événement MouseEvent.CLICK"); Ensuite, testez votre film (Windows: Ctrl + Entrée, Mac: Cmd + Entrée).
Avez-vous eu une sortie? Non? Eh bien, moi non plus. Nous allons examiner ce qui ne va pas à l'étape suivante..
Alors qu'est-ce qui ne va pas? Eh bien, cela ne peut pas être une erreur de syntaxe, du moins je suis ne rien obtenir. Non, ce n'est techniquement même pas une erreur. Regardez le code à nouveau, mais cette fois rappelez-vous que le code sera exécuté ligne par ligne:
// crée notre clip myMC var myMC: MovieClip = new MovieClip (); // laisse myMC envoyer l'événement MouseEvent.CLICK myMC.dispatchEvent (new Event (MouseEvent.CLICK)); // ajouter un écouteur d'événement à myMC, écoutant l'événement MouseEvent.CLICK et appelant clickHandler myMC.addEventListener (MouseEvent.CLICK, clickHandler); // définit la fonction du gestionnaire function clickHandler (event: Event) trace ("Ive entendu l'événement MouseEvent.CLICK"); J'espère que vous avez compris ce qui n'allait pas: l'événement est envoyé avant qu'un écouteur d'événements ne soit ajouté à myMC. Ainsi, lorsque l'écouteur d'événement a été ajouté, il est trop tard, l'événement est arrivé. Heureusement, il est facile à résoudre, il suffit de modifier l'ordre et d'ajouter tout d'abord l'écouteur d'événement, puis d'envoyer l'événement par la suite:
// crée notre clip myMC var myMC: MovieClip = new MovieClip (); // ajouter un écouteur d'événement à myMC, écoutant l'événement MouseEvent.CLICK et appelant clickHandler myMC.addEventListener (MouseEvent.CLICK, clickHandler); // laisse myMC envoyer l'événement MouseEvent.CLICK myMC.dispatchEvent (new Event (MouseEvent.CLICK)); // définit la fonction du gestionnaire function clickHandler (event: Event) trace ("Ive entendu l'événement MouseEvent.CLICK"); Alors pourquoi avons-nous fait tout cela? Eh bien, vous rencontrerez probablement ce problème et il faudra peut-être un certain temps pour comprendre ce qui se passe. Il vaut mieux vous montrer le problème et vous apprendre à le résoudre..
Chaque fonction de gestionnaire a un argument. l'argument de l'événement. Cet argument contient des données sur l'événement et le répartiteur d'événements. Le paramètre contient des propriétés que nous aimerions lire. Voici une liste de certains des plus couramment utilisés:
Avec cela, nous pouvons utiliser le même gestionnaire pour différents types d'événements. Comment? Eh bien, nous en discuterons dans la prochaine étape.
D'accord, examinons d'abord cet extrait de code:
stage.addEventListener (MouseEvent.MOUSE_DOWN, downHandler); stage.addEventListener (MouseEvent.MOUSE_UP, upHandler); function downHandler (event: MouseEvent) trace ("Down"); function upHandler (event: MouseEvent) trace ("Up"); Nous utilisons deux événements, à savoir MouseEvent.MOUSE_DOWN et MouseEvent.MOUSE_UP. Le premier événement est l'événement lorsque la souris appuie sur le bouton principal de la souris et le maintient enfoncé. vers le bas. Lorsque la personne relâche ce bouton, l'événement MouseEvent.MOUSE_UP se produit. Le bouton de la souris va en haut après l'avoir relâché.
Maintenant, nous pouvons utiliser au lieu de deux gestionnaires (à savoir gestionnaire et upHandler) juste un gestionnaire. Supprimez le code que nous avons écrit et tapez ce qui suit:
stage.addEventListener (MouseEvent.MOUSE_DOWN, gestionnaire); stage.addEventListener (MouseEvent.MOUSE_UP, gestionnaire); fonction handler (event: MouseEvent) trace ("Quelque chose est arrivé…"); OK, nous avons configuré notre gestionnaire et cela fonctionne, mais nous souhaitons que notre gestionnaire fasse quelque chose de spécifique, en fonction de l'événement qui est transmis au gestionnaire. Heureusement, nous pouvons utiliser type d'événement. Utilisons-le!
stage.addEventListener (MouseEvent.MOUSE_DOWN, gestionnaire); stage.addEventListener (MouseEvent.MOUSE_UP, gestionnaire); gestionnaire de fonctions (event: MouseEvent) if (event.type == "mouseDown") trace ("Down"); else trace ("Up"); Maintenant, disons qu'un clic se produit sur un MovieClip, appelons cela mcA. L'événement n'est pas simplement envoyé à mcA, non, l'événement passe par tout le joueur. Ce voyage s'appelle le flux d'événements, il suffit de penser à la façon dont l'événement se déroule à travers le joueur.
L’événement commence au plus haut niveau, au étape, ensuite, il passera par le Parents de mcA, jusqu'à ce que l'événement atteigne mcA. Ensuite, l'événement "rebondira" de mcA, sur la scène.
Ok, cool, mais que puis-je utiliser pour ça? Parce que nous savons maintenant qu’un événement traverse tous les parents du répartiteur, nous pouvons utiliser simplement un écouteur d'événements, pour suivre les événements de plusieurs objets.
Bon, créons plusieurs clips vidéo les uns dans les autres. Vous pouvez le faire vous-même ou simplement utiliser le fichier step-11.fla fourni.
Nous allons créer 3 clips et leur donner les noms d'occurrence RedMC, blueMC et greenMC. Ensuite, placez tout cela dans un plus grand MovieClip, nommé récipient.
Commençons maintenant à écrire du code. J'ai déjà créé une couche nommée actes, alors écrivez votre code sur cette couche. Ajoutons d'abord un écouteur d'événement à récipient, écouter l'événement MouseEvent.CLICK, avec le gestionnaire nommé clickHandler.
conteneur.addEventListener (MouseEvent.CLICK, clickHandler); function clickHandler (event: MouseEvent) // corps de la fonction
Nous voulons savoir quel bouton est cliqué, alors pourquoi avons-nous ajouté un écouteur d'événement à un conteneur? Eh bien, regardez l'image ci-dessous:
Comme vous le voyez, l’événement est en cours d’expédition au redMC, mais il sera bulle retour au conteneur. Ensuite, l'écouteur d'événements ajouté au conteneur entendra l'événement et appellera la fonction d'écoute clickHandler. La même chose arrive avec blueMC et greenMC.
Nous allons maintenant utiliser event.target, car event.target est le répartiteur d'événements, et le répartiteur d'événements est redMC. Alors, comment pouvons-nous utiliser event.target? Nous pouvons vérifier event.target.name, qui renvoie le nom de l'instance sous forme de chaîne. Nous pouvons donc utiliser la normale si déclarations:
conteneur.addEventListener (MouseEvent.CLICK, clickHandler); function clickHandler (event: MouseEvent) if (event.target.name == "redMC") trace ("Red"); if (event.target.name == "blueMC") trace ("Blue"); if (event.target.name == "greenMC") trace ("Green"); Vous avez maintenant une bonne compréhension du cadre de l’événement. Cependant, pour réaliser quelque chose, l’essentiel est de savoir quel événement utiliser. Le Manuel de référence du langage et des composants ActionScript 3.0 est un excellent endroit pour vérifier quels événements existent. Cliquez simplement sur un événement contenant une classe, comme MouseEvent, et regardez en quoi consiste chaque événement..
Cet événement se produit lorsque l'utilisateur déplace la souris. Si vous ajoutez un écouteur d'événement écoutant cet événement, par exemple sur un MovieClip nommé myMC, vous saurez que la souris passe sur myMC..
myMC.addEventListener (MouseEvent.MOUSE_MOVE, mouseMoveHandler); function mouseMoveHandler (event: MouseEvent) trace ("Votre souris se déplace sur myMC"); Cet événement se produit lorsque l'utilisateur passe au-dessus (survole). Cet événement ne se produit que lorsque l'utilisateur déplace le curseur ailleurs sur l'objet. Déplacer la souris sur l'objet n'est alors plus l'événement MouseEvent.MOUSE_OVER, mais l'événement MouseEvent.MOUSE_MOVE.
myMC.addEventListener (MouseEvent.MOUSE_OVER, overHandler); fonction overHandler (event: MouseEvent) trace ("Vous venez de déplacer la souris sur myMC"); Cet événement est précisément l'opposé de MouseEvent.MOUSE_OVER. C'est à ce moment que le curseur de l'utilisateur se déplace hors de l'objet, ou comme ils l'appellent (les gars qui ont créé AS3), hors de l'objet.
myMC.addEventListener (MouseEvent.MOUSE_OUT, outHandler); function outHandler (event: MouseEvent) trace ("Vous venez de déplacer la souris sur myMC"); Cet événement se produit lorsque l'utilisateur appuie sur la souris principale pendant qu'elle est maintenue enfoncée..
myMC.addEventListener (MouseEvent.MOUSE_DOWN, downHandler); function downHandler (event: MouseEvent) trace ("Le bouton principal de la souris est enfoncé sur myMC"); Cet événement est précisément l'opposé de MouseEvent.MOUSE_DOWN. Lorsque l'utilisateur relâche le bouton principal de la souris, l'événement MouseEvent.MOUSE_UP se produit..
myMC.addEventListener (MouseEvent.MOUSE_UP, upHandler); function upHandler (event: MouseEvent) trace ("Le bouton principal de la souris a été relâché alors qu'il survolait myMC"); Eh bien, le nom indique déjà très clairement quand cet événement se produit. Cet événement se produit lorsque l'utilisateur clique (avec le bouton principal de la souris).
myMC.addEventListener (MouseEvent.CLICK, clickHandler); function clickHandler (event: MouseEvent) trace ("Vous venez de cliquer sur myMC"); Cet événement se produit lorsque l'utilisateur clique deux fois (avec le bouton principal de la souris). Notez que lorsque MouseEvent.DOUBLE_CLICK se produit, MouseEvent.CLICK se produit pour la deuxième fois..
myMC.addEventListener (MouseEvent.DOUBLE_CLICK, doubleClickHandler); function doubleClickHandler (event: MouseEvent) trace ("Vous venez de double-cliquer sur myMC"); Si vous testez votre film et double-cliquez, rien ne se passera. Pourquoi? Par défaut, les clips (et presque tous les objets d'affichage) ont la propriété doubleClickEnabled définie sur false. Donc MouseEvent.DOUBLE_CLICK ne sera pas envoyé. Il suffit de le définir sur true et tout fonctionnera correctement.
myMC.addEventListener (MouseEvent.DOUBLE_CLICK, doubleClickHandler); function doubleClickHandler (event: MouseEvent) trace ("Vous venez de double-cliquer sur myMC"); myMC.doubleClickEnabled = true; Cet événement se produit chaque fois que l'objet entre dans une nouvelle image (oui, ça sonne un peu bizarre). En gros, cet événement se produit au même rythme que la fréquence d'images. Cela signifie que si votre film a une fréquence d'images par seconde de 30 images par seconde, l'événement est appelé 30 fois par seconde. Pour quoi utiliseriez-vous cet événement? Vous pouvez utiliser cet événement pour que les choses se passent progressivement. Par exemple, vous pouvez augmenter la coordonnée x d’un objet de 5, à la cadence de la cadence..
myMC.addEventListener (Event.ENTER_FRAME, enterFrameHandler); fonction enterFrameHandler (event: Event) myMC.x + = 5;
Cet événement se produit lorsque l'objet termine ce qu'il était en train de faire. La plupart du temps, vous l'utiliserez pour des choses qui doivent charger quelque chose ou pour des choses qui utilisent une forme de média. Un URLLoader charge une URLRequest. Une fois le chargement terminé, nous chargeons ces données dans un autre chargeur, puis nous l'ajoutons à la scène..
var myURLRequest: URLRequest = new URLRequest ("http://farm3.static.flickr.com/2382/1616598266_bafebf0086_o.jpg"); var myURLLoader: URLLoader = new URLLoader (myURLRequest); myURLLoader.dataFormat = URLLoaderDataFormat.BINARY; myURLLoader.addEventListener (Event.COMPLETE, completeHandler); function completeHandler (event: Event) var loader: Loader = new Loader (); loader.loadBytes (myURLLoader.data); addChild (chargeur); Cet événement se produit lorsque le lecteur flash ou la page contenant le flash est redimensionné. Vous pouvez utiliser cet événement pour repositionner des objets après le redimensionnement..
stage.addEventListener (Event.RESIZE, resizeHandler); function resizeHandler (event: Event) trace ("Les dimensions de la scène sont" + stage.stageWidth + "x" + stage.stageHeight); Cet événement se produit lorsque tout la touche est enfoncée sur le clavier.
stage.addEventListener (KeyboardEvent.KEY_DOWN, keyDownHandler); function keyDownHandler (event: KeyboardEvent) trace ("Vous venez d'appuyer sur une touche!"); Cet événement est précisément le contraire de KeyboardEvent.KEY_DOWN, il se produit lorsque tout la clé est relâchée (la clé monte).
stage.addEventListener (KeyboardEvent.KEY_UP, keyUpHandler); function keyUpHandler (event: KeyboardEvent) trace ("Vous venez de relâcher une clé"); Bien sûr, il est très inutile de répondre à n'importe quelle clé (sauf pour un écran de veille), nous aurions donc besoin de récupérer des informations sur la touche enfoncée. Heureusement, certaines des clés sont intégrées à la classe KeyboardEvent. Ce sont des booléens et sont définies sur true lorsqu’elles sont enfoncées. Ces booléens construits sont:
Alors maintenant, nous pouvons utiliser ceci pour indiquer plus précisément la touche sur laquelle vous devez appuyer avant de faire quelque chose..
stage.addEventListener (KeyboardEvent.KEY_DOWN, keyDownHandler); function keyDownHandler (event: KeyboardEvent) if (event.shiftKey) trace ("Vous venez d'appuyer sur la touche majuscule"); Vous vous demandez peut-être, d'accord, qu'en est-il de toutes les autres clés? Eh bien il y a quelque chose appelé le code clé. Chaque clé a un certain nombre; un code de clé. Nous pouvons vérifier le code de la clé qui a déclenché l'événement. Ceci est fait avec event.keyCode, qui retourne un entier. Cliquez ici pour obtenir une liste des codes de clé. Même si c'est pour JavaScript, les codes de clé sont les mêmes.
stage.addEventListener (KeyboardEvent.KEY_DOWN, keyDownHandler); function keyDownHandler (event: KeyboardEvent) if (event.keyCode == 65) trace ("Vous venez d'appuyer sur la touche A"); Maintenant, il est plus facile de stocker les codes de clé dans une variable (ou si vous êtes un hardcore, dans une classe) et d'utiliser simplement cette variable, au lieu du code de clé..
var A: uint = 65; stage.addEventListener (KeyboardEvent.KEY_DOWN, keyDownHandler); function keyDownHandler (event: KeyboardEvent) if (event.keyCode == A) trace ("Vous venez d'appuyer sur la touche A"); Avec les codes de clé, vous pouvez obtenir beaucoup de travail, mais ce n'est parfois pas ce dont vous avez besoin. Par exemple, la même clé est utilisée pour les caractères une et UNE. Mais nous voudrions toujours faire la différence entre les deux. Eh bien, l'événement porte le code de caractère du répartiteur d'événements.
stage.addEventListener (KeyboardEvent.KEY_DOWN, keyDownHandler); fonction keyDownHandler (event: KeyboardEvent) trace (event.charCode);
Bon, cela fonctionne, mais devons-nous alors nous souvenir de ces codes de caractères? Non. Heureusement, nous pouvons utiliser la fonction charCodeAt (), qui renvoie le code de caractère d'un caractère (sous forme de chaîne). charCodeAt () prend par défaut le premier caractère de la chaîne. charCodeAt (0) est le premier caractère, charCodeAt (1) le second, etc..
stage.addEventListener (KeyboardEvent.KEY_DOWN, keyDownHandler); function keyDownHandler (event: KeyboardEvent) if (event.charCode == String ("a"). charCodeAt ()) trace ("Vous venez d'appuyer sur une touche minuscule"); Maintenant, essayez de taper ce qui suit:
myMC.addEventListener (KeyboardEvent.KEY_DOWN, keyDownHandler); function keyDownHandler (event: KeyboardEvent) trace ("Vous venez d'appuyer sur une touche alors que vous vous concentrez sur myMC"); Essayez de tester cela, cela ne fonctionnera pas! Pourquoi? Si myMC est un clip, il n'acceptera pas la saisie au clavier. Par conséquent, les événements de clavier ne seront pas distribués par clip. Si vous souhaitez que myMC réponde, ajoutez l'écouteur d'événements à la scène, puis demandez à myMC de faire quelque chose. Essayez de remplacer myMC d'un clip par un champ de texte dynamique, cela fonctionnera.
Qu'en est-il de deux champs de texte dynamiques? Si l'utilisateur tape, les deux champs de texte distribuent-ils un événement? Non, seulement celui que vous tapez. Cela s'appelle concentrer. Les événements de clavier sont distribués par l'objet qui a le focus. La scène est le seul objet qui a encore le focus, alors qu'un autre objet a aussi le focus.
Cet événement est spécialement conçu pour les minuteurs. Il est envoyé à une heure qui vient d’atteindre le délai. Cela signifie que vous pouvez utiliser cet événement pour faire quelque chose de manière très précise, à des intervalles de temps définis..
var myTimer: Timer = new Timer (1000, 5); myTimer.start (); myTimer.addEventListener (TimerEvent.TIMER, timerHandler); function timerHandler (event: TimerEvent) trace ("une seconde plus tard ..."); Tous les timers ont un second paramètre optionnel. Ce paramètre définit le nombre de répétitions du minuteur. Cela signifie que lorsque la minuterie aura atteint le délai, elle recommencera. Si le chronomètre s'est répété autant de fois que le nombre de répétitions, l'événement TimerEvent.TIMER_COMPLETE sera envoyé..
var myTimer: Timer = new Timer (1000, 5); myTimer.start (); myTimer.addEventListener (TimerEvent.TIMER_COMPLETE, timerHandler); function timerHandler (event: TimerEvent) trace ("Le temporisateur s'est répété 5 fois"); C'était ça! J'espère que vous avez maintenant une compréhension approfondie de la structure d'événements d'ActionScript 3.0. Rendez-vous compte que les événements discutés ne sont pas tous les événements existants, je viens de discuter de ceux que j'utilise souvent. N'oubliez pas de toujours vérifier la langue et les références de composants, cela peut vous aider beaucoup! Ce fut un plaisir d'écrire pour vous les gars!
