[Flash] 마우스를 향하는 화살표

마우스를 향하는 화살표 예제입니다. 간단하니 일단 보시죠~

그럼 이제부터 제작 해보겠습니다~

일단 화살표를 그려야겠죠? 아주 간단히 하나 그립니다.

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 값을 먼저 넣어준다는 점입니다. 

그렇지 않으면 플래시무비가 이상한 동작을 하게됩니다...

참~ 쉽죠잉~ ^^;