14 Replies Latest reply on Mar 8, 2017 1:58 PM by johnpgranados

    gotoAndStop() and event listeners issue on HTML5 Canvas project

    johnpgranados

      Here's the project for you to download: buttons.fla - Google Drive.

       

      I'm using Animate CC 2015.2.0.66. Probable issue happens on code line 50 in the main actions layer.

       

      The project

      I have some movieclips with a very simple animation inside. I've added event listeners to them, to control mouseover, mouseout and click events. On click, a popup window appears with some info. I remove the event listeners, so users won't be able to interact with the buttons while the window is above them. An "x" button in the corner closes the window. I put the event listeners back so you can click on another button. Pretty basic.

       

      The issue

      The problem happens when I use gotoAndStop() to "reset" the clicked button's state. Frame number 10 is where the over animation starts inside the movieclip. Since "frame numbers in EaselJS start at 0 instead of 1", I've used  button.gotoAndStop(9), but that will cause all buttons to stop working. That means no over, out or click states. If I use instead button.gotoAndStop(10), the buttons work just fine, but then they¡re one frame ahead in their animation.

       

      Any idea why this happens? Thanks.

        • 1. Re: gotoAndStop() and event listeners issue on HTML5 Canvas project
          kglad Adobe Community Professional & MVP

          with html5/canvas you must explicitly reference the parent:

           

          this.button.gotoAndStop(etc)

          • 2. Re: gotoAndStop() and event listeners issue on HTML5 Canvas project
            johnpgranados Level 1

            Yeah, I actually have a global variable called root, so I can access the objects on the stage. If it makes it easier, here's the main code. There are five buttons on stage, as well as a movieclip called "content":

             

            stage.enableMouseOver();

             

            //VARIABLES

             

            var root = this;

            var number = 1;

             

            //FUNCTIONS

             

            function init (){

              for (var i = 1; i <= 5; i++){

              root["button"+i].number = i;

              root["button"+i].cursor = "pointer";

              }

             

              root.content.close.cursor = "pointer";

              root.content.scaleX = root.content.scaleY = root.content.alpha = 0;

              activateButtons();

            }

             

            function activateButtons (){

              for (var i = 1; i <= 5; i++){

              root["button"+i].addEventListener("mouseover", buttonOver);

              root["button"+i].addEventListener("mouseout", buttonOut);

              root["button"+i].addEventListener("click", buttonClick);

              }

            }

             

            function deactivateButtons (){

              for (var i = 1; i <= 5; i++){

              root["button"+i].removeEventListener("mouseover", buttonOver);

              root["button"+i].removeEventListener("mouseout", buttonOut);

              root["button"+i].removeEventListener("click", buttonClick);

              }

            }

             

            function showContent (n){

              number = n;

              root.content.gotoAndStop(number-1);

             

              root.content.close.addEventListener("click", hideContent);

              createjs.Tween.get(root.content).to({scaleX:1, scaleY:1, alpha:1}, 500, createjs.Ease.quartOut);

              deactivateButtons();

            }

             

            function hideContent (){

              //Change value to 9 and buttons will stop working. Change it to 10 and they'll work.

              //gotoAndPlay will also make the buttons stop working. Why??

              root["button"+number].gotoAndStop(9);

              //

              root.content.close.removeEventListener("click", hideContent);

              createjs.Tween.get(root.content).to({scaleX:0, scaleY:0, alpha:0}, 500, createjs.Ease.quartOut).call(activateButtons);

            }

             

            //EVENTS

             

            function buttonOver (e){

              e.currentTarget.gotoAndPlay("over");

            }

             

            function buttonOut (e){

              e.currentTarget.gotoAndPlay("out");

            }

             

            function buttonClick (e){

              showContent(e.currentTarget.number);

            }

             

            //EXECS

             

            init();

            • 3. Re: gotoAndStop() and event listeners issue on HTML5 Canvas project
              ClayUUID Adobe Community Professional

              Somehow your code seems to be leaning hard against some severe edge case behaviors of CreateJS. I managed to get it to break/work just by inserting some console.log() statements.

               

              So of all things, the fading of the content clip to 0 is what's breaking it. Also, there's a pretty bad issue of over state thrashing when you roll over the faces from the bottom. And the mouse cursor was still changing to a hand when mousing over the faces behind the content clip. And if you move the cursor over a face while the content clip is still fading out it doesn't react until you move away from it then move back.

               

              Well, here's the fixed code:

               

              stage.enableMouseOver();

               

              //VARIABLES

              var root = this;

              var lastClicked = 0;

               

              //FUNCTIONS

              function init() {

                  var btn;

                  for (var i = 1; i <= 5; i++) {

                      btn = root["button" + i];

                      btn.number = i;

                      btn.mouseChildren = false;

                      btn.addEventListener("mouseover", buttonOver);

                      btn.addEventListener("mouseout", buttonOut);

                  }

                  root.content.scaleX = root.content.scaleY = 0.5;

                  root.content.alpha = 0.01;

                  activateButtons();

              }

               

              function activateButtons() {

                  var btn;

                  for (var i = 1; i <= 5; i++) {

                      btn = root["button" + i];

                      btn.cursor = "pointer";

                      btn.addEventListener("click", buttonClick);

                  }

              }

               

              function deactivateButtons() {

                  var btn;

                  for (var i = 1; i <= 5; i++) {

                      btn = root["button" + i];

                      btn.cursor = "auto";

                      btn.removeEventListener("click", buttonClick);

                  }

              }

               

              function showContent(n) {

                  lastClicked = n;

                  root.content.gotoAndStop(n - 1);

                  root.content.close.cursor = "pointer";

                  root.content.close.addEventListener("click", hideContent);

                  createjs.Tween.get(root.content, {override:true}).to({scaleX:1, scaleY:1, alpha:1}, 500, createjs.Ease.quartOut);

                  deactivateButtons();

              }

               

              function hideContent() {

                  //Change value to 9 and buttons will stop working. Change it to 10 and they'll work.

                  //gotoAndPlay will also make the buttons stop working. Why??

                  root["button" + lastClicked].gotoAndStop(1);

                  root.content.close.cursor = "auto";

                  root.content.close.removeEventListener("click", hideContent);

                  activateButtons();

                  createjs.Tween.get(root.content, {override:true}).to({scaleX:0.5, scaleY:0.5, alpha:0.01}, 500, createjs.Ease.quartOut);

              }

               

              //EVENTS

              function buttonOver(e) {

                  e.currentTarget.gotoAndPlay("over");

              }

               

              function buttonOut(e) {

                  e.currentTarget.gotoAndPlay("out");

              }

               

              function buttonClick(e) {

                  showContent(e.currentTarget.number);

              }

               

              //EXECS

              init();

              1 person found this helpful
              • 4. Re: gotoAndStop() and event listeners issue on HTML5 Canvas project
                johnpgranados Level 1

                Thank you, ClayUUID. Yeah, my mouseover states needed some cleanup.

                 

                I'm curious, though: is this issue (not being able to tween to 0) happening because of the way I structured my code? If that's the case, I really would love to know a better way.

                 

                I'd like to share some insights I've had, just to add to the discussion:

                • So yeah, If your code's not working, try not to tween objects to 0, go for 0.01 instead, it's pretty much the same.
                • I agree to change the variable name "number" to "lastClicked", as "number" is a very generic name and not very informative of what the variable is actually for. Besides, I was already assigning a variable "number" to each button, so it could lead to confusion.
                • Creating a "btn" variable to store the current button in the loop is more efficient, it avoids repetition and prevents you from making potential mistakes along the way. It looks less messy, too.
                • Setting mouseChildren to false will prevent objects inside movieclips to react to the mouse, is that right? In this particular case, the text inside the tooltip appearing on mouseover was causing the mouse to loose scope of the button itself and triggering the mouseout state, resulting in a messy animation.
                • Don't forget to change you cursor to "auto" when your button is not active.
                • 5. Re: gotoAndStop() and event listeners issue on HTML5 Canvas project
                  ClayUUID Adobe Community Professional

                  I have no idea why fading all the way to 0 was causing the problem you had. It's probably a subtle bug in CreateJS, but teasing out a bare-bones test case to submit to Adobe looked like it would be a real challenge. Might be worth submitting as-is anyway.

                  • 6. Re: gotoAndStop() and event listeners issue on HTML5 Canvas project
                    kglad Adobe Community Professional & MVP

                    fade to zero makes object unresponsive to the mouse.

                     

                    i didn't read enough to know if that's causing the problem you're seeing.

                    • 7. Re: gotoAndStop() and event listeners issue on HTML5 Canvas project
                      johnpgranados Level 1

                      It is. Fading to 0.01 fixes it.

                      • 8. Re: gotoAndStop() and event listeners issue on HTML5 Canvas project
                        johnpgranados Level 1

                        I'll try to submit a bug report, but Adobe does not make this easy, only accepting plain text and no attachments.

                        • 9. Re: gotoAndStop() and event listeners issue on HTML5 Canvas project
                          Colin Holgate MVP & Adobe Community Professional

                          Sadly this isn't a bug as such. It's exactly how CreateJS works. It's worth raising issues in github, then the CreateJS team themselves will track the problem. I dare say they already have requests to solve that problem:

                           

                          CreateJS · GitHub

                          • 10. Re: gotoAndStop() and event listeners issue on HTML5 Canvas project
                            ClayUUID Adobe Community Professional

                            kglad  wrote

                             

                            fade to zero makes object unresponsive to the mouse.

                            This issue here is fading to zero causing a completely different, fully visible set of movieclips to become unresponsive.

                            • 11. Re: gotoAndStop() and event listeners issue on HTML5 Canvas project
                              johnpgranados Level 1

                              I had another version of this project where I faded the movieclips as well. Basically, it's happening to me every time I fade any object to 0.

                              • 12. Re: gotoAndStop() and event listeners issue on HTML5 Canvas project
                                johnpgranados Level 1

                                Thanks for the suggestion. I've sent a bug report to Adobe and created an issue on the TweenJS Github space.

                                • 13. Re: gotoAndStop() and event listeners issue on HTML5 Canvas project
                                  ClayUUID Adobe Community Professional

                                  This bug gets even better. In the original FLA, if you remove the face masking from any of the buttons, they all then work correctly.

                                  • 14. Re: gotoAndStop() and event listeners issue on HTML5 Canvas project
                                    johnpgranados Level 1

                                    You're right! So masks are also involved. I'm also still curious as to why the original code worked with the mentioned gotoAndStop(10), and not with gotoAndStop(9). Let's see if the TweenJS team comes up with something on their Github: https://github.com/CreateJS/TweenJS/issues/94.