HTML5 Play/Pause Toggle

Community Beginner ,
Jun 06, 2021 Jun 06, 2021

Copy link to clipboard

Copied

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/

TOPICS
How to

Views

483

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 , Jun 07, 2021 Jun 07, 2021
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.ani...

Likes

Translate

Translate
Adobe Community Professional ,
Jun 06, 2021 Jun 06, 2021

Copy link to clipboard

Copied

in animate click window>code snippets.

 

you can also use the createjs library, CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5

you can also use plain javascript

and you can use any other js library by including it (easiest done in the actions panel>global>include).

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 ,
Jun 06, 2021 Jun 06, 2021

Copy link to clipboard

Copied

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.

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 ,
Jun 06, 2021 Jun 06, 2021

Copy link to clipboard

Copied

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!

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
Explorer ,
Jun 07, 2021 Jun 07, 2021

Copy link to clipboard

Copied

I'm following this thread as it's very much in line with what I want to learn. 

I tried using the code wizard but with my lack of expertise, it was all guesswork and nothing worked like I wanted it to. 

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 ,
Jun 07, 2021 Jun 07, 2021

Copy link to clipboard

Copied

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

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 ,
Jun 07, 2021 Jun 07, 2021

Copy link to clipboard

Copied

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

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 ,
Jun 07, 2021 Jun 07, 2021

Copy link to clipboard

Copied

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.

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 ,
Jun 08, 2021 Jun 08, 2021

Copy link to clipboard

Copied

LATEST

Hey, Mike! Thanks a lot for you kind and detailed feedbadk! I really appreciate it.

 

I'll try to clarify some points.

 

The addEventListener is JavaScript's native method for adding events. The on method belongs to CreateJS and is a "shortcut method for using addEventListener that makes it easier to specify an execution scope, have a listener only run once, associate arbitrary data with the listener, and remove the listener". I like to use the on method because it is shorter and it has some helpful features. But both methods work.

 

It's a convention in the JavaScript world - and also in another languages - to use the letter e or the word event to name the event object. But you can of course use whatever valid name you like.

 

By definition, the "currentTarget event property returns the element whose event listeners triggered the event". It means that if you added a click event to a Movie Clip instance called menu, for example, the currentTarget property refers to the Movie Clip instance itself. Meanwhile, the "target event property returns the element that triggered the event". So, if in the same Movie Clip you have some buttons inside of it, the target property will return the buttons that actually received the click and not the Movie Clip that contains them.

 

I usually use the word root to name a global variable that refers to the main timeline. A global variable called exportRoot is created in the publishing process that also represents the main timeline. But I usually don't like to use it because I think it's kinda big and weird.

 

One of the reasons I created the root variable in the example was to not use the bind method. I think the usage of bind can become confusing sometimes. In my opinion it's safer and clearer to just store the context in a variable and refer to it instead of finding out what the this keyword refers to all the time.

 

And, yeah, attaching FLA in this forum is problematic. I suggest to you to upload your files to the Creative Cloud, Dropbox, Google Drive, WeTransfer or some other file sharing service and post the link here.

 

Yeah, using a Movie Clip as a container for this case makes things easier and creates lots of possibilities. I could've used just one button but the play icon and the pause icon would not have their own visual states. Or I would probably need more code, making things harder for beginners.

 

Regards,

JC

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