Highlighted

Create Play/Pause button in HTML5 canvas

Community Beginner ,
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?

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

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

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

}

function playPauseBtnClicked() {

    this.paused = !this.paused;

}

Views

2.9K

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

Create Play/Pause button in HTML5 canvas

Community Beginner ,
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?

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

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

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

}

function playPauseBtnClicked() {

    this.paused = !this.paused;

}

Views

2.9K

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
Apr 19, 2018 0
Adobe Community Professional ,
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
Reply
Loading...
Apr 19, 2018 0
Community Beginner ,
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
Reply
Loading...
Apr 19, 2018 1
Adobe Community Professional ,
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
Reply
Loading...
Apr 20, 2018 1
Community Beginner ,
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
Reply
Loading...
Apr 20, 2018 0
New Here ,
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!

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
Reply
Loading...
Jan 29, 2020 0