Skip to main content
H
horuscat
Participant
March 31, 2018
Answered

html5 canvas script conflict

  • March 31, 2018
  • 2 replies
  • 221 views

i'm hoping someone can help me with this...

this is in html5 canvas. i have a complex movie clip i only want to play through once. with a simple "this.stop();" on the last frame of the movieclip timeline, it worked great. it stopped. only played once.

but then i added some scripting i found to keep the animation synced up with the soundtrack (very important), skipping frames if necessary.

this is on the first frame of the movieclip timeline...

------

var starttime = createjs.Ticker.getTime();

createjs.Ticker.setFPS(24);

this.addEventListener("tick", movealong);

self = this;

this.stop();

function movealong() {

var now = createjs.Ticker.getTime();

var f = Math.floor((now - starttime)/1000*24);

self.gotoAndStop(f);

}

------

so now the animation runs great, keeping up with the soundtrack perfectly, but the clip won't stop at the end. it keeps looping. i've tried every variation i can think of using the stop(); command (this.stop(); self.stop(); this.microdoseclip.stop(); this.parent.stop(); , etc.) , but i haven't gotten anything to stop the clip at the end of its timeline. is it because the movieclip animation is skipping frames? am i missing the script on my last keyframe completely? i think it has to do with the 'this' declaration but i don't know enough javascript to find a work around.

any help would be greatly appreciated!

    This topic has been closed for replies.
    Correct answer Colin Holgate

    I wrote the code you're quoting, and kglad gave one way to solve the issue. He got one thing wrong in his solution:

    var f = Math.floor((now - starttime)/1000*24);

    self.gotoAndStop(f);

    if(f>=self.totalFrames-1){

        self.removeEventListener('tick',movealong);

    }

    That could create a value for f that is greater than self.totalFrames, and might lead to other issues. This would be safer:

    var f = Math.floor((now - starttime)/1000*24);

    if(f>=self.totalFrames-1){ 

        f = self.totalFrames-1;

       self.gotoAndStop(f);

        self.removeEventListener('tick',movealong);

    }else{

        self.gotoAndStop(f);

    }

    Now, in my original thing that I was making I went on to need to trigger things at certain times, and I used setTimeout() to achieve that. So I changed the ending to use setTimeout() too. Something like this:

    var starttime = createjs.Ticker.getTime();

    createjs.Ticker.setFPS(24);

    this.addEventListener("tick", movealong);

    self = this;

    setTimeout("end",self.totalFrames/24 * 1000);

    this.stop();

    function movealong() {

    var now = createjs.Ticker.getTime();

    var f = Math.floor((now - starttime)/1000*24);

    self.gotoAndStop(Math.min(self.totalFrames-1,f));

    }

    function end(){

        self.gotoAndStop(self.totalFrames-1);

        self.removeEventListener('tick',movealong);

    }

    2 replies

    Colin Holgate
    Colin HolgateCorrect answer
    Inspiring
    March 31, 2018

    I wrote the code you're quoting, and kglad gave one way to solve the issue. He got one thing wrong in his solution:

    var f = Math.floor((now - starttime)/1000*24);

    self.gotoAndStop(f);

    if(f>=self.totalFrames-1){

        self.removeEventListener('tick',movealong);

    }

    That could create a value for f that is greater than self.totalFrames, and might lead to other issues. This would be safer:

    var f = Math.floor((now - starttime)/1000*24);

    if(f>=self.totalFrames-1){ 

        f = self.totalFrames-1;

       self.gotoAndStop(f);

        self.removeEventListener('tick',movealong);

    }else{

        self.gotoAndStop(f);

    }

    Now, in my original thing that I was making I went on to need to trigger things at certain times, and I used setTimeout() to achieve that. So I changed the ending to use setTimeout() too. Something like this:

    var starttime = createjs.Ticker.getTime();

    createjs.Ticker.setFPS(24);

    this.addEventListener("tick", movealong);

    self = this;

    setTimeout("end",self.totalFrames/24 * 1000);

    this.stop();

    function movealong() {

    var now = createjs.Ticker.getTime();

    var f = Math.floor((now - starttime)/1000*24);

    self.gotoAndStop(Math.min(self.totalFrames-1,f));

    }

    function end(){

        self.gotoAndStop(self.totalFrames-1);

        self.removeEventListener('tick',movealong);

    }

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    March 31, 2018

    use:

    var starttime = createjs.Ticker.getTime();

    createjs.Ticker.setFPS(24);

    this.addEventListener("tick", movealong);

    self = this;

    this.stop();

    function movealong() {

    var now = createjs.Ticker.getTime();

    var f = Math.floor((now - starttime)/1000*24);

    self.gotoAndStop(f);

    if(f>=self.totalFrames-1){

    self.removeEventListener('tick',movealong);

    }

    }

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices