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

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)

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(); 

    }