Mouse Events - Eventos del Mouse - Flex 3

Ejemplo a Elaborar en MXML y en ActionScrip:

Muchas veces queremos hacer cosas cuando ocurren ciertos eventos, como hacer clic sobre algo o pasar por arriba de un objeto, etc. Flex Tiene escrita varias clases para el manejo de eventos, estas clases son escritas completamente en action scrip las cuales algunos objetos heredan para facilitarnos las vida al momento de querer hacer algo cuando ocurra un evento en particular.
Hay que tener en cuanta solo 3 cosas cuando hablamos de eventos, saber que es un Dispacher, saber que es un Listener y saber que es un Event Object:

• 1. Dispacher: El objeto que es manipulado por el usuario y que dispara el evento. No olvidemos de que además de que los eventos son disparados automáticamente como respuesta a una acción del usuario también podemos dispararlos manualmente con ActionScript. (sacado de: http://www.holaflex.com/?p=40).
• 2. Event object : Este es un objeto creado de acuerdo al tipo de acción generada y es el elemento que toma información del dispatcher para compartirla con otros componentes. (sacado de: http://www.holaflex.com/?p=40).
• 3. Listeners: Objetos que escuchan y responden a dichos eventos, es decir, son los objetos que están registrados para tomar una acción cuando cierto evento es disparado en algún otro objeto. (sacado de: http://www.holaflex.com/?p=40).

Una vez que sepamos esto bien podemos hacer un ejemplo en el cual tomamos una imagen y escuchamos todos 6 eventos seleccionados:

• Evento mouseOut: Mouse Out dispara un evento cuando el mouse ya no está sobre la imagen, ósea si estamos parado sobre ella y nos salimos de ella por cualquiera de sus lados este evento se disparara, valido acotar que solo se dispara cuando sale, no es que se dispara varias veces muestras este fuera de la imagen.
• Evento mouseOver: Mouse Over dispara un evento cuando el mouse entra a tocar la imagen, de igual manera se dispara solo cuando entra mas no varias veces por estar dentro de la imagen.
• Evento mouseDown: Mouse Down dispara un evento cuando bajamos el botón izquierdo del mouse sobre la imagen, solo una vez mientras el botón este abajo esto no significa que se dispara varias veces mientras mantengamos apretado el botón.
• Evento mouseUp: Mouse Up dispara un evento cuando soltemos el botón izquierdo sobre la imagen.
• Evento click: Click dispara un evento cuando se hace clic k con el botón izquierdo del mouse, la diferencia entre click con mouse up y mouse down es que el clic tienen que ocurrir los 2 eventos tanto down como up sobre la imagen, en cambio si hacemos mouse down sobre la imagen y mantenemos presionado y nos salimos de la imagen y hacemos mouse up se contara el evento mouse down pero el mouse up no se disparara y de la misma forma si hacemos mouse down fuera de la imagen y dejamos presionado al pararnos sobre la imagen y soltar el botón se contara el mouse up pero el mouse down nunca se disparo.
• Evento mouseMove: mouse move se dispara tantas veces como nos movamos dentro de la imagen, este evento entra varias veces y podemos ver esta acción en el ejemplo al colocar la posición del mouse dentro de la imagen, esta posición se refresca cada vez que hacemos un movimiento dentro de la imagen.

Los eventos también se pueden hacer en MXML o en AS 3.0 veamos el ejemplo escrito de las dos maneras:

Ejemplo I, escrito en MXML:

Codigo:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="0xFFFFFF">
<mx:VBox  >
<mx:HBox >
<mx:Label text="Evento mouseOut:" />
<mx:Label id="idLabelAuxI" text="0" color="0xFF0000" />
</mx:HBox>
<mx:HBox >
<mx:Label text="Evento mouseOver:" />
<mx:Label id="idLabelAuxII" text="0" color="0xFF0000" />
</mx:HBox>
<mx:HBox >
<mx:Label text="Evento mouseDown:" />
<mx:Label id="idLabelAuxIII" text="0" color="0xFF0000" />
</mx:HBox>
<mx:HBox >
<mx:Label text="Evento mouseUp:" />
<mx:Label id="idLabelAuxIV" text="0" color="0xFF0000" />
</mx:HBox>
<mx:HBox >
<mx:Label text="Evento click:" />
<mx:Label id="idLabelAuxV" text="0" color="0xFF0000" />
</mx:HBox>
<mx:HBox >
<mx:Label text="Evento mouseMove:" />
<mx:Label id="idLabelAuxVI" text="0" color="0xFF0000" />
</mx:HBox>
<mx:Image id="idImagen" source="img/Dibujo.jpg"
mouseOut="idLabelAuxI.text = (int(idLabelAuxI.text)+1).toString()"
mouseOver="idLabelAuxII.text = (int(idLabelAuxII.text)+1).toString()"
mouseDown="idLabelAuxIII.text = (int(idLabelAuxIII.text)+1).toString()"
mouseUp="idLabelAuxIV.text = (int(idLabelAuxIV.text)+1).toString()"
click="idLabelAuxV.text = (int(idLabelAuxV.text)+1).toString()"
mouseMove="idLabelAuxVI.text = 'Mouse X: '+idImagen.mouseX +' Mouse Y: '+ idImagen.mouseY"
/>
</mx:VBox>
</mx:Application>

Ejemplo II, en MXML con AS 3.0:

Codigo:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="0xFFFFFF"
creationComplete="init()">
<mx:Script>
<![CDATA[
private function init():void{
idImagen.addEventListener(MouseEvent.MOUSE_OUT,mouseOutHandler);
idImagen.addEventListener(MouseEvent.MOUSE_OVER,mouseOverHandler);
idImagen.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler);
idImagen.addEventListener(MouseEvent.MOUSE_UP,mouseUpHandler);
idImagen.addEventListener(MouseEvent.CLICK,mouseClickHandler);
idImagen.addEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandler);
}
private function mouseOutHandler(e:MouseEvent):void{
idLabelAuxI.text = (int(idLabelAuxI.text)+1).toString();
}
private function mouseOverHandler(e:MouseEvent):void{
idLabelAuxII.text = (int(idLabelAuxII.text)+1).toString();
}
private function mouseDownHandler(e:MouseEvent):void{
idLabelAuxIII.text = (int(idLabelAuxIII.text)+1).toString();
}
private function mouseUpHandler(e:MouseEvent):void{
idLabelAuxIV.text = (int(idLabelAuxIV.text)+1).toString();
}
private function mouseClickHandler(e:MouseEvent):void{
idLabelAuxV.text = (int(idLabelAuxV.text)+1).toString();
}
private function mouseMoveHandler(e:MouseEvent):void{
idLabelAuxVI.text = 'Mouse X: '+idImagen.mouseX +' Mouse Y: '+ idImagen.mouseY;
}

]]>
</mx:Script>

<mx:VBox  >
<mx:HBox >
<mx:Label text="Evento mouseOut:" />
<mx:Label id="idLabelAuxI" text="0" color="0xFF0000" />
</mx:HBox>
<mx:HBox >
<mx:Label text="Evento mouseOver:" />
<mx:Label id="idLabelAuxII" text="0" color="0xFF0000" />
</mx:HBox>
<mx:HBox >
<mx:Label text="Evento mouseDown:" />
<mx:Label id="idLabelAuxIII" text="0" color="0xFF0000" />
</mx:HBox>
<mx:HBox >
<mx:Label text="Evento mouseUp:" />
<mx:Label id="idLabelAuxIV" text="0" color="0xFF0000" />
</mx:HBox>
<mx:HBox >
<mx:Label text="Evento click:" />
<mx:Label id="idLabelAuxV" text="0" color="0xFF0000" />
</mx:HBox>
<mx:HBox >
<mx:Label text="Evento mouseMove:" />
<mx:Label id="idLabelAuxVI" text="0" color="0xFF0000" />
</mx:HBox>
<mx:Image id="idImagen" source="img/Dibujo.jpg" />
</mx:VBox>
</mx:Application>

Los eventos no solo se aplican a las imágenes cada objeto o componente se le puede decir que dispare los eventos correspondientes a ellos, en otro tutorial veremos más eventos y en tutoriales de flex avanzado veremos cómo podemos crear nuestros propios eventos.
Saludos.

Descargar Archivos:

• ManejoDeEventos.mxml
• ManejoDeEventosII.mxml