unijimpe

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.

[as]addEventListener(«nombreEvento», nombreFuncion);[/as]

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:

[as]addEventListener(Event.ENTER_FRAME, onEnterClip);[/as]

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.

[as]
clip.addEventListener(Event.ENTER_FRAME, onEnterClip);
function onEnterClip(event:Event) {
clip.x = clip.x + 2;
if (clip.x > 325) {
clip.x = -25;
}
}
[/as]

Con lo cual tenemos el siguiente resultado:

[swf]/wp-content/uploads/2007/12/events-timeline.swf,300,100[/swf]

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.

[as]
package {
import flash.display.Sprite;
import flash.events.Event;
public class ClipEvent extends Sprite {
public var clip:Sprite;
public function ClipEvent() {
clip = new Sprite();
addChild(clip);
// dibujamos el circulo
clip.graphics.beginFill(0x0099CC);
clip.graphics.drawCircle(0, 0, 25);
clip.graphics.endFill();
clip.x = stage.stageWidth/2;
clip.y = stage.stageHeight/2;
// agregamos el listener
clip.addEventListener(Event.ENTER_FRAME,onEnterClip);
}
public function onEnterClip(event:Event):void {
clip.x = clip.x + 2;
if (clip.x > 325) {
clip.x = -25;
}
}
}
}
[/as]

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

[swf]/wp-content/uploads/2007/12/events-class.swf,300,100[/swf]

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:

[as]
package {
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
public class MouseClipEvent extends Sprite {
public var clip:Sprite;
public function MouseClipEvent() {
clip = new Sprite();
addChild(clip);
clip.graphics.beginFill(0x0099CC);
clip.graphics.drawCircle(0, 0, 25);
clip.graphics.endFill();
clip.x = stage.stageWidth/2;
clip.y = stage.stageHeight/2;
clip.addEventListener(Event.ENTER_FRAME,onEnterClip);
clip.addEventListener(MouseEvent.MOUSE_OVER, onOver);
clip.addEventListener(MouseEvent.MOUSE_OUT, onOut);
}
public function onOver(event:MouseEvent):void {
clip.alpha = 0.5;
}
public function onOut(event:MouseEvent):void {
clip.alpha = 1;
}
public function onEnterClip(event:Event):void {
clip.x = clip.x + 2;
if (clip.x > 325) {
clip.x = -25;
}
}
}
}
[/as]

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

[swf]/wp-content/uploads/2007/12/events-mouse.swf,300,100[/swf]

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.

[as]
package {
import flash.display.Sprite;
import flash.events.Event;
import flash.events.KeyboardEvent;
import flash.ui.Keyboard;

public class KeyboardClipEvent extends Sprite {
public var clip:Sprite;
public function KeyboardClipEvent() {
clip = new Sprite();
addChild(clip);
clip.graphics.beginFill(0x0099CC);
clip.graphics.drawCircle(0, 0, 25);
clip.graphics.endFill();
clip.x = stage.stageWidth/2;
clip.y = stage.stageHeight/2;
stage.addEventListener(KeyboardEvent.KEY_DOWN,onKey);
}
public function onKey(event:KeyboardEvent):void {
switch (event.keyCode) {
case Keyboard.UP :
clip.y -= 5;
break;
case Keyboard.DOWN :
clip.y += 5;
break;
case Keyboard.LEFT :
clip.x -= 5;
break;
case Keyboard.RIGHT :
clip.x += 5;
break;
default :
break;
}
}
}
}
[/as]

Ejecutando este código obtenemos el siguiente resultado:

[swf]/wp-content/uploads/2007/12/events-keyboard.swf,300,100[/swf]

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

Posts Relacionados

• Precargar archivos en AS3
• Utilizar Eventos en Javascript
• Enviar email con AS3 y PHP
• Precarga multiple en AS3
• MovieClips en AS3