Create Play/Pause button in HTML5 canvas

[arsa79174182]

Hi all!

I`m newbie in  Adobe Animate CC.

How to create one button for Play/Pause in HTML5 canvas ?

I did not find snippet for create one button for Play/Pause. There is to create only pause button and only play buttons. On this forum i find this discussion Adding a play/pause button into an animation for Adobe Edge Animate. I try to use code from answer - but he didnt work:

In PauseButton's actions, select "click", and enter:

sym.stop();

sym.$("PlayButton").show();

sym.$("PauseButton").hide();

In PlayButton's actions, select "click" and enter:

sym.play();

sym.$("PlayButton").hide();

sym.$("PauseButton").show();

How can fix the problem?

[ClayUUID]

Play/pause what?

[arsa79174182]

for  timeline navigation. Now use this code from snippet HTML5 canvas Timeline Navigation:

this.stop();

this.PlayButton.addEventListener("click", fl_ClickToGoToAndPlayFromFrame.bind(this));

function fl_ClickToGoToAndPlayFromFrame()

{

    this.gotoAndPlay(0);

}

this.PauseButton.addEventListener("click", fl_ClickToGoToAndStopAtFrame.bind(this));

function fl_ClickToGoToAndStopAtFrame()

{

    this.gotoAndStop();

}

[ClayUUID · Accepted solution]

if (!this.playPauseBtn.hasEventListener("click")) {

    this.playPauseBtn.addEventListener("click", playPauseBtnClicked.bind(this));

}

function playPauseBtnClicked() {

    this.paused = !this.paused;

}

[arsa79174182]

What should i do with this code?

Do i must create one button and insert this code this for her?

Yes, i know, i`m noob)

[chrisc83571630]

Are you attaching this code to a movie clip or button? In order to create a play/pause button you would need 2 graphics.  One for play, one for pause. It looks like only one thing is referred to (playPauseBtn). Is something else switching out the graphic when the button is clicked on and this script is just for functionality? Or does the script do both? 

I would love to find a step-by-step process to create a play/pause button in Animate. Thanks!

[Sacha De Faria]

hi ClayUUID i try it but it's not working for me I want to be able to stop and start my sequence with a button. To do this I created a button symbol in my library, then I imported it into my symbol where there is my sequence (a path from a point A to a point B over a specified time in the timeline). So that it appears only when my sequence is launched I put an empty keyframe in frame 1 and in the last frame as in my sequence, which makes the object appears only during the playback of the sequence and then disappears.
I spent the evening yesterday trying to find how to do it with tutorials on the internet but I got a lot of error messages.
This morning it works perfectly that is to say that the play/pause button appears well when I launch my sequence by clicking on the button of the scene where it is and it disappears well at the end of the playback of my sequence, I can click on it but the code does not work and the sequence does not stop, on the other hand there is no more error the code used is a code found on a tutorial, if someone knows how to adapt it so that it works I'm a taker
code : if (!thisplayPauseBtn.hasEventListener("click")) {
this.playPauseBtn.addEventListener("click",maFct21.bind(this));
}
function maFct21 () {
this.paused=!this.paused;
}

[Sacha De Faria]

so, after à coworker come cheack my problem, i was simply foget a dot and now it's working 🙂

[kglad]

for others, there needs to be a dot between this and playPauseBtn:

 if (!thisplayPauseBtn.hasEventListener("click")) {
this.playPauseBtn.addEventListener("click",maFct21.bind(this));
}
function maFct21 () {
this.paused=!this.paused;
}