18 Replies Latest reply on Jun 28, 2018 8:57 PM by carlost77446125

    Animate CC HTML5 Canvas Mouse Over

    DavidMillett Level 1

      I cannot get my animation to stop and start playing with a mouse rollover, but the listener does put a message box up. This says to me that the listener intercept is working, but the command to stop and start the animation is incorrect. How do I get the animation to stop and start playback with a mouse over event?

       


      /* Mouse Over Event
      Mousing over the symbol instance executes a function in which you can add your own custom code.

      Instructions:
      1. Add your custom code on a new line after the line that says "// Start your custom code" below.
      The code will execute when the symbol instance is moused over.
      frequency is the number of times event should be trigerred.
      */

      var frequency = 3;
      stage.enableMouseOver(frequency);
      canvas.addEventListener("mouseover", fl_MouseOverHandler_10);

      function fl_MouseOverHandler_10()
      {
      // Start your custom code
      // This example code displays the words "Moused over" in the Output panel.
      alert("Moused over");
      this.stop();
      // End your custom code
      }

      /* Mouse Out Event
      Mousing out of the symbol instance executes a function in which you can add your own custom code.

      Instructions:
      1. Add your custom code on a new line after the line that says "// Start your custom code" below.
      The code will execute when the symbol instance is moused out of.
      */
      var frequency = 3;
      stage.enableMouseOver(frequency);
      canvas.addEventListener("mouseout", fl_MouseOutHandler_8);

      function fl_MouseOutHandler_8()
      {
      // Start your custom code
      // This example code displays the words "Moused out" in the Output panel.
      alert("Moused out");
      this.start();
      // End your custom code
      }

        • 1. Re: Animate CC HTML5 Canvas Mouse Over
          ClayUUID Adobe Community Professional

          If you'd do alert(this) in your event handlers, you'd see that this is not what you think it will be. In JavaScript event handlers execute by default in the browser window context, NOT the context of the event that triggered them.

           

          See here: Re: HTML 5 Mouseover button targeting

          2 people found this helpful
          • 2. Re: Animate CC HTML5 Canvas Mouse Over
            DavidMillett Level 1

            Thanks for this.

             

            But why does the alert work? Surely the following should work if the alert works:

             

            stop();

             

            Given my example above could you give me the syntax I should be using?

            • 3. Re: Animate CC HTML5 Canvas Mouse Over
              DavidMillett Level 1

              I've also tried:

               

              this.canvas.stop();

               

              And that did not work.

               

              I guess I'm just looking for an example of script that stops and starts playback with a mouse rollover

              • 4. Re: Animate CC HTML5 Canvas Mouse Over
                ClayUUID Adobe Community Professional

                alert works because it's a globally available function of the browser window object. stop() by itself doesn't work because that is NOT a function of the browser window object. You have to tell JavaScript exactly which object you want to call the stop function on. It's not a mind-reader.

                 

                Your other question is answered in the thread I linked to.

                • 5. Re: Animate CC HTML5 Canvas Mouse Over
                  DavidMillett Level 1

                  Thanks for your help, but I give up trying to trap a mouse over with this software.

                  • 6. Re: Animate CC HTML5 Canvas Mouse Over
                    DavidMillett Level 1

                    Okay Clay thanks for your help. You were right and the variable context was the issue. Now my animation stops when I mouse over, but it does not start when I mouse out. Any ideas?

                     


                    myLocalThis01 = this;
                    var frequency = 1;
                    stage.enableMouseOver(frequency);
                    this.MouseTrk.addEventListener("mouseover", fl_MouseOverHandler_17);

                    function fl_MouseOverHandler_17()
                    {
                    // Start your custom code
                    // This example code displays the words "Moused over" in the Output panel.
                    // alert("Moused over");
                    // End your custom code
                    myLocalThis01.stop();
                    }

                    myLocalThis02 = this;
                    var frequency = 1;
                    stage.enableMouseOver(frequency);
                    this.MouseTrk.addEventListener("mouseout", fl_MouseOutHandler_11);

                    function fl_MouseOutHandler_11()
                    {
                    // Start your custom code
                    // This example code displays the words "Moused out" in the Output panel.
                    // alert("Moused out");
                    // End your custom code
                    myLocalThis02.start();
                    }

                    1 person found this helpful
                    • 7. Re: Animate CC HTML5 Canvas Mouse Over
                      just.emma Level 4

                      Hi, I would just use this simplified code to achieve what you're after:

                       

                      canvas.addEventListener("mouseover", over.bind(this));

                       

                      function over()

                      {

                        this.stop();

                      }

                       

                      canvas.addEventListener("mouseout", out.bind(this));

                       

                      function out()

                      {

                        this.play();

                      }

                       

                       

                      Or if you only want to apply the mouseover functionality to a specific area and not the whole canvas, you modify it like this:

                       

                       

                      stage.enableMouseOver();

                       

                      this.yourBtnInstanceName.addEventListener("mouseover", over.bind(this)); 

                       

                      function over() 

                        this.stop(); 

                       

                      this.yourBtnInstanceName.addEventListener("mouseout", out.bind(this)); 

                       

                      function out() 

                        this.play(); 

                      }

                      2 people found this helpful
                      • 8. Re: Animate CC HTML5 Canvas Mouse Over
                        just.emma Level 4

                        Also, in case you were wondering, here's an updated version of the code you were using, which works after a few adjustments:

                         

                        stage.enableMouseOver();

                        myLocalThis01 = this;

                         

                        this.MouseTrk.addEventListener("mouseover", fl_MouseOverHandler);

                        function fl_MouseOverHandler()

                        {

                        myLocalThis01.stop();

                        }

                         

                        this.MouseTrk.addEventListener("mouseout", fl_MouseOutHandler);

                        function fl_MouseOutHandler()

                        {

                        myLocalThis01.play();

                        }

                         

                         

                        There were a few issues with your previous code:

                         

                        • You only need one global variable to reference your local context, so I got rid of the "myLocalThis02" stuff.
                        • You need to use play() instead of start().
                        • You only need to enable mouseover once.
                        • You don't need to define the mouseover frequency more than once (if at all).  If you don't define the frequency it defaults to 20.
                        3 people found this helpful
                        • 9. Re: Animate CC HTML5 Canvas Mouse Over
                          DavidMillett Level 1

                          Thank you so much

                          • 10. Re: Animate CC HTML5 Canvas Mouse Over
                            Thomas Montague Level 1

                            I have tried to get my code to work with multiple buttons on a single scene.

                             

                            Can you please take a look and let me know what I'm doing wrong here? It seems once I add the second button, the first one breaks.

                             

                             

                            //var frequency = 3;

                            //stage.enableMouseOver(frequency);

                            stage.enableMouseOver;

                            //ChiroButton

                            this.ChiroButton.addEventListener("mouseover", over.bind(this));

                             

                            function over()

                             

                            {

                              this.gotoAndStop(48);

                            }

                             

                            this.ChiroButton.addEventListener("click", fl_ClickToGoToWebPage);

                             

                            function fl_ClickToGoToWebPage() {

                                window.open("http://www.mpamedia.com/audiences/target_chr.php", "_blank");

                            }

                             

                            this.ChiroButton.addEventListener("mouseout", out.bind(this));

                             

                            function out()

                             

                            {

                              this.gotoAndPlay(1);

                            }

                             

                             

                            //AcuButton

                             

                            this.AcuButton.addEventListener("mouseover", over.bind(this));

                             

                            function over()

                             

                            {

                              this.gotoAndStop(98);

                            }

                             

                            this.AcuButton.addEventListener("click", fl_ClickToGoToWebPage);

                             

                            function fl_ClickToGoToWebPage() {

                                window.open("http://www.mpamedia.com/audiences/target_acu.php", "_blank");

                            }

                             

                            this.AcuButton.addEventListener("mouseout", out.bind(this));

                             

                            function out()

                             

                            {

                              this.gotoAndPlay(48);

                            }

                            • 11. Re: Animate CC HTML5 Canvas Mouse Over
                              ClayUUID Adobe Community Professional

                              Other than you having two sets of identically named functions, I don't see anything wrong with it.

                              • 12. Re: Animate CC HTML5 Canvas Mouse Over
                                just.emma Level 4

                                Yeah, you have to give your functions different names if you want them to do different things.  Something like this should work:

                                 

                                // clicks
                                
                                this.ChiroButton.on("click", function(){
                                  window.open("http://www.mpamedia.com/audiences/target_chr.php", "_blank");
                                });
                                
                                this.ChiroButton.on("click", function(){
                                  window.open("http://www.mpamedia.com/audiences/target_acu.php", "_blank");
                                });
                                
                                
                                //rollovers
                                
                                this.ChiroButton.addEventListener("mouseover", overChiro.bind(this));
                                function overChiro(){
                                  this.gotoAndStop(48);
                                }
                                
                                this.ChiroButton.addEventListener("mouseout", outChiro.bind(this));
                                function outChiro(){
                                  this.gotoAndPlay(2);
                                }
                                
                                this.AcuButton.addEventListener("mouseover", overAcu.bind(this));
                                function overAcu(){
                                  this.gotoAndStop(98);
                                }
                                
                                this.AcuButton.addEventListener("mouseout", outAcu.bind(this));
                                function outAcu(){
                                  this.gotoAndPlay(48);
                                }
                                
                                1 person found this helpful
                                • 14. Re: Animate CC HTML5 Canvas Mouse Over
                                  Thomas Montague Level 1

                                  I have 2 buttons that point to the same URL and I'm using this code. When either button is clicked, two tabs open. Note, this does not happen when I'm testing, only on the live page.

                                   

                                  this.ConsumerButton.addEventListener("click", fl_ClickToGoToWebPageConsumer);

                                   

                                  function fl_ClickToGoToWebPageConsumer() {

                                      window.open("http://www.mpamedia.com/audiences/target_con.php", "_blank");

                                  }

                                   

                                  this.ConsumerMoreInfoButton.addEventListener("click", fl_ClickToGoToWebPageConsumerMoreInfo);

                                   

                                  function fl_ClickToGoToWebPageConsumerMoreInfo() {

                                      window.open("http://www.mpamedia.com/audiences/target_con.php", "_blank");

                                  }

                                   

                                  Thanks,

                                  Thomas

                                  • 15. Re: Animate CC HTML5 Canvas Mouse Over
                                    ClayUUID Adobe Community Professional

                                    Sigh. Try this...

                                     

                                    if (!this.ConsumerButton.hasEventListener("click")) {

                                        this.ConsumerButton.addEventListener("click", fl_ClickToGoToWebPageConsumer);

                                    }

                                     

                                    function fl_ClickToGoToWebPageConsumer() {

                                        window.open("http://www.mpamedia.com/audiences/target_con.php", "_blank");

                                    }

                                     

                                    if (!this.ConsumerMoreInfoButton.hasEventListener("click")) {

                                        this.ConsumerMoreInfoButton.addEventListener("click", fl_ClickToGoToWebPageConsumerMoreInfo);

                                    }

                                     

                                    function fl_ClickToGoToWebPageConsumerMoreInfo() {

                                        window.open("http://www.mpamedia.com/audiences/target_con.php", "_blank");

                                    }

                                    • 17. Re: Animate CC HTML5 Canvas Mouse Over
                                      fiveflightsup Level 1

                                      Hi Clay do you think you could assist ??\

                                       

                                      I  have a button in Canvas that I want to go to frame 25 and stop I used the code snippet under HTML 5 Canvas and choose Mose Over from Events Handler but lost about what do next. Any advice. Thanks in advance.

                                       

                                      Here's my actionscript;

                                       

                                      /* Mouse Over Event

                                      Mousing over the symbol instance executes a function in which you can add your own custom code.

                                       

                                       

                                      Instructions:

                                      1. Add your custom code on a new line after the line that says "// Start your custom code" below.

                                      The code will execute when the symbol instance is moused over.

                                      frequency is the number of the times event should be triggered.

                                      */

                                      var frequency = 3;

                                      stage.enableMouseOver(frequency);

                                      this.mybutton2.addEventListener("mouseover", fl_MouseOverHandler_2);

                                       

                                       

                                      function fl_MouseOverHandler_2()

                                      {

                                      // Start your custom code

                                      // This example code displays the words "Moused over" in the Output panel.

                                      alert("Moused over");

                                      // End your custom code

                                      }

                                      • 18. Re: Animate CC HTML5 Canvas Mouse Over
                                        carlost77446125 Level 1

                                        This works well, however when I try to add click function in the same button it stops working, why?