ActionScript to HTML5 confusion.

Explorer ,
Jun 07, 2021 Jun 07, 2021

Copy link to clipboard

Copied

Hi all.  First post.  (Many more to come)


I am an electrical teacher at a technical college.  Many years ago, 2009 to be precise, I made some interactive animations using Flash to show how AC sinewaves were made and how 3phase motors worked, amongst other things.  As you could imagine, the software has changed in 12 years.

Now that Flash no longer works, my animations also no longer work, so I've decided to try to learn Animate and rebuild my animations and create some new ones.


There are a couple of things that I could do in ActionsScript 2 that I can't seem to get my head around in HTML5.


In a nutshell, as an example, one of my animations had 4 buttons and a 'stop' script on the first frame.

  • Pressing a Green button went to frame 2 and played. The animation would loop until I hit one of the following buttons
  • pressing a red button stopped the animation wherever the playhead was at the time
  • I have a yellow button that advances the play head one frame at a time in the forward direction and
  • A blue button that made the playhead move one frame at a time in the backward direction.

 
My first questions are as follows.  (I've got a hundred questions, but I'll start with these 3.)
1) before, with ActionScript when the play head got to the end, I had an action script to go back to frame 2 and play (loop).  The only things in 'Code Snippets' is to click something to go to a certain frame and play.  I want it to loop automatically, so there's nothing to 'click'.  How can I loop the animation until I interact with it?  
2) I also can't work out how to stop the playhead wherever it happens to be once I hit the 'stop' (red) button.  I've currently got it set as a sort of 'reset' button, so it just goes to frame 0 and stops.

3) How do I make it go forward (or reverse) one frame at a time using the yellow (or blue) button?

 

Any help would be SOOO much appreciated.

ActionScript 2 seemed way easier for this 61 year old brain.

Thanks in advance

Views

682

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. Good ActionScript days... I also started in the AS2 era. Of course many things have changed, but you will still find many similarities. Many things we could do in ActionScript we can't do in the HTML5 Canvas document - or at least we can't do so easily - due to constraints in the HTML standard itself and in browsers. Due to the nature of JavaScript, a fundamental change is the use of the this keyword. And because the way CreateJS works, the initial frame index is 0 and not 1. For you...

Likes

Translate

Translate
Adobe Community Professional ,
Jun 07, 2021 Jun 07, 2021

Copy link to clipboard

Copied

Hi.

 

Good ActionScript days... I also started in the AS2 era.

 

Of course many things have changed, but you will still find many similarities. Many things we could do in ActionScript we can't do in the HTML5 Canvas document - or at least we can't do so easily - due to constraints in the HTML standard itself and in browsers.

 

Due to the nature of JavaScript, a fundamental change is the use of the this keyword. And because the way CreateJS works, the initial frame index is 0 and not 1.

 

For you case, your code could look like this:

 

var root = this;

root.greenButton.addEventListener("click", function(e)
{
	root.anim.gotoAndPlay(1);
});

root.redButton.addEventListener("click", function(e)
{
	root.anim.stop();
});

root.yellowButton.addEventListener("click", function(e)
{
	root.anim.gotoAndStop(root.anim.currentFrame + 1);
});

root.blueButton.addEventListener("click", function(e)
{
	root.anim.gotoAndStop(root.anim.currentFrame - 1);
});

 

 

And you would add this instruction your animation to create the loop:

 

this.gotoAndPlay(1); // in HTML5 documents the second frame has a index of 1

 

 

I hope it answers some of your doubts.

 

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

Copy link to clipboard

Copied

Thank you for taking the time to write that. I'll have to investigate that code tomorrow as I'm about to go to bed. 

I must say, I have no clue how the code you wrote works. I'll be just copy/pasting to see if it works, then I'll hopefully start to understand. 

I found AS2 very simple to use, but HTML5 feels like it is out of my reach. 

What is the best way to learn HTML coding?  Most of the YouTube videos are a few years old and still use ActionScript. 

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

Great!

 

I believe you will learn quickly.

 

