Question

Is there a way to measure the average time it takes my code to run and each frame to render for my Flex app? More specifically, I know how to use getTimer() but I’m not sure about which events I should listen to in order to do this. I was reading this post and am not sure how you’d figure out how long the actual rendering took (it would seem like it may be the time between the RENDER event fires and the next ENTER_FRAME event fires, but I’m not sure). Also, not exactly sure where the user code happens, or whether I should care about EXIT_FRAME and FRAME_CONSTRUCTED.

Any help much appreciated!

EDIT —-

here’s a snippet of code showing the main events for each repetition of the second frame in a super simple flex app. What I’m trying to figure out is whether there is a clear relationship between the “user code” and “rendering” parts of the classic Flex racetrack and the intervals between the four main signals that I’m tracing from.

The code:

<?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" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

    <fx:Script>
        <![CDATA[
            import flash.utils.getTimer;

            public var t:Timer;
            protected function button1_clickHandler(event:MouseEvent):void
            {
                t = new Timer(40, 50);
                t.addEventListener(TimerEvent.TIMER, handleTimeTick);
                t.addEventListener(TimerEvent.TIMER_COMPLETE, timerDone);
                addEventListener(Event.RENDER, application1_renderHandler);
                addEventListener(Event.ENTER_FRAME, application1_enterFrameHandler);
                addEventListener(Event.EXIT_FRAME, application1_exitFrameHandler);
                addEventListener(Event.FRAME_CONSTRUCTED, application1_frameConstructedHandler);
                t.start();
            }

            protected function handleTimeTick(e:TimerEvent):void
            {
                shape.x += 5;
            }

            protected function timerDone(e:TimerEvent):void
            {
                t.stop();
                t.removeEventListener(TimerEvent.TIMER, handleTimeTick);
                t.removeEventListener(TimerEvent.TIMER_COMPLETE, timerDone);
                removeEventListener(Event.RENDER, application1_renderHandler);
                removeEventListener(Event.ENTER_FRAME, application1_enterFrameHandler);
                removeEventListener(Event.EXIT_FRAME, application1_exitFrameHandler);
                removeEventListener(Event.FRAME_CONSTRUCTED, application1_frameConstructedHandler);
            }

            protected function application1_renderHandler(event:Event):void
            {
                trace("render fire", getTimer());
            }

            protected function application1_enterFrameHandler(event:Event):void
            {
                trace("enter frame fire", getTimer());
            }

            protected function application1_exitFrameHandler(event:Event):void
            {
                trace("exit frame fire", getTimer());
            }

            protected function application1_frameConstructedHandler(event:Event):void
            {
                trace("frame constructed fire", getTimer());
            }

        ]]>
    </fx:Script>


    <s:Rect id="shape" x="0" y="0" height="20" width="20">
        <s:fill>
            <s:SolidColor color="0xff0000"/>
        </s:fill>
    </s:Rect>

    <s:Button x="10" y="100" click="button1_clickHandler(event)" label="go"/>
</s:Application>

Answer 1

Ok, after reading plenty around the web I think this presentation gives the best info about how to measure elastic race track times (see for instance this piece of code from the presentation).