Estás en: Cristalab > Tips > Captura múltiple de eventos con Actionscript 3

Captura múltiple de eventos con Actionscript 3

Por: M@U

21 de Enero del 2009

5076 de clabLevel
Otros artículos de M@U

3,344 visitas

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

También te interesa

actionscript_3

Comentarios | Enviar un comentario

Buen tip M@U.. muy completo (y)

Por: Zguillez

Oooh yeah!! La verdad, nunca me había planteado esto, seguro que alguien encuentra utilidad

Por: Juanlu_001

muy buen tip, a mi una vez se me ocurrio pero algo diferente, la idea era hacer un handler para todos los eventos, y que el handler detecte el objeto del evento, algo asi

stage.addEventListener(MouseEvent.MOUSE_DOWN, EventHandler);
objeto1.addEventListener(MouseEvent.MOUSE_DOWN, EventHandler);
objeto2.addEventListener(MouseEvent.MOUSE_DOWN, EventHandler);

function EventHandler(e:Event){
switch(e.target){
case stage:
//funcion del click stage
break;
case objeto1:
//funcion del click objeto1
break;
case objeto2:
//funcion del click objeto2
break;
}
}
Por: Bipe-blog

Bipe-blog :

muy buen tip, a mi una vez se me ocurrio pero algo diferente, la idea era hacer un handler para todos los eventos, y que el handler detecte el objeto del evento

Yup! Como podrás ver también viene eso dentro del Tip, pocos entienden lo genial que se vuelve manejar algunos de los eventos así.
Por: M@U

Deja un comentario

IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.

Tutoriales y foros de diseño web

Captura múltiple de eventos con Actionscript 3

También te interesa