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.
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
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
...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
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.
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
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.
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.
Copy link to clipboard
Copied
The good news is... the loop script works...
Copy link to clipboard
Copied
Did you manage to advance/understand? Still need some help?
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();
}
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
Copy link to clipboard
Copied
Copy link to clipboard
Copied
Thanks Clay.
That looks like it will come in very handy.
Copy link to clipboard
Copied
(double post)
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));
}
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.
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.
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.
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.
Copy link to clipboard
Copied
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.
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.