Comunidad de diseño web y desarrollo en internet

Captura múltiple de eventos con Actionscript 3

Este pequeño truco se me ocurrió por error mientras buscaba algo de información sobre la captura de eventos en live docs de Adobe. Consiste en crear una función única para varios listeners y poder así agregarle parámetros y acciones a cada uno de estos sin tener que crear varias funciones especificas para cada uno, ahorrándonos varias lineas de código.

  • NOTA: Para poder mostrar un poco mas gráfico lo sucedido, añadí un campo de texto dinámico, instanciado como "Estado" al cual escribiremos la acción utilizada.


Por ejemplo, cuando creamos una función sensible al click del cursor en stage, escribiremos código parecido a este:

Código :

stage.addEventListener(MouseEvent.MOUSE_DOWN, EventHandler);
//
function EventHandler(event:Event):void
{
Estado.text = "mouseDown";
}


Da click dentro del recuadro para apreciar el código de arriba


Normalmente al tener que añadir otro listener sensible a otro tipo de acción por parte del usuario podríamos crear otra función independiente a la primera. En este caso dirigiremos este un nuevo listener a la misma función, por ejemplo al liberar el click del cursor:

Código :

stage.addEventListener(MouseEvent.MOUSE_DOWN, EventHandler);
stage.addEventListener(MouseEvent.MOUSE_UP, EventHandler);
//
function EventHandler(event:Event):void{ /* ACCIONES */ }
Aquí habrá un pequeño problema, en caso de querer que hagan cosas diferentes MOUSE_UP y MOUSE_DOWN ¿como identificaremos y/o diferenciaremos una función de otra?, y ¿si fueran mas de dos eventos juntos? Es aquí donde actuara el pequeño truco, utilizando event.type.

Primero añadiré un listener para cuando se utilice el scroll del cursor, con MOUSE_WHEEL y utilizando switch(event){case:break} reconoceremos cada tipo de evento para asignarle las debidas funciones:

Código :

stage.addEventListener(MouseEvent.MOUSE_WHEEL, EventHandler);
stage.addEventListener(MouseEvent.MOUSE_DOWN, EventHandler);
stage.addEventListener(MouseEvent.MOUSE_UP, EventHandler);
//
function EventHandler(event:Event):void
{
// Diferenciamos todos los eventos que lleguen a la función
switch(event.type)
{
// En caso de que el evento sea "MOUSE_DOWN" asignamos sus funciones
case MouseEvent.MOUSE_DOWN:
Estado.htmlText = "Haz <b>pulsado</b> el mouse";
break; // Cerramos
// En caso de que el evento sea "MOUSE_UP" asignamos sus funciones
case MouseEvent.MOUSE_UP:
Estado.htmlText = " Haz <b>liberado</b> el mouse";
break; // Cerramos
// Cuando llegue otro evento que no sea "MOUSE_DOWN" ni "MOUSE_UP"
// Por ende, solo nos queda "MOUSE_WHEEL"
default:
Estado.htmlText = "Haz utilizado el <b>Scroller</b>";
break; // Cerramos
}
}


Da click dentro del recuadro o utiliza el scroller de tu mouse


Como veras, es un truco muy sencillo. Y que de la misma manera como le hemos añadido distintos casos (ramas) a la función principal (raiz) a partir de cada evento que la invoque, podemos añadir mas subfunciones a la misma. Por ejemplo un caso diferente cuando sea pulsado el cursor sobre distintos elementos:

Código :

case MouseEvent.MOUSE_DOWN:
// Checamos el objeto sobre el cual haya sido el click
switch(event.target.name)
{
// En caso de que sea en stage
case null:
Estado.htmlText = "Haz <b>pulsado</b> el mouse sobre <b>Stage</b>"
break;
// En caso de que sea en el logo de Cristalab
case "Cristalab":
Estado.htmlText = "Haz <b>pulsado</b> el mouse sobre <b>Cristalab</b>"
break;
// En caso de sea en cualquier otro objeto que no se haya declarado
// por ejemplo el campo de texto dinamico
default:
Estado.htmlText = "Haz <b>pulsado</b> el mouse sobre algun otro objeto"
break;
}
break; // Cerramos



Finalmente, cabe aclarar que este truco funcionara no solo con eventos del mouse, sino también con cualquier otro tipo de evento. Por ejemplo con TimerEvent.TIMER:

Código :

var timer:Timer = new Timer(1000, 0);
timer.addEventListener(TimerEvent.TIMER, EventHandler);
timer.start();
//
var timerCount:int = 0;
//
...
case TimerEvent.TIMER:
timerCount++;
Estado.htmlText = "Han transcurrido <b>" + timerCount + " segundos</b>";
break;
...
Así mismo con CLEAR, UNLOAD, ENTER_FRAME, MOUSE_MOVE, etc.

Código :

var timer:Timer = new Timer(10000, 0);
stage.addEventListener(MouseEvent.MOUSE_WHEEL, EventHandler);
stage.addEventListener(MouseEvent.MOUSE_DOWN, EventHandler);
stage.addEventListener(MouseEvent.MOUSE_MOVE, EventHandler);
stage.addEventListener(MouseEvent.MOUSE_UP, EventHandler);
timer.addEventListener(TimerEvent.TIMER, EventHandler);
timer.start();
//
var timerCount:int = 0;
//
function EventHandler(event:Event):void
{
switch(event.type)
{
case MouseEvent.MOUSE_MOVE:
switch(event.target.name)
{
// En caso de que sea en stage
case null:
Estado.htmlText = "Haz <b>deslizado</b> el mouse sobre <b>Stage</b>";
break;
// En caso de que sea en el logo de Cristalab
case "Cristalab":
Estado.htmlText = "Haz <b>deslizado</b> el mouse sobre <b>Cristalab</b>";
break;
// En caso de sea en cualquier otro objeto que no se haya declarado
// por ejemplo el campo de texto dinamico
default:
Estado.htmlText = "Haz <b>deslizado</b> el mouse sobre algun otro objeto";
break;
}
break; // Cerramos
case MouseEvent.MOUSE_DOWN:
// Checamos el objeto sobre el cual haya sido el click
switch(event.target.name)
{
// En caso de que sea en stage
case null:
Estado.htmlText = "Haz <b>pulsado</b> el mouse sobre <b>Stage</b>";
break;
// En caso de que sea en el logo de Cristalab
case "Cristalab":
Estado.htmlText = "Haz <b>pulsado</b> el mouse sobre <b>Cristalab</b>";
break;
// En caso de sea en cualquier otro objeto que no se haya declarado
// por ejemplo el campo de texto dinamico
default:
Estado.htmlText = "Haz <b>pulsado</b> el mouse sobre algun otro objeto";
break;
}
break; // Cerramos
case MouseEvent.MOUSE_UP:
Estado.htmlText = " Haz <b>liberado</b> el mouse";
break;
case TimerEvent.TIMER:
timerCount += 10;
Estado.htmlText = "Han transcurrido <b>" + timerCount + " segundos</b>";
break;
default:
Estado.htmlText = "Haz utilizado el <b>Scroller</b>";
break;
}
//
// Estado.appendText(event.type);
}


Un ejemplo del resultado final, con múltiples capturas de eventos

Cristalab y Mejorando.la te traen el Curso Profesional de Node.js y Javascript. Online, avanzado, con diploma de certificación y clases en vivo.

Publica tu comentario

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