Event Performance in Flex

In this post, I'm gonna use Korean.


If you are Neither Korean nor Unenabled to read Korean,
Please click here to the original post page.


오늘 플렉스의 퍼포먼스에 대해 재미난 것을 발견해서 소개하고자 한다.
원문에는 비디오도 있으니 보고싶은분은 위의 here를 클릭하길 바란다.

원문포스트에서는 Chet Haase라는 어도비 개발자가 updateAfterEvent()라는 메쏘드를 소개하고있다.
updateAfterEvent() 메쏘드는 시간에 예민한 작업(예를 들어 마우스에 관련된 영상이나 애니메이션등)에 좀더 나은 렌더링을 제공하게 해준다.

일반적으로 플래쉬플레이어가 화면에 보여주는 그래픽의 변화는 플레이어의 매fps(frame per second)마다 일어난다(디폴트 24fps).
매번 42밀리세컨마다 업데이트 되는 이 fps는 대부분의 화면 변화에 괜찮은편이다.

하지만 어떤 움직임을 더 부드럽게 하고싶다거나(애니매이션 같은), 유저인터페이스에 좀더 빠른 응답을 주고싶을 경우에는(컴포넌트가 마우스의 액션에 따라 상태가 변하는 등의)
24fps는 충분하지 못할수있다.

이럴때! 이 updateAfterEvent() 메쏘드를 사용한다면 원하는 결과를 얻을수있을것이다.

아래 소스는 updateAfterEvent를 적용하지 않은 코드이다.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               mouseMove="mouseMoveHandler(event)"
               width="300" height="200"
               frameRate="2">
    <fx:Script>
        <![CDATA[
            private var timer:Timer;
            private var startTime:Number;
            
            private function startTimer():void
            {
                timer = new Timer(10, 0);
                timer.addEventListener(TimerEvent.TIMER, timerHandler);
                timer.start();
                startTime = getTimer();
            }
            
            private function timerHandler(event:TimerEvent):void
            {
                var deltaTime:Number = getTimer() - startTime;
                if (deltaTime > 1000)
                {
                    timer.stop();
                    button.x = width - button.width;
                    timer = null;
                }
                else
                {
                    button.x = (width - button.width) / 1000 * deltaTime;
                }               
            }
            
            private function mouseMoveHandler(event:MouseEvent):void
            {
                mouseTracker.x = event.stageX - (mouseTracker.width / 2);
                mouseTracker.y = event.stageY - (mouseTracker.height / 2);                
            }
        ]]>
    </fx:Script>
    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:stroke>
            <s:SolidColorStroke color="black"/>
        </s:stroke>
    </s:Rect>
    <s:Label baseline="15" text="frameRate:"/>
    <s:TextInput x="80" width="50" baseline="15" id="frameRateInput" text="2"
                 imeMode="{IMEConversionMode.ALPHANUMERIC_HALF}" 
                 change="stage.frameRate = Number(frameRateInput.text)"/>    
    <s:Button id="button" label="Move Me" y="50" click="startTimer()"/>
    <s:Ellipse id="mouseTracker" width="10" height="10">
        <s:fill>
            <s:SolidColor color="red"/>
        </s:fill>
    </s:Ellipse>
</s:Application>

그 결과다.



아주 많이 답답하다...;; 그럼 위의 코드에 updateAfterEvent를 적용시켜보자.

private function timerHandler(event:TimerEvent):void
            {
                var deltaTime:Number = getTimer() - startTime;
                if (deltaTime > 1000)
                {
                    timer.stop();
                    button.x = width - button.width;
                    timer = null;
                }
                else
                {
                    button.x = (width - button.width) / 1000 * deltaTime;
                }
                // call updateAfterEvent()
                event.updateAfterEvent();
            }
            
            private function mouseMoveHandler(event:MouseEvent):void
            {
                mouseTracker.x = event.stageX - (mouseTracker.width / 2);
                mouseTracker.y = event.stageY - (mouseTracker.height / 2);
                // call updateAfterEvent()
                event.updateAfterEvent();
            }

자..이제 얼마나 어떻게 변했는지 한번 보자.




같은 프레임을 주더라도(0은 주지말자;; 버벅대는거같지만 싫은 화면을 업데이트 하는 프레임이 느려졌을뿐이다.. ) 상당히 부드러운 움직임을 볼수있다.