Stop and Restart CreateJs animation

Question

I was wondering how could I stop an entire CreateJs canvas animation and how to restart it later. I'd like to save computing power and memory while the canvas is not visible for the user.

Does anybody know how?

Thank you in advance

Flaggy

Answer 1

Simply remove the listener on Ticker. For example:

createjs.Ticker.removeEventListener("tick", myStageOrTickFunction);
// then add it back later to unpause:
createjs.Ticker.addEventListener("tick", myStageOrTickFunction);

If you want to reset an entire animation exported from Flash, you have a couple of options:

1. You can re-instantiate the main timeline. You'll need to take a look at the output code to grab the name of the main timeline symbol, but it is generally based on the FLA name (ex. an FLA named "test.fla" will have its main timeline symbol named "Test").

stage.removeChildAt(0);

stage.addChild(new lib.Test());

2. You can use gotoAndPlay(0). This requires that all child MovieClips are set as Graphic instances though, because MCs play independently of their parent.

stage.getChildAt(0).gotoAndPlay(0)

Nigrosine

Thanks for your reply. I've already tried that path but unfortunately it does not rewind the animation before restarting it – Flaggy

Ah. Sorry, I didn't realize you also wanted to reset the animation. Doing that is very dependent on how you animation works. Is this just a straight output from Flash? – Nigrosine

Yes it is. By the way at the moment I'm using the exported HTML in an IFRAME. When I want to stop the animation I remove the tick event and when I want to start it over I remove the SRC attribute and then reattach it. – Flaggy

I see. I'll try that and let you know the outcome. Thank you! – Flaggy

Answer 2

You need to remove exportRoot from Stage then add it again

function restart()
    {


        stage.getChildAt(0).gotoAndPlay(0);
        stage.removeChildAt(0);
        createjs.Ticker.removeEventListener("tick", stage);
        createjs.Sound.stop();

        exportRoot = new lib[Object.getOwnPropertyNames(lib)[Object.getOwnPropertyNames(lib).length-3]]();
        stage.addChild(exportRoot);

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

    }

Hurried

Thank you for your reply, but I'm not using this library anymore. – Flaggy