Skip to main content
A
arsa79174182
Participant
April 19, 2018
Answered

Create Play/Pause button in HTML5 canvas

  • April 19, 2018
  • 1 reply
  • 7101 views

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?

This topic has been closed for replies.
Correct answer ClayUUID

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

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

}

function playPauseBtnClicked() {

    this.paused = !this.paused;

}

1 reply

C
ClayUUID
Legend
April 19, 2018

Play/pause what?

A
arsa79174182Author
Participant
April 19, 2018

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

}

C
ClayUUIDCorrect answer
Legend
April 20, 2018

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

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

}

function playPauseBtnClicked() {

    this.paused = !this.paused;

}

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices