Highlighted

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

New Here ,
Jan 06, 2019

Copy link to clipboard

Copied

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

TOPICS
Discussions

Views

144

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

New Here ,
Jan 06, 2019

Copy link to clipboard

Copied

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

TOPICS
Discussions

Views

145

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 06, 2019 0
Adobe Community Professional ,
Jan 06, 2019

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 06, 2019 1
New Here ,
Jan 06, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 06, 2019 0
ClayUUID LATEST
Adobe Community Professional ,
Jan 06, 2019

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 06, 2019 0