Unidad 22. Juegos (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 usabamos estas dos propiedades.

La función startDrag permite varios parámetros:

  miObjeto.startDrag(bloqueaCentro, rectángulo);

En bloqueaCentro podremnos 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('mouseDown', arrastrar);

function arrastrar(event):void {

	miObjeto.startDrag();

}



miObjeto.addEventListener('moseUp', 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 ningun objeto, devolverá NULL.

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 bliblioteca 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 onjetos sigan al cursor real, en un evento repetitivo como enterFrame, les asignamos a ambos las coordenadas del ratón.

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

  Mouse.show();
Pág. 22.4

Atrás  Inicio  Adelante