Access main Timeline

[aewu]

Hello,

    I am trying to convert a scrubber I made in Edge to createjs in Animate and am having a terrible time doing something very simple. I am sure this is just my lack of experience with createjs.

All I want to do is have the main timeline stop when the user stops dragging the scrubber, but I cannot get gotoAndStop to work inside the stopIt function below. I have tried every way I can think of to reference it: parent.gotoAndStop(), stage.gotoAndStop(), exportRoot.gotoAndStop()

If I put this.gotoAndStop() outside of the pressup function, it works as expected, so I assume it's a scope thing that I am overlooking. Any help is GREATLY appreciated.

scrubber.on("pressmove", function (evt) {// Enable the scrubber on mousedown

  // Make the scrubber move

        evt.currentTarget.x = Math.max(bounds.x + 8, Math.min(bounds.x + bounds.width - scrubberBounds.width + 8, evt.stageX));

        stage.update();

});

scrubber.on("pressup", function (evt) {// Go to frame on mouse up

        stopIt();

});

function stopIt(){

    var playTimeline = Math.ceil(((scrubber.x-255) / 455) * theTotalTime); // Make the scrubber scrub the timeline length of timelinePlay

    console.log(playTimeline);

    this.gotoAndStop(playTimeline);

    }

[kglad · Accepted solution]

you're losing scope in stopIt.  ie, 'this' isn't defined stopIt().

you could use:

scrubber.on("pressmove", function (evt) {// Enable the scrubber on mousedown

  // Make the scrubber move

        evt.currentTarget.x = Math.max(bounds.x + 8, Math.min(bounds.x + bounds.width - scrubberBounds.width + 8, evt.stageX));

        stage.update();

});

scrubber.on("pressup", function (evt) {// Go to frame on mouse up

        stopIt();

});

function stopIt(){

    var playTimeline = Math.ceil(((scrubber.x-255) / 455) * theTotalTime); // Make the scrubber scrub the timeline length of timelinePlay

    console.log(playTimeline);

   tl.gotoAndStop(playTimeline);

    }

or

scrubber.on("pressmove", function (evt) {// Enable the scrubber on mousedown

  // Make the scrubber move

        evt.currentTarget.x = Math.max(bounds.x + 8, Math.min(bounds.x + bounds.width - scrubberBounds.width + 8, evt.stageX));

        stage.update();

});

scrubber.on("pressup", function (evt) {// Go to frame on mouse up

        stopIt(this);

});

function stopIt(tl){

  
var playTimeline = Math.ceil(((scrubber.x-255) / 455) * theTotalTime);
// Make the scrubber scrub the timeline length of timelinePlay

    console.log(playTimeline);

   tl.gotoAndStop(playTimeline);

    }

[aewu]

Thank you! This works! Do you know why parent.gotoAndStop() doesn't work since scrubber is a child of the stage?

[kglad]

there is no implicit 'this' in createjs, unlike as3.  ie, you must explicitly use:

tl.parent.gotoAndStop();  // used with the first snippet

or

this.parent.gotoAndStop();  // used with the 2nd snippet

[ClayUUID]

kglad  wrote

there is no implicit 'this' in createjs,

That's not quite correct. CreateJS is written in JavaScript, and in JavaScript event handlers "this" is assigned to the global window object by default. When a function is called as an object method, "this" is assigned to the container object.

this - JavaScript | MDN

BTW, using "this" as an argument name to a function will cause a runtime error. It's a reserved word.

[kglad]

i edited the code to remove that problem.

[N_D_]

So if I have a movieClip button, what is the call to gotoAndStop() on the timeline?

Tried: this.stage, this.timeline, this.tl, tl.parent, this.parent...