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

3.8K

Likes

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

Adobe Community Professional , Apr 20, 2018 Apr 20, 2018
if (!this.playPauseBtn.hasEventListener("click")) {    this.playPauseBtn.addEventListener("click", playPauseBtnClicked.bind(this));}function playPauseBtnClicked() {    this.paused = !this.paused;}

Likes

Translate

Translate
Adobe Community Professional ,
Apr 19, 2018 Apr 19, 2018

Copy link to clipboard

Copied

Play/pause what?

Likes

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

}

Likes

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
Adobe Community Professional ,
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;

}

Likes

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)

Likes

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

LATEST

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!

Likes

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