10 Replies Latest reply on Aug 10, 2017 7:46 PM by pdgreenstein

    Animated button scripting issues

    pdgreenstein

      I'm attempting to create a self-contained animated button. I.e, the scripting is within the movie clip, rather than on the main timeline, so I can use multiple instances of the button.

       

      The visual effect is mouseover to play 'in' (for example, circle becomes bigger), stop, then mouseover to play 'out' (circle becomes smaller again).

       

      My mc has 20 frames, with a simple a/b/a tween. My main script is on frame 1, and there's a this.stop() on frame 10.

       

      Mouse over should play the next frame.

       

      On mouse out it should go to the corresponding 'out' frame - i.e. if you move the mouse out while you are on frame 5, it should play frame 16: (20 - (5+1)).

       

      The code seems to work on mouse over, but is very flaky for mouse out.

       

      When I place the code on the main timeline and reference a specific instance name, it works better, but still the occasional glitch.

       

      Not sure if this is an error in my logic (probably), or something else.

       

      Any help would be appreciated.

       

       

      this.stop();

       

      stage.enableMouseOver(10);

       

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

       

      function over()

      {

         this.gotoAndPlay(this.currentFrame+1);

       

      }

       

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

       

      function out()

      {

        this.gotoAndPlay(this.totalFrames-(this.currentFrame)+1);

      }

        • 1. Re: Animated button scripting issues
          RandomlyFish Level 3

          I tried your code, and yeah, it's pretty glitchy. While it should be possible to make it work more stable, I think it would be easier to get stable results by animating it through code.

           

          This will work if you place it inside a movieclip:

           

          stage.enableMouseOver(); // Should be placed on the main timeline instead
          
          var button = this;
          
          var transitionTime = 0.15;
          var transitionAmount = 0;
          var transitionSpeed = (1 / transitionTime) / 30; // 30 refers to the frame rate
          
          button.addEventListener("mouseover", Over);
          button.addEventListener("mouseout", Out);
          
          function Over () {
          
               createjs.Ticker.removeEventListener("tick", OutTransition); // Remove the out transition
               createjs.Ticker.addEventListener("tick", OverTransition); // Start the over transition
          }
          
          function Out () {
          
               createjs.Ticker.removeEventListener("tick", OverTransition); // Remove the over transition
               createjs.Ticker.addEventListener("tick", OutTransition); // Start the out transition
          }
          
          function OverTransition () {
          
               transitionAmount += transitionSpeed;
          
               if (transitionAmount >= 1) {
                    transitionAmount = 1;
                    createjs.Ticker.removeEventListener("tick", OverTransition);
               }
               
               Animate();
          }
          
          function OutTransition () {
          
               transitionAmount -= transitionSpeed;
          
               if (transitionAmount <= 0) {
                    transitionAmount = 0;
                    createjs.Ticker.removeEventListener("tick", OutTransition);
               }
          
               Animate();
          }
          
          function Animate () {
          
               // This is where you update the buttons state
               button.scaleX = 1 + transitionAmount * 0.25;
               button.scaleY = 1 + transitionAmount * 0.25;
          }
          

           

          While this is a lot more code, the benefit of this is that you can get identical animation out of multiple different symbols, without creating identical animations for them. Also code like this could be added to a class, so that you can turn any symbol into an animated button, with only one line of code. Then you would only need to update the code in the class, to update the behavior of each of the buttons you're using, so you wouldn't need to change the code in every single button.

           

          If you want me to explain how to do that, just let me know.

          • 2. Re: Animated button scripting issues
            ClayUUID Adobe Community Professional

            Why on earth aren't you just using the tween library to do all that?

             

            createjs.Tween.get(button, {override:true}).to({scaleX:1, scaleY:1}, 1000, Ease.quadOut);
            
            • 3. Re: Animated button scripting issues
              pdgreenstein Level 1

              Thanks for the response, much appreciated. As you say, it's a lot more code, but I can certainly see the advantages of doing this using a completely different approach. Having said that, I'm still hoping for an explanation as to why my code doesn't work.

              • 4. Re: Animated button scripting issues
                RandomlyFish Level 3

                I haven't used createjs.Tween yet, so I wrote the code based on my current knowledge of JavaScript for HTML5 Canvas. Thanks for the example of how it can be used for this case.

                 

                The way the code was written could still be useful in cases where you want things to change at different times based on the transition amount, such as switching the color of the button when the transitionAmount is greater than 0.5, and switching it back when the transitionAmount is less than 0.5.

                • 5. Re: Animated button scripting issues
                  RandomlyFish Level 3

                  Using createjs.Tween, as ClayUUID suggested, the code can be made much shorter and the animation will be eased:

                   

                  stage.enableMouseOver(); // Should be placed on the main timeline instead
                  
                  var button = this;
                  
                  var transitionTime = 0.15;
                  
                  button.addEventListener("mouseover", Over);
                  button.addEventListener("mouseout", Out);
                  
                  function Over () {
                      createjs.Tween.get(button, {override:true}).to({scaleX:1.25, scaleY:1.25}, 1000 * transitionTime, createjs.Ease.quadOut);
                  }
                  
                  function Out () {
                      createjs.Tween.get(button, {override:true}).to({scaleX:1, scaleY:1}, 1000 * transitionTime, createjs.Ease.quadOut);
                  }
                  
                  • 6. Re: Animated button scripting issues
                    ClayUUID Adobe Community Professional

                    pdgreenstein  wrote

                     

                    Having said that, I'm still hoping for an explanation as to why my code doesn't work.

                    Using currentFrame in an event handler when the actual current frame can change at any time is a trainwreck waiting to happen. That's what frame labels are for.

                    • 7. Re: Animated button scripting issues
                      pdgreenstein Level 1

                      Ok, that's a much more concise solution. I've just tried it and it works perfectly. I'll have to learn create.js...

                       

                      Thanks!

                      • 8. Re: Animated button scripting issues
                        pdgreenstein Level 1

                        One question: Assuming other properties can be tweened - i.e alpha, color, position etc., is there a particular syntax for that?

                         

                        For example would this work:

                         

                        createjs.Tween.get(button, {override:true}).to({alpha:0.5}, 1000 * transitionTime, createjs.Ease.quadOut);

                        • 9. Re: Animated button scripting issues
                          ClayUUID Adobe Community Professional

                          The to list accepts literally any property name. It doesn't even have to be a display property. It can be anything.

                           

                          TweenJS v0.6.2 API Documentation : Tween

                          1 person found this helpful
                          • 10. Re: Animated button scripting issues
                            pdgreenstein Level 1

                            Well, my intention was to be able to track the current frame, so as to send the playback head to a corresponding frame on mouse out. I don't think frame labels would solve the problem.

                            I'm basically trying to emulate a simple CSS transition on hover style effect.

                            Anyway thanks for your input with the tween library, that's obviously a much better approach.