9 Replies Latest reply on Jan 10, 2017 10:09 AM by kglad

    how to assign a target in this case? (html5 canvas)

    flashpeppe Level 1

      Hello everyone!

      i'm working in html5 canvas projectvand i'd like to add some feature at this code that for now work fine.

      In short, i have 7 movieclips with instance name button1, button2, button3, ...etc and these lines of code highlight the button that is pressed.

      Now I need to add, according to the button pressed, a specific action, in my case a goToandStop() in the main timeline.

      here the code:

       

      1. this.stop(); 
      2. // required only if no actual buttons are used 
      3. stage.enableMouseOver(20); 
      4. // variables 
      5. var numButtons = 7
      6. var i, b, curButton; 
      7. // initialize 
      8. for (i = 1; i <= numButtons; i++) { 
      9.     b = this["button" + i]; 
      10.     b.cursor = "pointer"; 
      11.     b.mouseChildren = false; 
      12.     b.addEventListener("click", buttonClickHandler.bind(b)); 
      13.     b.addEventListener("mouseover", buttonRollOverHandler.bind(b)); 
      14.     b.addEventListener("mouseout", buttonRollOutHandler.bind(b)); 
      15. }
      16. // event handlers 
      17. function buttonClickHandler() { 
      18. if (curButton) { 
      19.         curButton.gotoAndStop(0); 
      20.     }
      21. this.gotoAndStop(2); 
      22.     curButton = this; 
      23. }
      24. function buttonRollOverHandler() { 
      25. if (this != curButton) { 
      26. this.gotoAndStop(1); 
      27.     }
      28. }
      29. function buttonRollOutHandler() { 
      30. if (this != curButton) { 
      31. this.gotoAndStop(0); 
      32.     }

       

      tnx a lot

        • 1. Re: how to assign a target in this case? (html5 canvas)
          kglad Adobe Community Professional & MVP

          with a switch-case (or a sequence of if-else) statments in your click handler.

          • 2. Re: how to assign a target in this case? (html5 canvas)
            flashpeppe Level 1

            Tnx for reply Kgald! but my problem is that i can't access at pressed button. how don't know how to do... i've tried a lot and lot!!!

            • 3. Re: how to assign a target in this case? (html5 canvas)
              kglad Adobe Community Professional & MVP

              use:

               

               

              1. function buttonClickHandler() { 
              2. if (curButton) { 
              3.         curButton.gotoAndStop(0); 
              4.     }
              5. this.gotoAndStop(2); 
              6.     curButton = this; 
              7. switch(this.name){

              case "button1":

              //do whatever

              break;

              case "button2":

              //do whatever

              break;

               

              etc

              }

              1. }
              1 person found this helpful
              • 4. Re: how to assign a target in this case? (html5 canvas)
                flashpeppe Level 1

                mmmhh no doesn't work! :-(

                i'have also created a function but nothing... no alerts displayed

                 

                stage.enableMouseOver(20);   

                // variables 

                var numButtons = 7; 

                var i, b, curButton; 

                var tgt = this["button" + i];

                 

                // initialize 

                for (i = 1; i <= numButtons; i++) {   

                    b = this["button" + i];

                    var tgt =b

                    b.cursor = "pointer"; 

                    b.mouseChildren = false; 

                    b.addEventListener("click", buttonClickHandler.bind(b));

                    b.addEventListener("mouseover", buttonRollOverHandler.bind(b)); 

                    b.addEventListener("mouseout", buttonRollOutHandler.bind(b));   

                }  

                // event handlers

                function buttonPressed() {  

                    switch(this.name){

                        case "button1":

                            alert("btn1");      

                            //do whatever

                            break;

                        case "button2":

                            alert("btn2");        

                            //do whatever

                            break;

                        }

                    }

                   

                function buttonClickHandler() {

                 

                    if (curButton) {

                       

                        curButton.gotoAndStop(0); 

                    }

                   

                    this.gotoAndStop(2); 

                    curButton = this;

                        buttonPressed();

                   

                   

                    //alert(i+71);

                   

                 

                 

                function buttonRollOverHandler() { 

                    if (this != curButton) { 

                        this.gotoAndStop(1); 

                    } 

                 

                function buttonRollOutHandler() { 

                    if (this != curButton) { 

                        this.gotoAndStop(0); 

                    } 

                }

                • 5. Re: how to assign a target in this case? (html5 canvas)
                  kglad Adobe Community Professional & MVP

                  that's not the code i suggested.

                   

                   

                  stage.enableMouseOver(20);

                  // variables

                  var numButtons = 7;

                  var i, b, curButton;

                  var tgt = this["button" + i];

                   

                  // initialize

                  for (i = 1; i <= numButtons; i++) {

                  b = this["button" + i];

                  var tgt =b

                  b.cursor = "pointer";

                  b.mouseChildren = false;

                  b.addEventListener("click", buttonClickHandler.bind(b));

                  b.addEventListener("mouseover", buttonRollOverHandler.bind(b));

                  b.addEventListener("mouseout", buttonRollOutHandler.bind(b));

                  }

                  // event handlers

                  function buttonPressed(btn) {

                  switch(btn.name){

                  case "button1":

                  alert("btn1");

                  //do whatever

                  break;

                  case "button2":

                  alert("btn2");

                  //do whatever

                  break;

                  }

                  }

                   

                  function buttonClickHandler() {

                   

                  if (curButton) {

                   

                  curButton.gotoAndStop(0);

                  }

                   

                  this.gotoAndStop(2);

                  curButton = this;

                  buttonPressed(this);

                   

                   

                  //alert(i+71);

                   

                  }

                   

                   

                  function buttonRollOverHandler() {

                  if (this != curButton) {

                  this.gotoAndStop(1);

                  }

                  }

                   

                  function buttonRollOutHandler() {

                  if (this != curButton) {

                  this.gotoAndStop(0);

                  }

                  }

                  1 person found this helpful
                  • 6. Re: how to assign a target in this case? (html5 canvas)
                    flashpeppe Level 1

                    no no doesn't work:-(

                    if i put alerts in switch cases they are not displayed

                    if i put an alert here

                    function buttonPressed(btn) {

                                   alert(btn.name);

                              switch(btn.name){

                         case "button1":

                              //do whatever

                         break;

                    it return null

                    i'can't display button's name in alert.

                    • 7. Re: how to assign a target in this case? (html5 canvas)
                      kglad Adobe Community Professional & MVP

                      assign their names:

                       

                      for (i = 1; i <= numButtons; i++) {

                      b = this["button" + i];

                      b.name="button"+i

                      • 8. Re: how to assign a target in this case? (html5 canvas)
                        flashpeppe Level 1

                        Oh my god!!! tnx a lot!