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.
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.
Copy link to clipboard
Copied
Copy link to clipboard
Copied
The ActionScript 3 example is sufficiently different that it might confuse an HTML5 coder.
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.
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.
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.
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.
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?
Copy link to clipboard
Copied
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