Skip to main content
M
Muzzlitebeer
Participating Frequently
June 7, 2021
Answered

ActionScript to HTML5 confusion.

  • June 7, 2021
  • 5 replies
  • 2724 views

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

    This topic has been closed for replies.
    Correct answer JoãoCésar17023019

    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

     

    5 replies

    Q
    Quentin Roper
    Participant
    June 9, 2021

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

      M
      MuzzlitebeerAuthor
      Participating Frequently
      June 9, 2021

      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.

      C
      ClayUUID
      Legend
      June 9, 2021

      "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.

        C
        ClayUUID
        Legend
        June 7, 2021

        (double post)

        C
        ClayUUID
        Legend
        June 7, 2021

        https://helpx.adobe.com/animate/kb/as-to-html5.html

          M
          MuzzlitebeerAuthor
          Participating Frequently
          June 7, 2021

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

          JoãoCésar17023019
          Community Expert
          JoãoCésar17023019Community Expert
          Community Expert
          June 7, 2021

          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

          JoãoCésar17023019
          Community Expert
          JoãoCésar17023019Community ExpertCorrect answer
          Community Expert
          June 7, 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 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

           

            M
            MuzzlitebeerAuthor
            Participating Frequently
            June 7, 2021

            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. 

              JoãoCésar17023019
              Community Expert
              JoãoCésar17023019Community Expert
              Community Expert
              June 7, 2021

              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

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