How to stop a looped movieClip with a button click in HTML5 canvas document?

[Squire_Amanda]

I'm a beginner with AnimateCC and coding, and am struggling with finding the right javascript coding, or whatever it is going to take, to make a looped animation/ currently playing movieClip stop upon a button click in my HTML5 canvas document. I've tried variations of this.stop(); including when you call the specific movieClip name in the code, and cannot get anything to work.

It'd be even better if upon a button click the current movieClip could stop at a specific timeframe within that clip.

Is this possible? Any help would be much appreciated!

- Amanda

Also, if you need to see coding to see what I'm doing wrong or where to help, let me know and I can send a screenshot.

[Preran]

Does this help?

Adobe ActionScript 3.0 * Controlling movie clip playback

Thanks,

Preran

[Colin Holgate]

The ActionScript 3 example is sufficiently different that it might confuse an HTML5 coder.

[Squire_Amanda]

I have found that in my searching and like Colin said, it just confuses me because I'm not sure how to convert ActionScript 3 to HTML5.

[ClayUUID]

The Code Snippets panel includes HTML5 examples for both mouse click events, and stopping a movie clip. Just combine them.

[Squire_Amanda]

Would I place this code only on the main timeline or do I have to place it in nested movieClips as well? I'm struggling to get it to work.

[just.emma · Accepted solution]

Give your button and your animation movie clip instance names.  In this example, I'll use "stopper" for the button and "anim" for the animation movie clip.  Then, add these actions to the main timeline:

this.stopper.addEventListener("click", stopAnim.bind(this));

function stopAnim()

{

  this.anim.stop();

}

You can name your instances and functions whatever you want, but it's best to use something that's intuitive to avoid confusion in the future.

[Squire_Amanda]

Thank you for giving me specific instructions, that helps me a lot. However, this still does not stop the looped animation. I've tried virtually everything I can think of.

If I just covered up the animation with a solid object (same color as background), that would appear on a click, how is this accomplished?

[just.emma]

There's no reason that the code above shouldn't work; I think you must be missing a step when implementing it.

Here is a functional example that I just put together: Dropbox - Stop Loop Button