Share
En este tutorial explicaré sobre el Marco de eventos de ActionScript 3.0. Después de este tutorial, debe tener una comprensión clara de cómo funcionan los eventos, los despachadores de eventos y los oyentes de eventos..
Debido a que el marco de eventos de AS3 es enorme, veremos todas las diferentes cosas que componen el marco de eventos. Aprenderemos sobre lo siguiente:
Realmente creo que le sería difícil entender el marco del evento si nos lanzamos directamente a la jerga técnica, por lo que primero describiré una situación de la vida real. Toda la situación es una metáfora del marco del evento. Está bien, así que aquí vamos:
Soy un ávido lector de Artes informaticas Y espero cada día por el nuevo número. Cuando recibo el ejemplar, empiezo a leerlo..
Está bien, tenemos varias cosas sucediendo:
He mencionado varias cosas:
Un Evento es un objeto que describe una ocurrencia, en Paso 1 El evento es la llegada de un nuevo número..
La mayoría de las veces verás un evento que está escrito en una estructura similar a esta:
MouseEvent.CLICK
Este fragmento de código consta de dos cosas:
El tipo de evento es en realidad una cadena constante estática. Puede sonar extraño, pero un Evento no es más que una cadena. Intenta ejecutar este fragmento.
trace (MouseEvent.MOUSE_MOVE);
Obtendrás como salida movimiento del ratón. Acabamos de rastrear la constante MOUSE_MOVE, que está dentro de la clase MouseEvent. Un evento es una cadena! Pero esta cadena representa la ocurrencia de (en este ejemplo) el movimiento del mouse.
Un evento siempre sucede en alguna parte. Donde sucede el evento es donde se dispara (despacha). Las raíces de los eventos de distribución se encuentran en la clase EventDispatcher. Tenga en cuenta que donde se envía el evento es donde está sucediendo. Así que si clip de película A envía un evento, luego se agrega un detector de eventos (los escuchas de eventos se explicarán en el paso 5) a clip de película B no recibiría este evento.
Para facilitar las cosas, todos los objetos de visualización tienen la función incorporada dispatchEvent (evento: evento), al igual que muchas otras clases.
var myMC: MovieClip = new MovieClip (); myMC.dispatchEvent (nuevo evento (MouseEvent.CLICK));
Pero la mayoría de las veces no enviará eventos manualmente, la mayoría de los eventos se enviarán automáticamente. Por ejemplo, si hago clic en el clip de película A, enviará automáticamente el evento MouseEvent.CLICK.
Cuando ocurre un evento determinado, nosotros, como desarrolladores de Flash, nos gustaría hacer algo para responder a este evento. Los oyentes del evento son lo que necesitas. Los oyentes del evento no tienen su propia clase, no, son un poco diferentes. Los oyentes de eventos se agregan a un objeto. Los oyentes de eventos son objetos que "escuchan" un determinado evento. Cuando este evento ocurre, entonces se llamará una función, una manejador (función).
Mira la imagen de abajo, mostrando la sintaxis detrás de la función addEventListener (), que se utiliza para agregar un detector de eventos:
En realidad, esos no son todos los parámetros que acepta el método addEventListener, todavía hay tres que no he mencionado. Casi nunca los usará, especialmente cuando acaba de comenzar a usar escuchas de eventos. Veamos nuevamente la estructura del método addEventListener.
addEventListener (escriba: String, listener: Function, useCapture: Boolean = falso, prioridad: int = 0, useWeakReference: Boolean = falso): void
Así que vamos a discutir los últimos 3 parámetros:
Eliminar un detector de eventos es tan fácil como agregar uno.
// esto agrega un detector de eventos al stage stage.addEventListener (MouseEvent.CLICK, clickHandler); // esto elimina el detector de eventos agregado al escenario stage.removeEventListener (MouseEvent.CLICK, clickHandler);
Cuando se produce el evento que un detector de eventos está escuchando, llama a una función. Esta función se llama entrenador de animales o la función de escucha. Mire la imagen a continuación, que muestra la sintaxis del controlador:
Observe el argumento en el controlador, este argumento es obligatorio. La función de escucha solo tiene un argumento y no se le permite tener más. Este evento contiene información sobre el evento, hablaremos sobre esto en paso 9.
Ahora queremos que myMC responda al evento distribuido, así que agregaremos un evento y luego la función del controlador. Nuestro código se verá así:
Accentsconagua
// crea nuestro clip de película myMC var myMC: MovieClip = new MovieClip (); // deja que myMC distribuya el evento MouseEvent.CLICK myMC.dispatchEvent (new Event (MouseEvent.CLICK)); // agrega un detector de eventos a myMC, que escucha el evento MouseEvent.CLICK, y llamará clickHandler myMC.addEventListener (MouseEvent.CLICK, clickHandler); // define la función de la función del controlador clickHandler (event: Event) trace ("Escuché el evento MouseEvent.CLICK"); Después prueba tu película. (Windows: Ctrl + Enter, Mac: Cmd + Enter).
¿Obtuviste alguna salida? ¿No? Bueno, yo tampoco. Miraremos qué está mal en el próximo paso..
Entonces, ¿qué está mal? Bueno, no puede ser un error de sintaxis, al menos soy no consiguiendo nada No, esto no es técnicamente un error. Mire el código nuevamente, pero esta vez recuerde que el código se ejecutará línea por línea:
// crea nuestro clip de película myMC var myMC: MovieClip = new MovieClip (); // deja que myMC distribuya el evento MouseEvent.CLICK myMC.dispatchEvent (new Event (MouseEvent.CLICK)); // agrega un detector de eventos a myMC, que escucha el evento MouseEvent.CLICK, y llamará clickHandler myMC.addEventListener (MouseEvent.CLICK, clickHandler); // define la función de la función del controlador clickHandler (event: Event) trace ("Escuché el evento MouseEvent.CLICK"); Espero que se haya dado cuenta de lo que salió mal: el evento se está distribuyendo antes de que se haya agregado un detector de eventos a myMC. Entonces, cuando se ha agregado el detector de eventos, es demasiado tarde, el evento ha ocurrido. Afortunadamente, es fácil de resolver, solo cambia el orden y primero agrega el detector de eventos, luego despacha el evento:
// crea nuestro clip de película myMC var myMC: MovieClip = new MovieClip (); // agrega un detector de eventos a myMC, que escucha el evento MouseEvent.CLICK, y llamará clickHandler myMC.addEventListener (MouseEvent.CLICK, clickHandler); // deja que myMC distribuya el evento MouseEvent.CLICK myMC.dispatchEvent (new Event (MouseEvent.CLICK)); // define la función de la función del controlador clickHandler (event: Event) trace ("Escuché el evento MouseEvent.CLICK"); Entonces, ¿por qué hicimos todo eso? Bueno, es probable que encuentres este problema y puede llevarte un tiempo darte cuenta de lo que está pasando. Es mejor mostrarte el problema y enseñarte cómo resolverlo..
Cada función manejadora tiene un argumento; El argumento del evento. Este argumento contiene datos sobre el evento y el despachador de eventos. El parámetro contiene propiedades que nos gustaría leer. Aquí hay una lista de algunos de los más utilizados:
Con esto podemos usar el mismo controlador para diferentes tipos de eventos. ¿Cómo? Bueno, vamos a discutir esto en el siguiente paso.
Bien, primero veamos este fragmento de código:
stage.addEventListener (MouseEvent.MOUSE_DOWN, downHandler); stage.addEventListener (MouseEvent.MOUSE_UP, upHandler); function downHandler (event: MouseEvent) trace ("Down"); function upHandler (event: MouseEvent) trace ("Up"); Estamos usando dos eventos, a saber MouseEvent.MOUSE_DOWN y MouseEvent.MOUSE_UP. El primer evento es el evento cuando el mouse presiona el botón principal del mouse y lo mantiene presionado. abajo. Cuando la persona suelta este botón, se produce el evento MouseEvent.MOUSE_UP. El boton del mouse va arriba despues de lanzarlo.
Ahora podemos usar en lugar de dos manejadores (a saber, downHandler y upHandler) sólo un controlador. Elimine el código que hemos escrito y escriba lo siguiente:
stage.addEventListener (MouseEvent.MOUSE_DOWN, manejador); stage.addEventListener (MouseEvent.MOUSE_UP, manejador); controlador de funciones (evento: MouseEvent) trace ("Algo ha ocurrido ..."); Bien, hemos configurado nuestro controlador y funciona, pero queremos que nuestro controlador haga algo específico, dependiendo de qué evento se pasa al controlador. Afortunadamente, podemos usar tipo de evento. Vamos a usarlo!
stage.addEventListener (MouseEvent.MOUSE_DOWN, manejador); stage.addEventListener (MouseEvent.MOUSE_UP, manejador); controlador de funciones (evento: MouseEvent) if (event.type == "mouseDown") trace ("Down"); else trace ("Up"); Ahora digamos que un clic ocurre en un movieclip, llamémoslo mcA. El evento no se despacha simplemente en mcA, no, el evento viaja a través de todo el jugador. Este viaje se llama flujo de eventos, Solo piensa en cómo el evento está fluyendo a través del jugador..
El evento comienza en el nivel superior, en el escenario, después pasará por el los padres de mcA, Hasta que el evento llegue a mcA. Luego, el evento "burbujeará" de regreso desde mcA, de regreso al escenario.
Ok, genial, pero ¿para qué puedo usar esto? Como ahora sabemos que un evento viaja a través de todos los padres del despachador, podemos usar solo uno escucha de eventos, para rastrear los eventos de más de un objeto.
Bien, entonces vamos a crear algunos clips de película múltiples uno dentro del otro. Puede hacerlo usted mismo, o simplemente usar el archivo step-11.fla provisto.
Crearemos 3 clips de película y les daremos los nombres de las instancias. redMC, blueMC y greenMC. Luego coloque todos estos dentro de un clip de película más grande, llamado envase.
Ahora comencemos a escribir código. Ya he creado una capa llamada Comportamiento, así que escribe tu código en esa capa. Primero vamos a agregar un detector de eventos a envase, escuchando el evento MouseEvent.CLICK, con el controlador llamado clickHandler.
container.addEventListener (MouseEvent.CLICK, clickHandler); function clickHandler (event: MouseEvent) // cuerpo de la función
Queremos saber en qué botón se hace clic, así que ¿por qué agregamos un detector de eventos al contenedor? Bueno, mira la imagen de abajo:
Como ve, el evento se está distribuyendo en redMC, sin embargo, burbuja de vuelta al contenedor. Luego, el detector de eventos agregado al contenedor escuchará el evento y llamará a la función de escucha clickHandler. Lo mismo ocurre con blueMC y greenMC.
Ahora vamos a usar event.target, porque event.target es el dispatcher del evento, y el dispatcher del evento es redMC. Entonces, ¿cómo podemos usar event.target? Podemos comprobar event.target.name, que devuelve el nombre de la instancia como una cadena. Así que simplemente podemos usar normal Si declaraciones:
container.addEventListener (MouseEvent.CLICK, clickHandler); función clickHandler (event: MouseEvent) if (event.target.name == "redMC") trace ("Red"); if (event.target.name == "blueMC") trace ("Blue"); if (event.target.name == "greenMC") trace ("Green"); Ahora que tiene una buena comprensión del marco del evento, sin embargo, para lograr algo, la clave es saber qué evento usar. Un gran lugar para comprobar qué eventos existen, es la referencia del lenguaje y componentes ActionScript 3.0. Simplemente haga clic en un evento que contenga una clase, como MouseEvent, y observe qué es cada evento.
Este evento ocurre cuando el usuario mueve el mouse. Si agrega un detector de eventos que escucha este evento, digamos, un clip de video llamado myMC, entonces sabría cuándo se mueve el mouse sobre myMC.
myMC.addEventListener (MouseEvent.MOUSE_MOVE, mouseMoveHandler); function mouseMoveHandler (event: MouseEvent) trace ("Su mouse se está moviendo sobre myMC"); Este evento ocurre cuando el usuario se mueve (se desplaza). Este evento solo ocurre cuando el usuario mueve el cursor desde otro lugar sobre el objeto. Mover el mouse sobre el objeto ya no es el evento MouseEvent.MOUSE_OVER, sino el evento MouseEvent.MOUSE_MOVE.
myMC.addEventListener (MouseEvent.MOUSE_OVER, overHandler); function overHandler (event: MouseEvent) trace ("Acaba de mover el mouse en myMC"); Este evento es precisamente lo contrario de MouseEvent.MOUSE_OVER. Esto es cuando el cursor del usuario se mueve fuera del objeto, o como lo llaman (los chicos que crearon AS3), fuera del objeto.
myMC.addEventListener (MouseEvent.MOUSE_OUT, outHandler); function outHandler (event: MouseEvent) trace ("Acaba de sacar el mouse de myMC"); Este evento ocurre cuando el usuario presiona el mouse primario hacia abajo, mientras se mantiene presionado.
myMC.addEventListener (MouseEvent.MOUSE_DOWN, downHandler); function downHandler (event: MouseEvent) trace ("El botón primario del mouse está presionado en myMC"); Este evento es precisamente lo contrario de MouseEvent.MOUSE_DOWN. Cuando el usuario suelta el botón primario del mouse, se produce el evento MouseEvent.MOUSE_UP.
myMC.addEventListener (MouseEvent.MOUSE_UP, upHandler); function upHandler (event: MouseEvent) trace ("El botón principal del mouse se ha soltado, mientras se movía sobre myMC"); Bueno, el nombre ya lo deja bastante claro cuando ocurre este evento. Este evento ocurre cuando el usuario hace clic (con el botón primario del mouse).
myMC.addEventListener (MouseEvent.CLICK, clickHandler); function clickHandler (event: MouseEvent) trace ("Acabas de hacer clic en myMC"); Bueno, este evento ocurre cuando el usuario hace clic dos veces (con el botón primario del mouse). Tenga en cuenta que cuando se produce MouseEvent.DOUBLE_CLICK, ese MouseEvent.CLICK se produce por segunda vez.
myMC.addEventListener (MouseEvent.DOUBLE_CLICK, doubleClickHandler); function doubleClickHandler (event: MouseEvent) trace ("Acabas de hacer doble clic en myMC"); Si ahora prueba su película y hace doble clic, no pasará nada. ¿Por qué? Bueno, de forma predeterminada, los clips de película (y casi todos los objetos de visualización) tienen la propiedad doubleClickEnabled establecida en false. Así que MouseEvent.DOUBLE_CLICK no será enviado. Solo configúralo en verdadero, y todo funcionará bien.
myMC.addEventListener (MouseEvent.DOUBLE_CLICK, doubleClickHandler); function doubleClickHandler (event: MouseEvent) trace ("Acabas de hacer doble clic en myMC"); myMC.doubleClickEnabled = true; Este evento ocurre cada vez que el objeto entra en un nuevo marco (sí, eso suena un poco extraño). Bueno, básicamente, este evento se produce a la velocidad de la velocidad de fotogramas. Eso significa que si su película tiene una velocidad de fotogramas de 30 fps, el evento se convocará 30 veces por segundo. ¿Para qué usarías este evento? Puedes usar este evento para hacer que las cosas sucedan gradualmente. Por ejemplo, podría aumentar la coordenada x de un objeto en 5, a la velocidad de la velocidad de fotogramas.
myMC.addEventListener (Event.ENTER_FRAME, enterFrameHandler); función enterFrameHandler (evento: evento) myMC.x + = 5;
Este evento ocurre cuando el objeto completa lo que estaba haciendo. La mayoría de las veces lo usarás para cosas que necesitan cargar algo, o para cosas que reproducen algún tipo de medio. Un URLLoader carga un URLRequest, luego de que el URLLoader se completa, luego cargaremos estos datos en un cargador diferente y luego agregaremos el cargador al escenario..
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 (cargador); Este evento ocurre cuando se cambia el tamaño del flash player o la página donde se contiene el flash. Puede usar este evento para reposicionar objetos después de que haya cambiado el tamaño.
stage.addEventListener (Event.RESIZE, resizeHandler); function resizeHandler (event: Event) trace ("Las dimensiones del escenario son" + stage.stageWidth + "x" + stage.stageHeight); Este evento ocurre cuando alguna tecla se presiona en el teclado.
stage.addEventListener (KeyboardEvent.KEY_DOWN, keyDownHandler); function keyDownHandler (event: KeyboardEvent) trace ("¡Acaba de presionar una tecla!"); Este evento es precisamente lo opuesto a KeyboardEvent.KEY_DOWN, este evento ocurre cuando alguna Se suelta la tecla (la tecla sube).
stage.addEventListener (KeyboardEvent.KEY_UP, keyUpHandler); function keyUpHandler (event: KeyboardEvent) trace ("Acaba de liberar una tecla"); Por supuesto, es bastante inútil responder a cualquier llave (a excepción de un protector de pantalla), por lo que necesitaríamos recuperar información sobre qué tecla se presionó. Afortunadamente, algunas de las claves están integradas en la clase KeyboardEvent, estas son booleanas y se configuran como verdaderas cuando se presionan. Estos construidos en booleanos son:
Así que ahora podemos usar esto para ser más específico, qué tecla debe ser presionada antes de hacer algo..
stage.addEventListener (KeyboardEvent.KEY_DOWN, keyDownHandler); function keyDownHandler (event: KeyboardEvent) if (event.shiftKey) trace ("Acaba de presionar la tecla Mayús"); Quizás se esté preguntando, de acuerdo, ¿qué pasa con todas las otras teclas? Bueno, hay algo que se llama clave. Cada tecla tiene un número determinado; un código clave. Podemos verificar el código clave de la clave que desencadenó el evento. Esto se hace con event.keyCode, que devuelve un entero. Haga clic aquí para obtener una lista de los códigos clave. A pesar de que es para javascript, los códigos clave son los mismos.
stage.addEventListener (KeyboardEvent.KEY_DOWN, keyDownHandler); function keyDownHandler (event: KeyboardEvent) if (event.keyCode == 65) trace ("Acaba de presionar la tecla A"); Ahora es más fácil almacenar los códigos de clave en una variable (o si eres un hardcore, en una clase) y solo usar esa variable, en lugar del código de clave.
var A: uint = 65; stage.addEventListener (KeyboardEvent.KEY_DOWN, keyDownHandler); function keyDownHandler (event: KeyboardEvent) if (event.keyCode == A) trace ("Acaba de presionar la tecla A"); Con los códigos clave puede hacer bastante, sin embargo, a veces no es lo que necesita. Por ejemplo, la misma clave se utiliza para los caracteres. una y UNA. Pero todavía nos gustaría diferenciar entre los dos. Bueno, el evento lleva el código de carácter del despachador de eventos.
stage.addEventListener (KeyboardEvent.KEY_DOWN, keyDownHandler); function keyDownHandler (event: KeyboardEvent) trace (event.charCode);
Bien, esto funciona, sin embargo, ¿entonces necesitamos recordar estos códigos de caracteres? No. Por suerte, podemos usar la función charCodeAt (), que devuelve el código de carácter de un carácter (en una cadena). charCodeAt () toma por defecto el primer carácter de la cadena. charCodeAt (0) es el primer carácter, charCodeAt (1) el segundo, etc..
stage.addEventListener (KeyboardEvent.KEY_DOWN, keyDownHandler); function keyDownHandler (event: KeyboardEvent) if (event.charCode == String ("a"). charCodeAt ()) trace ("Acaba de presionar una tecla en minúscula"); Ahora intenta escribir lo siguiente:
myMC.addEventListener (KeyboardEvent.KEY_DOWN, keyDownHandler); function keyDownHandler (event: KeyboardEvent) trace ("Acaba de presionar una tecla, mientras se enfoca en myMC"); Intenta probar esto, ¡no funcionará! ¿Por qué? Si myMC es un clip de película, no aceptará la entrada del teclado, por lo que los eventos del teclado no se distribuirán en los clips de película. Si desea que myMC responda, agregue el detector de eventos al escenario y luego haga que myMC haga algo. Intente cambiar myMC de un clip de película a un campo de texto dinámico, entonces funcionará.
¿Qué pasa con dos campos de texto dinámico? Si el usuario escribe, ¿ambos campos de texto envían un evento? No, solo el que estás escribiendo. Esto se llama atención. Los eventos de teclado son enviados por el objeto que tiene el foco. El escenario es el único objeto que aún tiene foco, mientras que un objeto diferente también tiene foco.
Este evento está especialmente diseñado para los temporizadores. Se envía en un temporizador, que acaba de alcanzar el tiempo de retardo. Esto significa que puede usar este evento para hacer algo de manera muy precisa, a intervalos de tiempo establecidos.
var myTimer: Timer = new Timer (1000, 5); myTimer.start (); myTimer.addEventListener (TimerEvent.TIMER, timerHandler); function timerHandler (event: TimerEvent) trace ("un segundo después ..."); Todos los temporizadores tienen un segundo parámetro opcional. Este parámetro establece la cuenta de repetición del temporizador. Esto significa que cuando el temporizador alcance el tiempo de retardo, comenzará de nuevo. Si el temporizador se ha repetido tantas veces como el recuento de repetición, enviará el evento TimerEvent.TIMER_COMPLETE.
var myTimer: Timer = new Timer (1000, 5); myTimer.start (); myTimer.addEventListener (TimerEvent.TIMER_COMPLETE, timerHandler); function timerHandler (event: TimerEvent) trace ("El temporizador se ha repetido 5 veces"); ¡Eso fue todo! Espero que ahora tenga un conocimiento profundo del marco de eventos de ActionScript 3.0. Tenga en cuenta que los eventos discutidos no son todos los eventos que existen, solo comenté los que uso con frecuencia. No olvide consultar siempre la referencia de idioma y componentes, ¡puede ayudarlo mucho! Fue un placer escribir para ustedes.!
