3 Replies Latest reply on Aug 4, 2016 2:40 PM by ClayUUID

    Multiple 'click's necessary with HTML5 Canvas script

    rekohniknil

      I am in the process of learning scripting in the HTML5 Canvas, having recently switched from Edge Animate and previous to that AS3

       

      I have two buttons and I have created a simple condition to detect the alpha value of the MCs the buttons control, so that the correct MC can be alpha faded off and the new one faded on. The code works, except that:

      on the first click, the MC fades on correctly, the second click on another button requires 2 clicks, and each additional requires more clicks on the same button. Can anyone explain and give me a way to correct this oddity.

       

      Thanks in advance!

       

      This is what I have:

      // LOAD STATES

      this.circleGreen_mc.alpha = 0;

      this.circleRed_mc.alpha = 0;

      this.circleTeal_mc.alpha = 0;

       

      // GREEN BUTTON

      this.green_btn.addEventListener("click", greenClick.bind(this));

      function greenClick() {

        // fade IN

        this.addEventListener('tick', fadeIn.bind(this));

        function fadeIn() {

        this.circleGreen_mc.alpha += 0.1;

        }

        // fade OUT

        if (this.circleRed_mc.alpha == 1); {

        this.addEventListener('tick', fadeOut.bind(this));

        function fadeOut() {

        this.circleRed_mc.alpha -= 0.1;

        }

        }

        // fade OUT

        if (this.circleTeal_mc.alpha == 1); {

        this.addEventListener('tick', fadeOut.bind(this));

        function fadeOut() {

        this.circleTeal_mc.alpha -= 0.1;

        }

        }

      }

       

      // RED BUTTON

      this.red_btn.addEventListener("click", redClick.bind(this));

      function redClick() {

        // fade IN

        this.addEventListener('tick', fadeIn.bind(this));

        function fadeIn() {

        this.circleRed_mc.alpha += 0.1;

        }

        // fade OUT

        if (this.circleGreen_mc.alpha == 1); {

        this.addEventListener('tick', fadeOut.bind(this));

        function fadeOut() {

        this.circleGreen_mc.alpha -= 0.1;

        }

        }

        // fade OUT

        if (this.circleTeal_mc.alpha == 1); {

        this.addEventListener('tick', fadeOut.bind(this));

        function fadeOut() {

        this.circleTeal_mc.alpha -= 0.1;

        }

        }

      }

       

      /*

      // TEAL BUTTON

      this.teal_btn.addEventListener("click", tealClick.bind(this));

      function tealClick() {

      }

      }

      */

        • 1. Re: Multiple 'click's necessary with HTML5 Canvas script
          ClayUUID Adobe Community Professional

          I don't have time just now to properly go over your code, but I did want to comment that, generally speaking, using display attributes of movieclips to track your interaction state is a bad idea, especially when it's a tweened value. Unless you're doing low-level animation code, you should be treating those values as write-only, and using a separate global variable to explicitly track state. And don't define functions inside IF statements unless you really, really know what you're doing.

           

          Also, there is no reason to roll your own alpha transition code. The built-in tween library handles that perfectly well.

          CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5

           

          To fade in one of your clips you just do this:

          createjs.Tween.get(this.circleGreen_mc).to({alpha:1}, 1000);

           

          That's a simplest-case implementation. You can also specify an easing formula and do other more advanced things. It's all explained pretty well in the official docs.

          • 2. Re: Multiple 'click's necessary with HTML5 Canvas script
            rekohniknil Level 1

            Thanks for the info. Interesting, all the things that you are telling me not to do where used straight from Animate's Code Snippets - how odd that the in-app code is not recommended!?

             

            Cheers

            • 3. Re: Multiple 'click's necessary with HTML5 Canvas script
              ClayUUID Adobe Community Professional

              Okay, so, if I were doing what I'm guessing you're doing, I'd do it like this:

               

              var i;
              var curBtn;
              var circles = [this.circleRed, this.circleGreen, this.circleBlue];
              var buttons = [this.btnRed, this.btnGreen, this.btnTeal];
              var items = circles.length; // assume same number of buttons and circles
              
              // initialize things
              for (i = 0; i < items; i++) {
                  circles[i].alpha = 0;
                  buttons[i].btnId = i;
                  buttons[i].addEventListener("click", buttonClickHandler.bind(this));
              }
              
              // handler for all button clicks
              function buttonClickHandler(evt) {
                  var i;
                  var btn = evt.target.btnId;
                  if (btn == curBtn) {
                      return;
                  }
                  curBtn = btn;
                  for (i = 0; i < items; i++) {
                      if (i == btn) {
                          createjs.Tween.get(circles[i], {override:true}).to({alpha:1}, 500);
                      }
                      else if (circles[i].alpha > 0) {
                          createjs.Tween.get(circles[i], {override:true}).to({alpha:0}, 500);
                      }
                  }
              }