• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

New Here ,
Nov 07, 2016 Nov 07, 2016

Copy link to clipboard

Copied

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.

Views

956

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
community guidelines

correct answers 1 Correct answer

Advocate , Nov 08, 2016 Nov 08, 2016

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.

Votes

Translate

Translate
Adobe Employee ,
Nov 08, 2016 Nov 08, 2016

Copy link to clipboard

Copied

Votes

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
community guidelines
LEGEND ,
Nov 08, 2016 Nov 08, 2016

Copy link to clipboard

Copied

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

Votes

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
community guidelines
New Here ,
Nov 08, 2016 Nov 08, 2016

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
LEGEND ,
Nov 08, 2016 Nov 08, 2016

Copy link to clipboard

Copied

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

Votes

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
community guidelines
New Here ,
Nov 08, 2016 Nov 08, 2016

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
Advocate ,
Nov 08, 2016 Nov 08, 2016

Copy link to clipboard

Copied

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.

Votes

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
community guidelines
New Here ,
Nov 09, 2016 Nov 09, 2016

Copy link to clipboard

Copied

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?

Votes

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
community guidelines
Advocate ,
Nov 09, 2016 Nov 09, 2016

Copy link to clipboard

Copied

LATEST

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

Votes

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
community guidelines