Participant

Answered

HTML5 Play/Pause Toggle

Forum|Forum|4 years ago
June 6, 2021
3 replies
2891 views

How is it that there still seems to be no "go to" place for basic Adobe Animate HTML5 button codes? This is outrageous! I need to create a basic button that toggles between play and pause, and the only thing that comes up in a google search is ONE response, which doesn't work.

Can anyone direct me to an online source for this information, or simply post a solution?

Moved from Using the Community (which is about the forums) to the correct forum... Mod
To ask in the forum for your program please start at https://community.adobe.com/

How to

This topic has been closed for replies.

Correct answer JoãoCésar17023019

Hi.

Sorry for the lack of info and examples.

Here is a sample:

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/toggle_animation

Preview:

https://bit.ly/3ziMYDM

The main code is this:

var root = this;

document.body.style.backgroundColor = lib.properties.color; // this line is not essential for the toggle interactivity

root.playPause.on("click", function(e)
{
	e.currentTarget.play();
	
	if (e.currentTarget.currentFrame === 0)
		root.anim.stop();
	else
		root.anim.play();
});

And in this comment you're going to find some references to learn more about HTML5 development in Animate.

https://community.adobe.com/t5/animate/play-and-stop-sound-in-html5-canvas/m-p/11613235#M337732

I hope this helps.

Regards,

JC

JoãoCésar17023019

Correct answer

Community Expert

Hi.

Sorry for the lack of info and examples.

Here is a sample:

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/toggle_animation

Preview:

https://bit.ly/3ziMYDM

The main code is this:

var root = this;

document.body.style.backgroundColor = lib.properties.color; // this line is not essential for the toggle interactivity

root.playPause.on("click", function(e)
{
	e.currentTarget.play();
	
	if (e.currentTarget.currentFrame === 0)
		root.anim.stop();
	else
		root.anim.play();
});

And in this comment you're going to find some references to learn more about HTML5 development in Animate.

https://community.adobe.com/t5/animate/play-and-stop-sound-in-html5-canvas/m-p/11613235#M337732

I hope this helps.

Regards,

JC

J

jensencmiAuthor

Participant

JC--you da man!

Your code works like a charm! I tinkered with various elements in your code to understand which words are significant and which can be substituted. For anyone out there frustrated like me, it may help to see my version of JC's code:

var root = this;

root.bub.addEventListener("click",

function (happy)

{

happy.currentTarget.play();

if (happy.currentTarget.currentFrame === 0)

root.stop();

else

root.play();

});

I was always told I needed to use "addEventListener" in the space where JC used "on". But both words work. I don't understand, but I will happily accept not understanding, as long as the code works.

I also replaced JC's "e" with the word "happy", just in case "e" was nothing more than a function name. And "happy" (and any other nonsense word I put in there) worked, as long as I remembered to also add the same name after the word, "if".

I also tried removing JC's "anim" (which was in the IF/ELSE part of the code, between the words "root" and "play", and "root" and "stop") to see if I could get a basic animation on the main timeline--NOT a MC on the main timeline, but a simple, non-symbol-based animation, to play. And it also worked!!

I suspect that the words, "currentTarget" are HTML5's way of referring to a child, and "root" is referring to the parent, because it broke as soon as I changed those words. But it sure would be nice to understand better how HTML5 code refers to parents and children. For example, I sort of get how JC needed to make the code recognize the parent (var.root=this;), but "currentTarget" doesn't make much sense, other than "hey, it works, so shut up : ) "

And if anyone was taught (like me) that you had to use the words, "bind(this);" that obviously is not true--the moment I added it to JC's code in the spot it is supposed to be, the functionality broke. So again, this is something I guess I'll have to be content with not understanding, since there really seems to be no place to go to get these type of "why" questions answered.

Lastly, thanks, JC, for the bonus code that changes the browser's background color to match the .fla's background color! I deeply appreciate your kindness and your prompt response to my questions.

(I tried attaching my .fla files to this post, but the drag and drop keeps rejecting it, "content type not match extension"...which is not true...but whatever. Sorry.)

Mike

J

jensencmiAuthor

Participant

One other thing, for anyone trying to figure out JC's file: notice how the symbol on JC's main time line is NOT a button symbol, even though it acts like one.

The trick to making a button toggle between play and pause states, is in using a Movie Clip symbol on the main timeline, which contains a 2-framed animation--and each of those 2 frames are BUTTONS!

This is not logical at all to newbies (like my students), and everyone always wants to start with a button symbol on the main timeline. Resist the temptation and follow JC's great example. Only when you realize that there is no way to advance the playhead inside a button, does it make more sense that the root symbol for the button toggle MUST be a Movie Clip.

Colin Holgate

Inspiring

In addition to code snippets, the Actions panel has an "Add using wizard" option. With that you can pick your button, and use the wizard to choose the action you want to have happen.

J

jensencmiAuthor

Participant

Thanks to both of you for taking the time to write back, but I'm looking for a simpler solution: just a page or site that has code that one could just copy and paste. Is that asking too much? I don't understand how Adobe could pull the plug on Flash and AS3, without providing competent support for its replacement: HTML5. I could do anything I wanted in AS3, (not the least of which were Start/Pause Toggle Buttons). Certainly after 3 years since HTML5 was added to Animate, you'd think Adobe would offer user-friendly competent support for users trying to make the change over from AS3.

Colin, if you know the sequence in Add Using Wizard, please advise. I went in there and wasted another hour at least trying to find something that sounded like "play pause toggle", because it didn't offer a specific item called 'play pause toggle'. Thanks!