'Animation'에 해당되는 글 1건

  1. 2010.01.25 플렉스에서 애니메이션 만들기 (1)

플렉스에서 애니메이션을 만드는 방법은 2가지가 있다.

1. 먼저 첫번째는 enterFrame이벤트를 이용하는 것이다.
이는 원래 플래시에서 사용하던 방식인데, 프레임 개념을 사용해서 애니메이션을 만드는 것이다.

enterFrame이벤트를 사용하기 위해서는 이벤트 리스너를 등록시켜줘야 한다.

addEventListener(Event.ENTER_FRAME, onEnterFrame);

이렇게 해주면 enterFrame에 대한 이벤트 리스너가 등록된 것이다.
두번째 인자인 onEnterFrame은 매 프레임마다 호출되는 함수이다.
그러면 이제 우리가 해야할 일은 onEnterFrame함수를 작성하는 것이다.

private function onEnterFrame(event : Event) : void  {
  //매 프레임마다 해야할 작업을 작성한다.
}

그러면 이제 마우스를 따라 부드럽게 움직이는 이미지를 만들어보자.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" mouseMove="onMouseMove(event)" width = "400" height = "400" verticalScrollPolicy="off" horizontalScrollPolicy="off">
    <mx:Image width="100" height="100" source="{img}" id="image" x="150" y="122"/>
    <mx:Script>
        <![CDATA[
            private var targetX : Number;
            private var targetY : Number;
            private const speed : Number = 0.1;
           
            [Embed(source="../images/wisu_300.png")]
            [Bindable]
            private var img : Class;
           
            private function init() : void {
                addEventListener(Event.ENTER_FRAME, onEnterFrame);
                targetX = 0; targetY = 0;
            }
           
            private function onEnterFrame(event : Event) : void {
                var dx : Number = targetX - image.x;
                var dy : Number = targetY - image.y;
                image.x += dx * speed;
                image.y += dy * speed;
            }
           
            private function onMouseMove(event : MouseEvent) : void {
                targetX = event.stageX;
                targetY = event.stageY;   
            }
        ]]>
    </mx:Script>
</mx:Application>



2. 플렉스에서 애니메이션을 만드는 두번째 방법은 timer를 이용하는 것이다.
타이머는 원하는 시간마다 특정함수가 호출되도록 하는 이벤트이다.
타이머를 사용하기 위해서는 일단 타이머 객체를 생성해야 한다.

private var timer : Timer = new Timer(30);

이렇게 해주면 30밀리초마다 호출되는 타이머 객체가 만들어지는 것이다.
그리고 나서 이벤트 리스너를 등록해야한다.

timer.addEventListener(TimerEvent.TIMER, onTimer);

이렇게 하면 타이머 리스너가 등록된 것이다. 그런데 여기서도 마찬가지로 onTimer함수를 정의해줘야 한다.
private function onTimer(event : TimerEvent) : void {
  //매 30밀리초마다 해야할 작업을 작성한다.
}

이렇게 등록을 했다면 타이머를 시작시켜줘야한다. 타이머는 enterFrame과는 다르게 시작을 해주지 않으면 동작하지 않는다.

timer.start(); 

이렇게 start()메소드를 호출해 줌으로써 이제 타이머가 동작하게 되는 것이다.
만약 타이머를 정지시키고 싶다면 stop()메소드를 호출해야한다.

timer.stop();

이제 타이머를 이용해서 위에서 만든 마우스를 따라 움직이는 애니메이션을 만들어보자.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" mouseMove="onMouseMove(event)" width = "400" height = "400" verticalScrollPolicy="off" horizontalScrollPolicy="off">
    <mx:Image width="100" height="100" source="{img}" id="image" x="150" y="122"/>
    <mx:Script>
        <![CDATA[
            private var targetX : Number;
            private var targetY : Number;
            private const speed : Number = 0.1;
            private var timer : Timer;
           
            [Embed(source="../images/wisu_300.png")]
            [Bindable]
            private var img : Class;
           
            private function init() : void {
                timer = new Timer(30);
                timer.addEventListener(TimerEvent.TIMER, onTimer);
                timer.start();
                targetX = 0; targetY = 0;
            }
           
            private function onTimer(event : TimerEvent) : void {
                var dx : Number = targetX - image.x;
                var dy : Number = targetY - image.y;
                image.x += dx * speed;
                image.y += dy * speed;
            }
           
            private function onMouseMove(event : MouseEvent) : void {
                targetX = event.stageX;
                targetY = event.stageY;   
            }
        ]]>
    </mx:Script>
</mx:Application>



이렇게 enterFrame과 timer를 이용해서 애니메이션을 구현해 보았는데 동작하는 모습은 똑같다.
그런데 이렇게 애니메이션을 사용할 때에는 주의해야할 점이 있다.
이번에 프로젝트를 진행해보면서 느낀 점인데, 애니메이션을 보여주기 위해 계속해서 어떤 연산을 수행한다면 다른 컴포넌트가 업데이트 될 충분한 시간을 주지 못한다는 것이다.
그래서 기능적인 면이 우선시 되는 프로젝트라면 애니메이션이 그 기능을 제한하지 않는 범위 내에서 사용될 수 있도록 해야할 것이다.
신고
Posted by Code-Moon

댓글을 달아 주세요

  1. 버젼업 2012.05.16 14:22 신고 Address Modify/Delete Reply

    var icx:Number = image.width / 2 + image.x; // 이미지의 정확한 중간 좌표 x
    var icy:Number = image.height / 2 + image.y; // 이미지의 정확한 중간 좌표 y

    var dx:Number=targetX - icx;
    var dy:Number=targetY - icy;

티스토리 툴바