Unidad 22. Juegos interactivos (IV)

22.3. Interacción con el ratón

Veamos ahora cómo interactuar con el ratón y el Escenario y sus elementos.

Empezaremos viendo una de las funciones más útiles para el ratón: arrastrar y colocar.

Utilizando las funciones StartDrag() y StopDrag() es muy sencillo arrastrar y colocar objetos por el Escenario, como vimos en el primer ejercicio paso a paso de la unidad 18, en el cual usábamos estas dos propiedades.

La función startDrag permite varios parámetros:

  miObjeto.startDrag(bloqueaCentro, rectángulo);

En bloqueaCentro podremos pasarle un valor booleano (true o false) que indicará si el arrastre se realizará desde el centro del clip (true) o desde el punto donde hizo clic el usuario (false).

El otro parámetro, rectángulo, nos permite definir los límites de la zona donde podemos arrastrar. Esta opción es muy útil cuando queremos que el arrastre sólo se pueda realizar sobre una zona determinada, como por ejemplo las tizas de las barras de desplazamiento, que no se pueden arrastrar fuera de la zona rectangular que delimitan dichas barras.

Una propiedad muy útil que también te será de mucha ayuda es la de dropTarget. Te permitirá averiguar sobre qué objeto se ha soltado el objeto arrastrado:

miObjeto.addEventListener(MouseEvent.MOUSE_DOWN, arrastrar);
function arrastrar(event):void {
	miObjeto.startDrag();
}

stage.addEventListener(MouseEvent.MOUSE_UP, soltar);
function soltar(event):void {
	miObjeto.stopDrag();
	trace(miObjeto.dropTarget);
}

Este código devolverá al Panel Salida el tipo de objeto (podemos utilizar miObjeto.dropTarget.name si queremos saber el nombre de instancia) sobre el cual se ha soltado. Si no hay ningún objeto, devolverá NULL.

Observa también que al soltar, es la escena la que escucha el evento. Esto hace que lo podamos soltar aunque, por lo que sea, el cursor ya no esté sobre el objeto.

Realiza el ejercicio paso a paso de Arrastre y Orientación de objetos para practicar conceptos que hemos visto hasta ahora.

 

Otra cosa que nos será de gran ayuda es poder localizar la posición del ratón. De este modo podríamos hacer que los objetos se desplacen u orienten hacia el ratón

Para averiguar las coordenadas del ratón sólo tendrás que recurrir a las propiedades mouseX y mouseY:

  var coordenadaX:Number = mouseX;
  var coordenadaY:Number = mouseY;

Con todo lo que hemos aprendido podemos ya sustituir el cursor del ratón normal por uno de nuestro agrado.

Para ello tenemos que escribir muy pocas líneas:

Mouse.hide(); //Ocultamos el cursor verdadero
addEventListener(Event.ENTER_FRAME,cambiarCursor);
function cambiarCursor(event):void {
	texto.contador_txt.text="("+mouseX+", "+mouseY+")";
	texto.x = mouseX; //Asignamos las coordenadas
	texto.y = mouseY; //Al elemento de texto
	miCursor.x = mouseX; //Y al clip que hará de cursor
	miCursor.y = mouseY;
}

Comenzamos ocultando el cursor verdadero, con el método Mouse.hide();.

En la biblioteca tenemos dos clips miCursor, que es lo que queremos mostrar como cursor, y texto, otro clip en el que mostramos las coordenadas. Como queremos que ambos objetos sigan al cursor real, en un evento repetitivo como enterFrame, les asignamos a ambos las coordenadas del ratón.

Animación no reproducible

Podemos volver a visualizar el ratón, por ejemplo, porque cambiamos de fotograma, con el código:

  Mouse.show();

 Cursos Informática Gratuitos