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

Create Play/Pause button in HTML5 canvas

Community Beginner ,
Apr 19, 2018 Apr 19, 2018

Copy link to clipboard

Copied

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?

Views

6.1K

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

LEGEND , Apr 20, 2018 Apr 20, 2018

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

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

}

function playPauseBtnClicked() {

    this.paused = !this.paused;

}

Votes

Translate

Translate
LEGEND ,
Apr 19, 2018 Apr 19, 2018

Copy link to clipboard

Copied

Play/pause what?

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
Community Beginner ,
Apr 19, 2018 Apr 19, 2018

Copy link to clipboard

Copied

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

}

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 ,
Apr 20, 2018 Apr 20, 2018

Copy link to clipboard

Copied

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

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

}

function playPauseBtnClicked() {

    this.paused = !this.paused;

}

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
Community Beginner ,
Apr 20, 2018 Apr 20, 2018

Copy link to clipboard

Copied

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)

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 ,
Jan 29, 2020 Jan 29, 2020

Copy link to clipboard

Copied

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!

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
Community Beginner ,
Jan 16, 2023 Jan 16, 2023

Copy link to clipboard

Copied

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;
}

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
Community Beginner ,
Jan 17, 2023 Jan 17, 2023

Copy link to clipboard

Copied

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

 

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
Community Expert ,
Jan 17, 2023 Jan 17, 2023

Copy link to clipboard

Copied

LATEST

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;
}

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