Comenzando otro mes, me parece q está más cerca el próximo año de lo que espere, este mes tengo planeado hacer una compra muy importante para mí por lo que debo de trabajar el doble para darme un regalito en navidad y al parecer solo tengo un mes para ahorrar.
Para empezar con este ejemplo de animación sencilla, lo que se necesita es crear una clase llamada Flecha (Arrow), por lo que la creamos como una extensión de un Sprite:
//Arrow.as dibuja una flecha con funciones API
package{
import flash.display.Sprite;
public class Arrow extends Sprite{
public function Arrow(){
init();
}
public function init():void{
graphics.lineStyle(1,0,1);
//color de relleno
graphics.beginFill(0x545454);
//empezando a dibujar
graphics.moveTo(-50,-25);
graphics.lineTo(0,-25);
graphics.lineTo(0,-50);
graphics.lineTo(50,0);
graphics.lineTo(0,50);
graphics.lineTo(0,25);
graphics.lineTo(-50,25);
graphics.lineTo(-50,-25);
graphics.endFill();
}
}
}
Este código crea una flecha q podemos llamar a nuestro programa principal, esto nos da una idea de las llamadas y creación de instancias de una determinada clase; que hace referencia, como es una clase la guardamos con el nombre Arrow.as; ahora creamos nuestro código principal que hace uso de nuestra clase Arrow, este programa principal lo llamamos, RotateToMouse.as (Rotación respecto al ratón).
//la flecha dibujada con Arrow.as es guiada por la posicion del raton
package{
import flash.display.Sprite;
import flash.events.Event;
public class RotateToMouse extends Sprite{
private var arrow:Arrow;
public function RotateToMouse(){
init();
}
public function init():void{
arrow = new Arrow();
addChild(arrow);
//hasta esta parte del codigo se muestra una flecha en el escenario
//se acomoda esta flecha en una posicion al medio del escenario
arrow.x=stage.stageWidth/2;
arrow.y=stage.stageHeight/2;
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
public function onEnterFrame(event:Event):void{
var dx:Number=mouseX-arrow.x;
var dy:Number=mouseY-arrow.y;
var radians:Number=Math.atan2(dy,dx);
//var radians=Math.atan(dy/dx);
arrow.rotation=radians*180/Math.PI;
//otra manera de sacar este resultado de que la flecha siga el mouse es:
//var radians=Math.atan(dy/dx);
//sin embargo tiene una falla muy evidente por cierto
}
}
}
Como podemos observar, dentro de nuestra función onEnterFrame, se define dos variables dx y dy las cuales “se obtienen”, de la posición del puntero del mouse, respecto a nuestra flecha antes acomodada justo en medio del escenario, además de la variable radians que utiliza una función matemática muy conocida que es la función tangente, o mejor dicho la función arco tangente, atan2(posx, posy); esta función tiene dos valores la medida del lado opuesto y la medida del lado adyacente del triangulo que formamos de la posición captado con mouseX y mouseY y la posición de la flecha en el escenario, luego de obtener este ángulo de giro, lo aplicamos a la propiedad rotation (rotación o giro), de nuestra flecha y aplicamos el cambio de radianes a grados, compilando nuestro código obtenemos el siguiente resultado:
