How do I play and stop a movie clip with a single button?

Question

Using HTML5 canvas.I have a movie clip (mcTurn) on my timeline that plays in a loop and I have a button (button_1) that I want to use to control the movie clip with a play/stop function.So far I got the movie clip to stop by using the following script:this.button_1.addEventListener("click", stopAnim.bind(this));function stopAnim(){  this.mcTurn.stop();}But how do I add a play function to this code? I want the movie to resume playing again when clicked.Back in the day I used the on(press) and on(release) functions for this, so I'm a little behind... I am not well-versed with action script 3 nor with HTML5 canvas functions.Thank you very much!

ClayUUID · Accepted Answer

Of course that doesn't work, it's AS3 code. Try this instead:

this.button_1.addEventListener("click", stopStartAnim.bind(this));

function stopStartAnim() {

var clip = this.mcTurn;

if (clip.paused) {

clip.play();

}

else {

clip.stop();

}

Or this pointlessly clever version:

this.button_1.addEventListener("click", stopStartAnim.bind(this));

function stopStartAnim() {

var clip = this.mcTurn;

clip[clip.paused ? "play" : "stop"]();

}

frank_7007 · Answer

To add the play function, you can toggle between play and stop like this:

```javascript
this.button_1.addEventListener("click", toggleAnim.bind(this));

function toggleAnim() {
if (this.mcTurn.isPlaying) {
this.mcTurn.stop();
this.mcTurn.isPlaying = false;
} else {
this.mcTurn.play();
this.mcTurn.isPlaying = true;
}
}
```

This will allow your button to both play and stop the movie clip.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.