Comunidad de diseño web y desarrollo en internet

Trigonometria basica en Flash

Introducción

Cuando de nosotros salen ideas tremendas, como hacer aplicaciones rotatorias de acuerdo a nuestro puntero, juegos basados en posiciones del escenario, moviemientos con base de coordenadas ... etc, pues nos da un poco de trabajo.
Vamos a hacer un disparador, algo asi como una nave que disparara de acuerdo a la posicion de nuestro puntero. Este sera estatico, solo disparara desde su posicion, hacia donde este nuestro mouse.
Tambien vamos a ver lo basico para entender desde 0 como trabaja Flash en aspectos de la trigonometria, asi que manos a la obra.

Angulos, arcotangentes y demas

Expliquemos brevemente, como entender la estructura de un triangulo, en el escenario de Flash.

Aqui vemos como el obtener la distancia entre dos puntos (c) se hace mediante en teorema de pitagoras.

Ahora bien, ¿Como vamos a lograr obtener los datos de "a" y de "b", para meterlas en esa raiz cuadrada?:

La linea "a" esta conformada por la union de dos puntos, y cada uno de esos puntos esta en una posicion (x,y), que son los datos que nos da Flash, y los cuales podemos pasarle a la ecuación. Esto esta dibujado en azul para su mejor explicacion. Hay que aclarar que lo mismo se hace para obtener la longitud de b, pero cambiando los datos, pues mientras que para hallar a=(x2-x1), para b será, b=(y2-y1)

Este primer paso, que solo logramos obtener la longitud de c, ahora vamos a trabajar con angulos tomando en cuenta esta introduccion ... claro, en Flash!

Inclinaciòn de una linea dada, por la uniòn de dos puntos especìficos.

Asumamos que este angulo es de 20°.

Ahora bien, mucha atencion, asumamos de nuevo, que en el punto verde superior izquierdo, esta una nave espacial, y en el otro punto verde esta el sitio a donde queremos dirigir el timon de la nave. Entonces que avmos hacer? vamos a hacer que la nave se mueva a donde este nuestro puntero, por medio de actionscript, teniendo en cuenta lo que hasta aqui hemos explicado y que nos sirve de introduccion.

  1. Creamos en Flash, un dibujo de una nave cualquiera (si quieren pueden trabajar con el zip que abajo dejo para descargar), le damos CTRL + F8, y lo convertimos en un movieclip, al que le asignamos como nombre de instancia "nave_mc".
  2. Vamos al frame, que es donde pondremos toda la programacion para nuestra "nave_mc". Digitamos el siguiente code:
/*como trabajaremos con el movimiento del mouse, pues ponemos a trabajar el evento onMouseMove
de el objeto Mouse.*/

_root.onMouseMove = function() {
/*podriamos omitir esta linea, solo que si la omitimos, el evento onMouseMove se
actualizara de acuerdo a los fps (frames por segundo), pero si la ponemos, el control
que hace el UpdateAfterEvent() sobre el evento onMouseMove, hace que se actualice el
evento cada que se produzcan cambios sobre el mismo, independiente de los fps. luego de
terminar el ejercicio probemos la pelicula sin esta linea, veremos el cambio.*/

updateAfterEvent();
/*las dos lineas siguiente, solo crean dos variables para x y para y, de acuerdo a las
diferencias entre, el lugar donde este el puntero, y la posicion de la nave.*/

xdif = _root._xmouse-nave_mc._x;
ydif = _root._ymouse-nave_mc._y;
/*el metodo atan2 del objeto Math (Math.atan2(x,y)), nos dice el angulo contrario del
angulo opuesto de un triangulo rectangulo, donde x es la longitud del cateto contiguo,
e y es la longitud del cateto opuesto. El el code vemos invertidos los valores de "x" e
"y", ya que el trianglo sobre el que estamos trabajando, esta invertido para efectos del
ejemplo. */

angulo = Math.atan2(ydif, xdif);
/*a Flash no le podemos pasar estos datos de esta manera, entonces tenemos que convertir
el angulo que obtuvismos anteriormente, a radianes, para que lo comprenda Flash, teniendo
en cuenta que Flash no trabaja exactamente como trabaja un plano cartesiano.*/

angulo = angulo*180/Math.PI;
/*para terminar, luego de obtener el angulo que se genera entre nuestra "nave_mc" que es
estatica y nuestro mouse, pues decimos a nuestra "nave_mc" que rote de acuerdo a ese angulo.*/

nave_mc._rotation = angulo;
};
Bueno amigos, aqui el resultado, y aqui el final !

Saludos !

JOHNMARTIN

Descargar Archivo

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

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