마우스를 향하는 화살표 예제입니다. 간단하니 일단 보시죠~
그럼 이제부터 제작 해보겠습니다~
일단 화살표를 그려야겠죠? 아주 간단히 하나 그립니다.
package shape
{
import flash.display.Sprite;
/**
* 화살표 클래스, 오른쪽을 향하는 상태로 그려진다.
*/
public class DArrow extends Sprite
{
private var m_nWidth:Number;
private var m_nHeight:Number;
private var m_uColor:uint;
/**
* 생성자
* @param p_nWidth 화살표 가로크기(길이)
* @param p_nHeight 화살표 세로크기(두께)
* @param p_uColor 화살표 색상
* @param
*/
public function DArrow( p_nWidth:Number = 50, p_nHeight:Number = 50, p_uColor:uint = 0xffff00 )
{
super();
m_nWidth = p_nWidth;
m_nHeight = p_nHeight;
m_uColor = p_uColor;
init();
}
private function init():void
{
graphics.clear();
var nWidthHalf:Number = m_nWidth / 2;
var nHeightHalf:Number = m_nHeight / 2;
var nHeightQuarter:Number = m_nHeight / 4;
graphics.lineStyle( 1, 0, 1 );
graphics.beginFill( m_uColor );
graphics.moveTo( -nWidthHalf , -nHeightQuarter );
graphics.lineTo( 0, -nHeightQuarter );
graphics.lineTo( 0, -nHeightHalf );
graphics.lineTo( nWidthHalf, 0 );
graphics.lineTo( 0, nHeightHalf );
graphics.lineTo( 0, nHeightQuarter );
graphics.lineTo( -nWidthHalf, nHeightQuarter );
graphics.lineTo( -nWidthHalf, -nHeightQuarter );
graphics.endFill();
}
}
}
이제 위에 만들어진 화살표를 담아서 실행항 메인 클래스를 작성합니다.
package sample.ex_03_trigonometric
{
import flash.display.Sprite;
import flash.display.StageScaleMode;
import flash.events.Event;
import kr.uod.util.CCopyRightPosition;
import kr.uod.util.FDrawCopyRight;
import kr.uod.util.FDrawOutLine;
import org.osmf.display.ScaleMode;
import shape.DArrow;
/**
* 마우스를 향하는 화살표 예제
*/
[SWF(backgroundColor="0xffffff", width="600", height="400", frameRate="30")]
public class ArrowTowardMouse extends Sprite
{
private var m_dArrow:DArrow = new DArrow( 100, 50, 0xff0000 );
public function ArrowTowardMouse()
{
super();
stage.scaleMode = StageScaleMode.NO_SCALE;
init();
}
private function init():void
{
// 스테이지 외곽선 그리기
FDrawOutLine( this );
// 카피라이트
FDrawCopyRight( this, "By LazyArtist" );
// 화살표
m_dArrow.x = stage.stageWidth / 2;
m_dArrow.y = stage.stageHeight / 2;
addChild( m_dArrow );
this.addEventListener( Event.ENTER_FRAME, onEnterFrame );
}
private function onEnterFrame( e:Event ):void
{
var nPosX:int = mouseX - m_dArrow.x;
var nPosY:int = mouseY - m_dArrow.y;
// 화살표가 마우스를 향하게 하는 공식
m_dArrow.rotation = Math.atan2( nPosY, nPosX ) * 180 / Math.PI;
}
}
}
여기서 가장 중요한 것은 53라인의 공식입니다.
Math.atan() 처럼 비율을 파라미터로 전달하면 각도를 반환하는 것이 아니라
Math.atan2()는 y, x 파라미터를 받아서 각도(라디안)를 반환합니다. 플래시 좌표체계에 특화된 함수죠...
Math.atan2()를 사용하실때 주의할점은 Math.atan2( y, x ), 이렇게 y 값을 먼저 넣어준다는 점입니다.
그렇지 않으면 플래시무비가 이상한 동작을 하게됩니다...
참~ 쉽죠잉~ ^^;
itistory-photo-1