HTML5 Canvas, Can't play or stop movieclip

[RandomlyFish]

This used to work before, now it doesn't.

this.mc.stop(); // Stop movieclip on the stage with the instance name "mc"

I even tried creating a new HTML5 Canvas document, a new movieclip with 3 distinct frames on the stage and even using the code snippet (HTML5 Canvas > Actions > Stop a Movie Clip), which generated this code for me:

/* Stop a Movie Clip
Stops the specified movie clip on stage.
Instructions:
1. Use this code for movie clips that are currently playing.
*/
this.mc.stop();

When I open the console in Chrome, I don't see any errors. I even rebooted my PC to see if that had anything to do with it, but still nothing.

[Colin Holgate]

It's common for a script like that to fail, though I'm not sure why you wouldn't get an error. See if this works:

var self = this;

setTimeout(stopnow,100);

function stopnow(){

self.mc.stop();

}

The idea is that at the time stopnow is called mc has been around for a while (well, at least a 1/10th of a second), so self.mc does exist. If you just do:

this.mc.stop();

that would run before mc yet exists. The easy work around is to put the script on the second frame that mc exists.

[RandomlyFish]

Thanks for the reply, that worked!

I changed it a little bit so that it runs instantly, and this still works for one symbol at least:

var This = this;

setTimeout(frame, 0);@

function frame () {

     This.mc.gotoAndStop(1);

}

Now that you mentioned that mc does not exist before the code runs, the original line works fine if I place it on the second frame, and let the first frame play.

Surely there have to be an event that triggers when everything on the frame have loaded?

[Colin Holgate · Accepted solution]

I'm not sure, but probably there is. Meanwhile, if the movieclip is on the main timeline you can skip using a variable, and do this:

setTimeout(s,0);

function s(){

  exportRoot.mc.stop();

}

I tested it, and the movieclip is still on its first frame. The answer you marked as correct leaves the movieclip on its second frame.

[RandomlyFish]

Good call, I didn't think about that it wouldn't stop after reaching frame 2.

[Colin Holgate]

Testing all this showed up an interesting thing, and it explains why there was no error...

It seems that you can now safely say:

this.mc.x = 123;

and the movieclip will set its x to that value, even on the first frame that it exists. So, what used to be the case seems to be improved, you can do some assuming about the movieclip existing already.

In the case of stopping the movieclip it won't work, and I think that's because although the movieclip does exist, enough to have its x set, it hasn't yet initialized itself. One of the things it will do is set itself playing. That is the thing that seems to happen after the this.mc.stop() attempt.

So, this.mc.stop() is working, but is thwarted by the movieclip setting itself playing!

[ClayUUID]

I can't test this right now, but setting this.mc.paused = true; might work to stop the initial play.

EaselJS v0.8.2 API Documentation : MovieClip

[Colin Holgate]

That was a good idea, but unfortunately doesn't work. The movieclip setting itself playing overrides the paused setting. This works just as well as the stop version:

setTimeout(s,0);

function s(){

  exportRoot.mc.paused = true;

}

[ClayUUID]

I'm surprised there's no flag to disable autoplay. Seems like the sort of thing the CreateJS guys would have thought of.

[ClayUUID]

If you're going to do that, this form is preferable:

createjs.Ticker.on("tick", stopNow, this, true);

function stopNow() {

     this.mc.stop();

}

By hooking into the global ticker you're explicitly waiting for one more frame to be processed, allowing the clip reference to become valid, rather than waiting an arbitrary span of time that hopefully is enough for the next frame to be processed.

Or this guy could just move his problematic function call to the next frame.

[RandomlyFish]

Thank you for the reply!

That's a good solution since I don't have to declare a variable for this.

[Colin Holgate]

My code was only to test the theory, it isn't a solution to the problem. Your way or my way could lead to the movieclip having advanced a frame already. Putting this.stop(); into the movieclip itself would be a safe solution.

In any case, are you saying that "tick" is at the frame rate, and not say at 60 per second? If you had a 12 fps timeline, would the next tick be in 1/60th or 1/12th of a second?

Also, should your code be this:

createjs.Ticker.on("tick", stopNow, this, true);

function stopNow() {

     this.mc.stop();

     createjs.Ticker.off("tick", stopNow, this, true);

}

so that the movieclip isn't being constantly stopped, even if you go to a frame where it doesn't exist?

[ClayUUID]

https://forums.adobe.com/people/Colin+Holgate  wrote

In any case, are you saying that "tick" is at the frame rate, and not say at 60 per second? If you had a 12 fps timeline, would the next tick be in 1/60th or 1/12th of a second?

Also, should your code be this:

so that the movieclip isn't being constantly stopped, even if you go to a frame where it doesn't exist?

In CreateJS the Ticker controls the global frame rate, and passing "true" as the fourth argument to on() tells it to only execute once.

[Colin Holgate]

Cool, thanks for that explanation, it could be useful.