Detectores de eventos en AS3

El manejo de eventos es el punto primordial para lograr interactividad en Flash, esto es detectar si el usuario realiza determinada acción (presiona un botón o una tecla por ejemplo) y de acuerdo a ello ejecutamos otra acción.

Utilizando Listeners
En ActionScript 3 (AS3) se ha hecho una cambio sustancial en el manejo de los eventos, se han eliminado completamente los eventos (onEnterFrame, onRollOver, onRelease, etc) y se ahora se pueden detectar la interacción utilizando listeners. Esto es si deseamos detectar un evento tenemos que agregar un listener especifico para llamar a una función cuando se detecte un evento.

  1. addEventListener("nombreEvento", nombreFuncion);

En donde tenemos que nombreEvento es el evento que deseamos detectar y nombreFuncion es el nombre de la función que vamos a ejecutar si se detecta el evento. Por ejemplo si deseamos detectar el evento ENTER_FRAME podemos agregar el listener de la forma:

  1. addEventListener(Event.ENTER_FRAME, onEnterClip);

Hay que notar que cada vez que ocurra el ENTER_FRAME nosotros ejecutaremos una función que en nuestro caso la hemos llamado onEnterClip.

Utilizando Eventos en Linea de Tiempo
Veamos primero la forma de implementar los eventos directamente en la linea de tiempo. Sea que tengamos un MovieClip llamado clip en el escenario de nuestra película, le agregamos el detector de eventos en el cual cambiamos de posición al clip.

  1. clip.addEventListener(Event.ENTER_FRAME, onEnterClip);
  2. function onEnterClip(event:Event) {
  3.     clip.x = clip.x + 2;
  4.     if (clip.x > 325) {
  5.         clip.x = -25;
  6.     }
  7. }

Con lo cual tenemos el siguiente resultado:

Cargando Flash

Utilizando Eventos en Clases
Veamos ahora el ejemplo anterior, pero utilizando clases, para ello primero importamos la clase flash.events.Event que nos permitirá utilizar las propiedades de los eventos.

  1. package {
  2.     import flash.display.Sprite;
  3.     import flash.events.Event;
  4.     public class ClipEvent extends Sprite {
  5.         public var clip:Sprite;
  6.         public function ClipEvent() {
  7.             clip = new Sprite();
  8.             addChild(clip);
  9.             // dibujamos el circulo
  10.             clip.graphics.beginFill(0x0099CC);
  11.             clip.graphics.drawCircle(0, 0, 25);
  12.             clip.graphics.endFill();
  13.             clip.x = stage.stageWidth/2;
  14.             clip.y = stage.stageHeight/2;
  15.             // agregamos el listener
  16.             clip.addEventListener(Event.ENTER_FRAME,onEnterClip);
  17.         }
  18.         public function onEnterClip(event:Event):void {
  19.             clip.x = clip.x + 2;
  20.             if (clip.x > 325) {
  21.                 clip.x = -25;
  22.             }
  23.         }
  24.     }
  25. }

Luego de exportar la película tenemos el siguiente resultado que es idéntico al ejemplo anterior.

Cargando Flash

Eventos para el Mouse
En ActionScript 2 todos los eventos del mouse eran detectados (mouseUp, mouseDown, mouseMove), ahora hay que agregar un listener si se desea detectar algún evento. Esto resulta ser optimo pues solo se detectarán los eventos a los que deseamos aplicarle alguna acción mejorando así el rendimiento de nuestra película.

Entonces ahora tenemos disponible una nueva clase flash.events.MouseEvent el cual brinda todos los eventos para el mouse los cuales son: CLICK, DOUBLE_CLICK, MOUSE_DOWN, MOUSE_MOVE, MOUSE_OUT, MOUSE_OVER, MOUSE_UP, MOUSE_WHEEL, ROLL_OUT, ROLL_OVER.

Entonces si deseamos agregarle un efecto cuando se para por encima de nuestro clip, agregaríamos dos listeners de la siguiente forma:

  1. package {
  2.     import flash.display.Sprite;
  3.     import flash.events.Event;
  4.     import flash.events.MouseEvent;
  5.     public class MouseClipEvent extends Sprite {
  6.         public var clip:Sprite;
  7.         public function MouseClipEvent() {
  8.             clip = new Sprite();
  9.             addChild(clip);
  10.             clip.graphics.beginFill(0x0099CC);
  11.             clip.graphics.drawCircle(0, 0, 25);
  12.             clip.graphics.endFill();
  13.             clip.x = stage.stageWidth/2;
  14.             clip.y = stage.stageHeight/2;
  15.             clip.addEventListener(Event.ENTER_FRAME,onEnterClip);
  16.             clip.addEventListener(MouseEvent.MOUSE_OVER, onOver);
  17.             clip.addEventListener(MouseEvent.MOUSE_OUT, onOut);
  18.         }
  19.         public function onOver(event:MouseEvent):void {
  20.             clip.alpha = 0.5;
  21.         }
  22.         public function onOut(event:MouseEvent):void {
  23.             clip.alpha = 1;
  24.         }
  25.         public function onEnterClip(event:Event):void {
  26.             clip.x = clip.x + 2;
  27.             if (clip.x > 325) {
  28.                 clip.x = -25;
  29.             }
  30.         }
  31.     }
  32. }