Please see this comment for more references to learn HTML5 development in Adobe Animate:
https://community.adobe.com/t5/animate/play-and-stop-sound-in-html5-canvas/m-p/11613235#M337732

 

The reference that @ClayUUID  posted is an excellent resource. I'll keep note of it.
https://helpx.adobe.com/animate/kb/as-to-html5.html

 

Please let us know if you need help.

 

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

Copy link to clipboard

Copied

This is so frustrating.
I just can't get your code to work.
What's annoying is seeing that what I want to do used to be just a click away.


Screenshot 2021-06-08 110025.jpg

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

OK, I'm quite a bit 'less able' than you thought JC.
I copy/pasted your code into frame 0 but it didn't work.  I'm missing a lot of the fundamentals so I don't even know what to ask.

This is what my code looks like in frame 0;

/* Stop at This Frame
The  timeline will stop/pause at the frame where you insert this code.
Can also be used to stop/pause the timeline of movieclips.
*/

this.stop();

var root = this;

root.greenbutton.addEventListener("click", function(e)
{
	root.anim.gotoAndPlay(1);
});

root.redbutton.addEventListener("click", function(e)
{
	root.anim.stop();
});

root.yellowbutton.addEventListener("click", function(e)
{
	root.anim.gotoAndStop(root.anim.currentFrame + 1);
});

root.blueButton.addEventListener("click", function(e)
{
	root.anim.gotoAndStop(root.anim.currentFrame - 1);
});

  I know I must be missing something basic.


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

The good news is... the loop script works...

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

Did you manage to advance/understand? Still need some help?

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

Copy link to clipboard

Copied

Not really.  I couldn't get your script to work.  I wasn't sure where to paste it to be honest.  I tried pasting it in frame 0 and it wouldn't work.  

However, I DID find a script in a 4 year old thread ( Solved: Adobe Animate Code Snippets - Adobe Support Community - 8937287 ) which worked when I replaced the word 'clip' with 'redbutton' (or green, yellow, etc)

It looks quite different to the script you suggested.  I'll post it below.  What would probably help me to understand better is finding out why the 2 scripts which are meant to do the same thing are so different and only one works?  I know yours SHOULD work, but I don't know what I did wrong?

 

I really appreciate your help.

 

/* Stop at This Frame
The  timeline will stop/pause at the frame where you insert this code.
Can also be used to stop/pause the timeline of movieclips.
*/

this.stop();


//1. on click go to next frame

this.yellowbutton.addEventListener("click", fl_ClickToGoToAndStopAtNextFrame.bind(this));

function fl_ClickToGoToAndStopAtNextFrame() {

  this.gotoAndStop(this.currentFrame+1);

}

//2. on click go to previous frame

this.bluebutton.addEventListener("click", fl_ClickToGoToAndStopAtPreviousFrame.bind(this));

function fl_ClickToGoToAndStopAtPreviousFrame() {

  this.gotoAndStop(this.currentFrame-1);

}

//3. on click play

this.greenbutton.addEventListener("click", fl_ClickToPlay.bind(this));

function fl_ClickToPlay() {

  this.play();

}

//4. on click stop

this.redbutton.addEventListener("click", fl_ClickToStop.bind(this));

function fl_ClickToStop() {

  this.stop();

}




 

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

And if you want to learn more about HTML5 development in Animate, please see this comment:

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

 

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

Copy link to clipboard

Copied

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

Thanks Clay.
That looks like it will come in very handy.

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

(double post)

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

Copy link to clipboard

Copied

When I had to update an old interactive heartbeat animation from as2 to html5 my problem in the new javascript actions for the buttons was finding a replacement stepforward/backward button action that worked consistently. When the continually looping animation was reset back to the start by pressing the reset button, the stepforward/back then moved two frames instead of one, then four frames etc. Apparently the eventlistener needed to be removed as the frame count got doubled.

I'm a creative not a coder so I searched on stackoverflow for solutions, I hope this code helps you in your project. 

