html5 canvas script conflict

[horuscat]

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!

[kglad]

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

}

}

[Colin Holgate · Accepted solution]

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

}