Con lo cual obtenemos un efecto cada vez que pasamos encima del clip como se muestra a continuación.

Cargando Flash

Eventos del Teclado
Para el caso del teclado ahora a traves de la clase flash.events.KeyboardEvent se tienen disponibles dos tipos de eventos KEY_DOWN y KEY_UP. Luego por ejemplo si deseamos controlar la posición de nuestro clip utilizando el teclado podemos tener el siguiente codigo.

  1. package {
  2.     import flash.display.Sprite;
  3.     import flash.events.Event;
  4.     import flash.events.KeyboardEvent;
  5.     import flash.ui.Keyboard;
  6.  
  7.     public class KeyboardClipEvent extends Sprite {
  8.         public var clip:Sprite;
  9.         public function KeyboardClipEvent() {
  10.             clip = new Sprite();
  11.             addChild(clip);
  12.             clip.graphics.beginFill(0x0099CC);
  13.             clip.graphics.drawCircle(0, 0, 25);
  14.             clip.graphics.endFill();
  15.             clip.x = stage.stageWidth/2;
  16.             clip.y = stage.stageHeight/2;
  17.             stage.addEventListener(KeyboardEvent.KEY_DOWN,onKey);
  18.         }
  19.         public function onKey(event:KeyboardEvent):void {
  20.             switch (event.keyCode) {
  21.                 case Keyboard.UP :
  22.                     clip.y -= 5;
  23.                     break;
  24.                 case Keyboard.DOWN :
  25.                     clip.y += 5;
  26.                     break;
  27.                 case Keyboard.LEFT :
  28.                     clip.x -= 5;
  29.                     break;
  30.                 case Keyboard.RIGHT :
  31.                     clip.x += 5;
  32.                     break;
  33.                 default :
  34.                     break;
  35.             }
  36.         }
  37.     }
  38. }

Ejecutando este código obtenemos el siguiente resultado:

Cargando Flash

Finalmente les dejo los archivos fuente de los ejemplos aqui mostrados para que puedan hacer sus practicas.

Comentarios Total 5 comentarios


Victor
Publicado: 04/01/2008 9:34 pm

Hola, hasta el momento este es el mejor ejemplo de eventos en as3 que he encontrado…y pues quisiera aclarar algunas dudillas.

Conozco bien lenguages de programación como C/C++, Java, Javascript, PHP…y entiendo los pilares de la POO, pero soy novato en ActionScript y no comprendo bien la forma en la que es compilado este.
Descargué los archivos que pusiste y corren a la perfección, el único problema es que al abrir el .fla con flash cs3, no encuentro por ningún lado en dónde colocaste el código, solo hay una escena, un fotograma vacío y ningún clip… la librería está vacía y en las acciones del fotograma no hay nada! :S

Te agradecería enormemente si me explicaras en qué lugar puedo encontrar el código en tu aplicación, o si me corrigieras en lo que esté haciendo mal.

muchas gracias y un saludo!.

unijimpe
Publicado: 05/01/2008 10:10 am

Lo que sucede es que en Flash se puede definir el classpath, es decir la clase que se reproducirá por defecto al ejecutar el swf. Esto se hace en el panel de propiedades de la película en el campo classpath donde colocas el nombre de la clase a ejecutar sin la extensión .as.

La otra forma es colocar en la primera linea de tiempo una llamada a la clase, por ejemplo si la clase se llama CreateCircle.as entonces:

new CreateCircle();

Esto hará que se ejecute la clase.

lisset vannesa taipe vargas
Publicado: 07/01/2008 9:26 am

ps los ejemplos q haces son muy cheveres e interesantes te felicito y ademas me sirvio bastante para poder desarrollar mi trabajo sobre los eventos

peter
Publicado: 10/03/2008 5:25 pm

Te agradesco un muchisimo. tengo serias dudas de todo esto y estoy aprendiendo, espero ser tan bueno en esto como tu.
gracias.

Federico
Publicado: 30/06/2008 7:42 pm

Tengo problema con el evento MOUSE_WHEEL. ME funciona bien dentro del swf, pero cuando lo inserto dentro de un html, me funciona tanto para el swf (un efecto zoom), como para el scroll del navegador (FF y IE), alguna idea de como se puede solucionar? ya que necesito que no se mueva la pagina cuando tengo el foco en el swf estoy usando AS3

gracias

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)