My understanding of 'this' is it's the default word that refers to the stage or root, and can't be used to refer to actions for the variable 'h' presumably because it doesn't exist on the stage somewhere, so another new variable called '_this' is created simply to refer to the temporary variable h. But because it needs to do much the same thing as 'this', ie identify it, the new variable is given the equivalent functionality: var _this = this; but note that order is important, it won't work the other way round (this = _this).


//step fwd/back

var _this = this;

if (!this.stepforward_btn.hasEventListener("click")) {
this.stepforward_btn.addEventListener("click", advance.bind(this));
}
function advance(){
var h = this.currentFrame;
_this.gotoAndStop(h+1);
this.removeEventListener("click", advance.bind(this));
}

if (!this.stepback_btn.hasEventListener("click")) {
this.stepback_btn.addEventListener("click", rewind.bind(this));
}
function rewind(){
var h = this.currentFrame;
_this.gotoAndStop(h-1);
this.removeEventListener("click", rewind.bind(this));
}

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

Copy link to clipboard

Copied

Yes.  I noticed this today. The step forward and back were jumping many frames.

I'd like you use your code, and I'm thankful for you pointing out this problem, but I'm not sure what to do with your code.  Do I just add it to my existing code or replace something within the code?

I don't know what 'this' does or 'var' does or what 'stack overflow' or what ANYTHING means in JavaScript.  I've just been copy/pasting code suggestions until I find something that works.  ActionScript was super easy.  JavaScript is like a new language that doesn't even use a recognisable alphabet.

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

Copy link to clipboard

Copied

"ActionScript was super easy. JavaScript is like a new language that doesn't even use a recognisable alphabet."

 

AS2 is 99% identical to JavaScript. AS3 is like... 95% identical to JavaScript. They all have the same syntax and keywords. Both "var" and "this" exist in ActionScript and do the same things as they do in JavaScript.

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

Copy link to clipboard

Copied

Difference being, I've never needed to learn the scripting side of it.  The preconfigured actions that I needed were available with 2 clicks of a mouse.  I've now got the actions that I required, and they're working in HTML5, and I still don't know the difference between 'this' and 'var' or any of the syntax within Javascript.

So from that perspective, even if I had to learn AS2 coding, it's still a whole new language.  FWIW, I've tried to study the basics of JavaScript over the last few weeks and I still don't know where to start.  Luckily, my needs are quite basic and I was able to tweak the scripts that people offered.  By 'tweak', I mean, I just replaceced some words in the scripts to reflect m actual button names.

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

Copy link to clipboard

Copied

Just add the code into the actions panel like you do for your other button code. Change the names to the ones you are using for your buttons, or just use the names in the script, so name your forward and back buttons 'stepforward_btn' and 'stepback_btn'.

But use a different layer for code like this that needs to work across the whole animation rather than just needing to work on particular keyframes (like ordinary button code). So along with the usual actions layer for all the buttons that are assigned to keyframes, I use an additional actions layer just for this kind of code, and it goes on the first frame so it can control the fwd/back buttons on any frame the action is needed. 

 

Copy/pasting suggestions until something works - thats exactly what I do. 
For debugging errors use Chrome, and right click on the page your animation is (not) running, select Inspect then look under the Console tab for clues to what's wrong with your animation. Most of the errors I get are where a movieclip isn't identified correctly.  

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

Copy link to clipboard

Copied

LATEST

Apart from making a second 'actions' layer, what you've suggested is pretty much exactly what I did. 
The 'root' example above didn't work for me and I didn't know where to start to troubleshoot it.
The example I pasted above (that I found to work) just required me to rename the button instances and it all came good.  All pasted into the one Actions line on frame 0 and so far so good.

I just need to address the issue that Quentin highlighted above, re; stepping fwd and rev in ever increasing step numbers.

 

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

Copy link to clipboard

Copied

"My understanding of 'this' is it's the default word that refers to the stage or root"

 

Your understanding is wrong. "this" is a variable (not a "word") that refences the current object. If you put some code on a movieclip, "this" will reference that movieclip, e.g. "this.stop()".

 

The reason the value of "this" is so often copied to another variable is because inside event handler functions, "this" points to the global window object instead of the object that received the event. So you make a copy of the current value of "this", which won't change, and reference that value instead.

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