9 Replies Latest reply on Jan 9, 2017 4:09 PM by flashpeppe

    javascript button states in html5 canvas

    flashpeppe Level 1

      Hello people  :-)

      I have 7 buttons on my stage (button1, button2, etc) all MC's. I would like to control the RollOver, RollOut & CLick with js.

      At first I thought I could just tell my button Listener where to go

      i.e. gotoAndStop(2) which is RollOver state. or gotoAndStop(3) which is Click state. and gotoAndStop(1) which is RollOut state.

      But when I "Click" and then rollout, I need the button to stay "clicked" until some other button is "clicked".

      i'm trying this but there is something wrong.

       

      // loop through the buttons and give them mouse click listeners
      for ( var i:int = 1 ; i <= 7; i++ ){
        
      var curButton:MovieClip = getChildByName ("button"+i);
        
      // set click lisitener
        curButton
      .addEventListener ( MouseEvent.CLICK, buttonClickHandler.bind(this) );
        
      // set rollover listener
        curButton
      .addEventListener ( MouseEvent.ROLLOVER, buttonRollOverHandler.bind(this) );
        
      // set rollout listener
        curButton
      .addEventListener ( MouseEvent.ROLLOUT, buttonRollOutHandler.bind(this) );

        
      // set initial state
        curButton
      .gotoAndStop(1);
      }

      function resetStates (){
        
      for ( var i = 1; i<=7; i++){
        
      var curButton = getChildByName("button"+i);
        curButton
      .gotoAndStop(1);
        
      }
      }

      function buttonRollOverHandler ( evt:MouseEvent ){
        resetStates
      ();
        evt
      .target.gotoAndStop(2);
      }
      function buttonRollOutHandler ( evt:MouseEvent ){
        resetStates
      ();
      }
      function buttonClickHandler ( evt:MouseEvent ){
        resetStates
      ();
        evt
      .target.gotoAndStop(3);
      }

      tnx to all

        • 1. Re: javascript button states in html5 canvas
          kglad Adobe Community Professional & MVP

          in your click handler assign a variable indicating evt.currentTarget was the last clicked button.  use that variable in resetStates() to determine which to 'reset' and which to not 'reset'.

          • 2. Re: javascript button states in html5 canvas
            ClayUUID Adobe Community Professional

            At a glance, the first thing that's going to cause problems is that you're use AS3 code, not JavaScript. There's no such thing as strict variable typing in JS.

             

            No such thing as getChildByName, either. Instead of:

            = getChildByName ("button"+i);

             

            You'd do:

            = this["button" + i];

             

            Remember that the CreateJS API that Canvas mode uses is generally more AS2-like than AS3-like. And that frame numbers in Canvas are 0-based, not 1-based.

            • 3. Re: javascript button states in html5 canvas
              flashpeppe Level 1

              thanks all for reply

              mmmmmmhhh!!! doesn't work...

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

                 var curButton = new createjs.MovieClip();

                  this.curButton.getChildByName("button"+i);

               

              i'have tried changing with -  this["button"+i] -

              curButton is undefined - unexpected type error.

              Any suggestion?

              • 4. Re: javascript button states in html5 canvas
                flashpeppe Level 1

                in this way there are no errors in consol but

                movieclips doesn't listen calls

                 

                var button = new createjs.MovieClip();

                var curButton = new createjs.MovieClip();

                 

                 

                // loop through the buttons and give them mouse click listeners

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

                  

                    curButton.getChildByName(button+i);

                   // set click lisitener

                curButton.addEventListener (MouseEvent.CLICK, buttonClickHandler.bind(this));

                   // set rollover listener

                curButton.addEventListener (MouseEvent.ROLLOVER, buttonRollOverHandler.bind(this));

                   // set rollout listener

                  curButton.addEventListener (MouseEvent.ROLLOUT, buttonRollOutHandler.bind(this));

                 

                   // set initial state

                  curButton.gotoAndStop(1);

                };

                 

                function resetStates (){

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

                   //var curButton = ["button"+i];

                  curButton.gotoAndStop(1);

                   }

                }

                 

                function buttonRollOverHandler (currentTarget){

                  resetStates();

                  evt.target.gotoAndStop(2);

                }

                function buttonRollOutHandler (currentTarget){

                  resetStates();

                }

                function buttonClickHandler (currentTarget){

                  resetStates ();

                  evt.target.gotoAndStop(3);

                }

                • 5. Re: javascript button states in html5 canvas
                  kglad Adobe Community Professional & MVP

                  try:

                   

                  this.clickedButton = null;

                   

                   

                  // loop through the buttons and give them mouse click listeners

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

                  // set click lisitener

                  this['button'+i].addEventListener (MouseEvent.CLICK, buttonClickHandler.bind(this));

                  // set rollover listener

                  this['button'+i].addEventListener (MouseEvent.ROLLOVER, buttonRollOverHandler.bind(this));

                  // set rollout listener

                  this['button'+i].addEventListener (MouseEvent.ROLLOUT, buttonRollOutHandler.bind(this));

                   

                  // set initial state

                  this['button'+i].gotoAndStop(1);

                  };

                   

                  function resetStates (tl){

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

                  if(tl.clickedButton!=tl['button'+i]){

                  tl['button'+i].gotoAndStop(1);

                  }

                  }

                  }

                   

                  function buttonRollOverHandler (e){

                  e.currentTarget.gotoAndStop(2);

                  }

                  function buttonRollOutHandler (e){

                  resetStates(this);

                  }

                  function buttonClickHandler (e){

                  resetStates (this);

                  this.clickedButton=e.currentTarget;

                  e.currentTarget.gotoAndStop(3);

                  }

                  • 6. Re: javascript button states in html5 canvas
                    flashpeppe Level 1

                    tnx a lot!!!

                    but...

                    this.['button'+i].gotoAndStop(1);

                    return 'missing name after . operator'

                    :-(

                    • 7. Re: javascript button states in html5 canvas
                      kglad Adobe Community Professional & MVP

                      i'm not sure where that that line of code is, but it should be

                       

                      this['button'+i].gotoAndStop(1)

                      • 8. Re: javascript button states in html5 canvas
                        ClayUUID Adobe Community Professional

                        Okay this unholy mishmash of AS3 and CreateJS APIs needs to stop. This works, assuming the "buttons" are actually movieclips pretending to be buttons:

                         

                        this.stop();
                        
                        // required only if no actual buttons are used
                        stage.enableMouseOver(20);
                        
                        // variables
                        var numButtons = 7;
                        var i, b, curButton;
                        
                        // initialize
                        for (i = 1; i <= numButtons; i++) {
                            b = this["button" + i];
                            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 buttonClickHandler() {
                            if (curButton) {
                                curButton.gotoAndStop(0);
                            }
                            this.gotoAndStop(2);
                            curButton = this;
                        }
                        
                        function buttonRollOverHandler() {
                            if (this != curButton) {
                                this.gotoAndStop(1);
                            }
                        }
                        
                        function buttonRollOutHandler() {
                            if (this != curButton) {
                                this.gotoAndStop(0);
                            }
                        }
                        
                        • 9. Re: javascript button states in html5 canvas
                          flashpeppe Level 1

                          yes!!! it works...Tnx a lot ClayUUID...:-)

                          could you explain a bit your solution pls?

                          because i have tried to target a specific frame for each button in main timeline but  don't work :-)

                          in the past i have work a lot with action script 2 but i have a poor knowledge of as3. Sorry for that

                          I know my question are very basic but pheraps someone find it usefull!

                          Now that all buttons works properly i'have tried

                           

                          function buttonClickHandler() {

                           

                             

                              if (curButton) {

                                 

                                  curButton.gotoAndStop(0); 

                              } 

                              this.gotoAndStop(2); 

                              curButton = this;

                              exportRoot.animazTrade_mc.gotoAndPlay("1");

                             

                           

                          but all buttons works in the same way calling the same action :-)

                          last help!! ;-)