Comunidad de diseño web y desarrollo en internet online

Crear eventos personalizados en Actionscript 3

Cuando empezamos a programar en ActionScript 3 trabajamos con muchas clases y siempre tenemos que comunicarnos entre ellas de alguna forma. Una forma es usar una clase Singleton para mantener algunos datos y que sean usados en distintas clases sin perderlos. Otra forma es disparando Eventos personalizados, que será lo que mostraré a continuación con un ejemplo práctico.

Empecemos


Crearemos un movil que al darle click saltará y al caer nos avisará que ha terminado el salto. Para hacerlo necesitamos 3 clases: una para los Eventos del Movil, una para el Movil, y una para invocar al Movil y asociarla al FLA.


Estructura de nuestro proyecto.

MovilEvent.as


Esta clase extenderá de Event y la usaremos igual que cuando usamos Event pero le agregaremos las Constantes que queramos según la cantidad de eventos a necesitar. Además podemos declarar variables de tipo pública donde podemos enviar y recibir datos de este Evento.

Código :

package app.events
{
import flash.events.Event;

public class MovilEvent extends Event
{
public static const JUMP_FINISHED:String = "JUMP_FINISHED";

//Aquí pasaremos algun dato a usar. Podemos poner la cantidad de variables que queramos
public var data:String;

public function MovilEvent(type:String,bubbles:Boolean=false,cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
}

}

}


Movil.as


Aquí usaremos la Clase MovilEvent para disparar nuestros Eventos para el Movil (Miren los comentarios).

Código :

package app.views
{
import fl.transitions.easing.*;
import fl.transitions.Tween;
import fl.transitions.TweenEvent;

import flash.display.Graphics;
import flash.display.Sprite;
import flash.events.MouseEvent;

import app.events.MovilEvent;

public class Movil extends Sprite
{
public var tw:Tween;
private var _jump:Boolean = false;

public function Movil()
{
// Dibujamos un circulo que nos servirá como movil
var gr:Graphics = this.graphics;
gr.beginFill(0x009966);
gr.drawCircle(0, 0, 50);
gr.endFill();
gr = null;
}

// Salta
public function jump():void
{
//Si ya esta saltando, sale
if ( _jump ) return;
_jump = true;

//Hacemos que suba 200 pixeles el movil
tw = new Tween(this, "y", Strong.easeOut, this.y, this.y - 200, .5, true);
//al terminar de moverse llamará a la función "fell"
tw.addEventListener(TweenEvent.MOTION_FINISH, fell);
}

// Cae
private function fell(e:TweenEvent):void
{
tw.removeEventListener(TweenEvent.MOTION_FINISH, fell);

//Hacemos que baje el movil
tw = new Tween(this, "y", Regular.easeIn, this.y, this.y + 200, .5, true);
//al terminar de moverse llamará a la función "fellFinished"
tw.addEventListener(TweenEvent.MOTION_FINISH, fellFinished);
}

// Termina de Caer
private function fellFinished(e:TweenEvent):void
{
tw.removeEventListener(TweenEvent.MOTION_FINISH, fellFinished);

_jump = false;

//Preparamos el evento a disparar
var evMovil:MovilEvent = new MovilEvent(MovilEvent.JUMP_FINISHED);

//llevamos alguna variable del Evento con algun dato que queramos
evMovil.data = "RAW RAW FIGHT DA POWAAA!!!";

//disparamos el evento
dispatchEvent(evMovil);
}

}

}

Aquí la parte más importante es:

Código :

//Preparamos el evento a disparar
var evMovil:MovilEvent = new MovilEvent(MovilEvent.JUMP_FINISHED);

//llevamos alguna variable del Evento con algun dato que queramos
evMovil.data = "RAW RAW FIGHT DA POWAAA!!!";

//disparamos el evento
dispatchEvent(evMovil);

Y si queremos hacerlo sin usar variables sería:

Código :

//disparamos el evento
dispatchEvent( new MovilEvent(MovilEvent.JUMP_FINISHED) );


Main.as


Aquí le daremos uso al Movil con todo lo que preparamos.

Código :

package app
{
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.text.TextField;

import app.events.MovilEvent;
import app.views.Movil;

// Para este ejemplo añadiremos un TextField al escenario y lo llamaremos "txtTrace"
public class Main extends MovieClip
{
private var myMovil:Movil;

public function Main()
{
myMovil = new Movil();
myMovil.x = 200;
myMovil.y = 300;

myMovil.addEventListener(MouseEvent.CLICK, movil_onClick);
myMovil.addEventListener(MovilEvent.JUMP_FINISHED, movil_onJumpFinished);

this.addChild(myMovil);
}

private function movil_onJumpFinished(e:MovilEvent):void
{
txtTrace.text = "data:" + e.data;
}

private function movil_onClick(e:MouseEvent):void
{
txtTrace.text = "";
myMovil.jump();
}
}
}

La parte importante es:

Código :

myMovil.addEventListener(MovilEvent.JUMP_FINISHED, movil_onJumpFinished);
Donde escucharemos al evento JUMP_FINISHED.

Esta clase la usaremos como la Clase del Documento (DocumentClass) del archivo Main.Fla :


Y el ejemplo quedaría así:



Conclusión


Como ven en el ejemplo gracias a la clase MovilEvent comunique desde la Clase Movil a la Clase Main un evento y además pase un dato.
En nuestros desarrollos siempre se nos presentarán estos casos en lo que requerimos de un dato que esta dentro de una clase que además esta dentro de otra clase. Lo que más me gusta es que el código queda limpio y no necesitaremos de Clases de tipo Singleton para pasar datos y que mejor que junto con eventos :) .

Espero les sirva a muchos.

Archivos del Ejemplo: descargar.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate