Highlighted

Access main Timeline

Explorer ,
Feb 16, 2017

Copy link to clipboard

Copied

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

    }

Adobe Community Professional
Correct answer by kglad | Adobe Community Professional

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

    }

Views

289

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

Access main Timeline

Explorer ,
Feb 16, 2017

Copy link to clipboard

Copied

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

    }

Adobe Community Professional
Correct answer by kglad | Adobe Community Professional

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

    }

Views

290

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
Feb 16, 2017 0
Adobe Community Professional ,
Feb 16, 2017

Copy link to clipboard

Copied

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

    }

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...
Feb 16, 2017 0
Explorer ,
Feb 16, 2017

Copy link to clipboard

Copied

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

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...
Feb 16, 2017 0
Adobe Community Professional ,
Feb 16, 2017

Copy link to clipboard

Copied

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

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...
Feb 16, 2017 0
Adobe Community Professional ,
Feb 16, 2017

Copy link to clipboard

Copied

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.

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...
Feb 16, 2017 1
Adobe Community Professional ,
Feb 16, 2017

Copy link to clipboard

Copied

i edited the code to remove that problem.

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...
Feb 16, 2017 0
N_D_ LATEST
Community Beginner ,
Feb 05, 2020

Copy link to clipboard

Copied

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...

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...
Feb 05, 2020 0