How to get message of each frame updating (HTML5 canvas)

[dingz54260271]

Hi Guys,

   I've created a HTML5 canvas animation and export it to a HTML page (sub page). And I've embeded this animation page into a main page using HTML tag "iframe".

In main page, I've added play, stop, back, forward buttons and a slider bar to show the animation progress. Now, I can control this animation progress in main page, but I have one problem left. During animation, how to get the animation frame ID automatically in main page. In fact, I can get current frame manually by clicking a button in main page, main page will send a message to sub page, sub page will pass the current frame to main page. But my question is how to get the frame updating message (or event) during animation, so I can refresh slider bar automatically.

Thanks in advance.

Ding

[ClayUUID · Accepted solution]

https://createjs.com/docs/easeljs/classes/Ticker.html

[dingz54260271]

Hi Clay,

Thank you so much for your information. Now, my code looks like this, and hope it can help other guys.

//Registers the "tick" event listener.

fnStartAnimation = function()

{

    createjs.Ticker.setFPS(lib.properties.fps);

    //createjs.Ticker.addEventListener("tick", stage);

    //DZH:

    createjs.Ticker.addEventListener("tick", handleTick);

    function handleTick(event)

    {

        stage.update();

        // Actions carried out each tick (aka frame)

        if (!event.paused)

        {

            // Actions carried out when the Ticker is not paused.

            window.parent.postMessage('currentFrame'+exportRoot.currentFrame,'*');

        }

    }

}

Regards.

Ding

[ClayUUID]

Why on earth are you setting the FPS, and updating the stage, and checking paused? All you have to do is listen for Tick events and post them back to the parent window.

Wait... you aren't hacking up the code that Animate generates when you publish... are you?