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

Forum|Forum|8 years ago
August 7, 2017
3 replies
4160 views

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!

This topic has been closed for replies.

Correct answer ClayUUID

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"]();

}

F

frank_7007

Participant

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.

R

RandomlyFish

Inspiring

Here's another clever solution that let's you reuse the function for different movieclips. The EventTogglePlaying function returns another function, which get triggered by the click event.

this.button_1.addEventListener("click", EventTogglePlaying(this.mcTurn));

function EventTogglePlaying (mc) {

return function () {

mc.paused? mc.play() : mc.stop();

}