Unidad 22. Ejercicio paso a paso: Arrastre y orientación de objetos

Objetivo:

Vamos a crear la siguiente película:

Animación no soportada por el navegador

Ejercicio paso a paso.

  1. Abre el archivo trigonometria.fla que encontrarás en la carpeta ejercicios/trigonometria del curso. En él, tenemos dos objetos con los nombre de instancia pelota y nave.
  2. Crea una nueva capa para añadir el código.
  3. Añadiremos primero el código para hacer que la pelota se pueda arrastrar y colocar con el ratón. Selecciona el primer fotograma de la nueva capa y abre el Panel Acciones (tecla F9). Escribe el siguiente fragmento de código:
    pelota.addEventListener(MouseEvent.MOUSE_DOWN, arrastrarPelota);
    
    function arrastrarPelota(event:MouseEvent):void { //al pulsar el botón
    
    	pelota.startDrag();  //Comenzamos a arrastrar
    
    }
    
    
    
    pelota.addEventListener(MouseEvent.MOUSE_UP, soltarPelota);
    
    function soltarPelota(event:MouseEvent):void { //Al soltarlo
    
    	pelota.stopDrag();  //Dejamos de arrastrar
    
    }
  4. Ahora haremos que la nave se oriente hacia la pelota en cada momento (relamente lo que haremos será asociar el código al evento onEnterFrame para que se refresque a cada vuelta al fotograma). Abre el Panel Acciones y escribe los siguiente:
    nave.addEventListener(Event.ENTER_FRAME, orientarHaciaPelota);
    
    function orientarHaciaPelota(event):void {
    
    	//A partir de las coordenadas de cada objeto, calculamos el ángulo
    
    	var radianes:Number = Math.atan2((pelota.y-nave.y), (pelota.x-nave.x));
    
    	//Lo convertimos se radianes a grados
    
    	var grados:Number=Math.round(radianes*180/Math.PI);
    
    	//Y rotamos la nave esos grados
    
    	nave.rotation=grados;
    
    }
    Lo que hemos hecho en un principio es, como vimos en la teoría, es calcular el ángulo que hay entre las coordenadas de la pelota y las de la nave. El ángulo obtenido, convertido en grados, será lo que hay que rotar (rotation) la nave para que apunte a la pelota.

Nota: Observa que inicialmente la nave está orientada a la derecha, así que no hará falta solventar el desfase de ángulo.

   Inicio    





Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.

{cookies_law.style.display='block';}