CODEWITHSUNDEEP
flashcreatejseaseljs
querystring
querystring

Reputation: 25

How to do the createJS equivalent of gotoAndPlay() and stop()

Here's the scenario: I am creating an infographic interactive animation which allows the user to virtually set up a tripod, interact with a virtual camera, etc. I need the timeline to stop when an arrow points where the user should click. Then the timeline should resume playing upon clicking the tripod (A movieClip) (the tripod also animates and then the view switches to first-person with the camera). Currently, the animation just plays forever, without stopping whatsoever to allow user interaction. Here is my createJS code so far:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>CreateJS export from birdsofprey-anim9c</title>

    <script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
    <script src="http://code.createjs.com/tweenjs-0.4.0.min.js"></script>
    <script src="http://code.createjs.com/movieclip-0.6.0.min.js"></script>
    <script src="http://code.createjs.com/preloadjs-0.3.0.min.js"></script>
    <script src="birdsofprey-anim9c.js"></script>

    <script>
    var canvas, stage, exportRoot;

    function init() {
        canvas = document.getElementById("canvas");
        images = images||{};

        var manifest = [
            {src:"images/Bitmap1.png", id:"Bitmap1"},
            {src:"images/Bitmap2.png", id:"Bitmap2"},
            {src:"images/Scene_1.jpg", id:"Scene_1"}
        ];

        var loader = new createjs.LoadQueue(false);
        loader.addEventListener("fileload", handleFileLoad);
        loader.addEventListener("complete", handleComplete);
        loader.loadManifest(manifest);
    }

    function handleFileLoad(evt) {
        if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
    }

    function handleComplete() {
        exportRoot = new lib.birdsofpreyanim11a();

        stage = new createjs.Stage(canvas);
        stage.addChild(exportRoot);
        tripodleg = new lib.LEFT_LEG_MC;
        stage.addChild(tripodleg);
        stage.update();

        createjs.Ticker.setFPS(24);
        createjs.Ticker.addEventListener("tick",f);
        function f(e){
        //var t=this;
        //t.stop();
        //exportRoot.stop();
        var delay = 4000;
        var startTime=createjs.Ticker.getTime();
        createjs.Ticker.getMeasuredFPS();
        if(createjs.Ticker.getMeasuredFPS == 6){
           exportRoot.stop();
           tripodleg.onclick = function(){
               exportRoot.gotoAndPlay(90);
           }
           //exportRoot.gotoAndPlay(90);
            createjs.Ticker.removeEventListener("tick",f);
            }
        }
        createjs.Ticker.addEventListener("tick", stage);
    }

    </script>
    </head>

    <body onload="init();" style="background-color:#D4D4D4">
        <canvas id="canvas" width="550" height="540" style="background-
    color:#ffffff"></canvas>
    </body>
    </html>

Thanks in advance, StackOverflow and for the expertise of the super coders they're affiliated with! -qs [EDIT] Updated my code again this time adding an instance of my tripod MovieClip to the stage via addChild(); and stopping the timeline via exportRoot.stop(); exportRoot isn't stopping, any clues? Thanks in advance.

Upvotes: 0

Views: 2884

Answers (1)

Lanny
Lanny

Reputation: 11294

I am guessing you are talking about the line:

function handlClick(){
    mc.play(2);
}

If so, just use gotoAndPlay(2) instead of play. EaselJS was initially based on the ActionScript language, so it mirrors a lot of that functionality. Check out the MovieClip docs.

function handlClick(){
    mc.gotoAndPlay(2);
}

One thing to note: What is createjs.Ticker.tick in your handlTick method? There is no tick property, only a "tick" event. The if statement this is in will never be true. What are you trying to do with that code exactly? Are you looking for the click handler to be added when the main clip reaches frame 30? Or after 30 "ticks"? Either way, this will do nothing.

Hope that helps.

[EDIT based on updates]

It looks like you changed it to use gotoAndPlay, but there are a few problems:

You are calling a global gotoAndPlay function (which doesn't exist) instead of targeting a MovieClip instance. If your main timeline has the frame you want to go to, use exportRoot.gotoAndPlay(90);.

Next, you are calling this.stop(). Your event listener is anonymous (which is fine), but that means that this is Window. Again, there is no global stop method -- so you should call it on the timeline you wish to stop. In this case, it's probably exportRoot.stop().

Cheers,

Upvotes: 0

Related Questions