4 Replies Latest reply on Jun 13, 2018 4:01 PM by photogyulai

    HTML5 Canvas - Toggle Switch

    photogyulai Level 1

      Hey!

       

      I started to make a simple toggle switch >> The User clicks to the same place, and if the switch is OFF than it turns ON, and if it is ON than it turns OFF

      But im unable to detect the state of the switch!! I tried some kind of if statement... about currentframe:

       

      ..... addEventListener("click", ...

       

      if (this.mc1.currentFrame == X) {

      do this

      do that

      }

       

      (also tried with only one "equal sign" (=) and tried with different syntax)

       

      How to do that?!? Any switch solution are welcome!

      thanks

      Ben

        • 1. Re: HTML5 Canvas - Toggle Switch
          nickg28 Adobe Community Professional

          Not exactly sure what you are asking, but hopefully this helps.

           

          use the "visible property" of html5. This will allow you to change the visibility of whatever you trying to take on and off the stage.

           

          Give the toggle button the instance name "tog_btn"

          Give the movieclip you want to toggle the visibility on and off the instance name "mc_tog"

           

           

           

          this.tog_btn.addEventListener('click',tog2.bind(this));

           

          function tog2(){

          this.mc_tog.visible=!this.mc_tog.visible;

          }

          1 person found this helpful
          • 2. Re: HTML5 Canvas - Toggle Switch
            photogyulai Level 1

            Thanks nickg28!

             

            This option is good for toogleing visibility!

            but i need some functions to do

             

            for example: if the user clicks the button and it is off >> than it turns on

            witch means:

            A

            B

            C functions are fired  (gotoAndStop(x); - visibility - etc)

             

            i guess i need an if statment what determines the state of the button?!

            ( i googled it and also searched here... come out empty)

            • 3. Re: HTML5 Canvas - Toggle Switch
              ClayUUID Adobe Community Professional

              Buttons in Canvas mode are just like any other object, so you can stick whatever new properties on them you want. So add a property that tracks the state. You could also use a global variable for this purpose, but polluting the global namespace is generally to be avoided.

               

              this.btn.addEventListener("click", clickHandler.bind(this));

               

              function clickHandler(evt) {

                  var state = evt.currentTarget.state = !evt.currentTarget.state;

                  if (state) {

                      // activate stuff

                  }

                  else {

                      // deactivate stuff

                  }

              }

              1 person found this helpful
              • 4. Re: HTML5 Canvas - Toggle Switch
                photogyulai Level 1

                Thanks ClayUUID that is helpful to!

                 

                Im nearly solved this task... BUT ;-)

                 

                i have more than one switch. Actually i have got 3-4 but lets simplyfy it to two:

                 

                if switch1=on, than switch2 have to do different thing(s) than if switch1=off

                 

                (im building a Photoshop keyboard shortcut simulator for helping Ps learning  >> here you can find the old flash version:

                fotobetyar.hu - Photoshop billenty┼▒zet szimulátor 

                 

                the 3-4 switch are the shift-ctrl-alt-(caps lock)

                 

                if i can check the currentFrame state it would be perfect! Can i do that in canvas/html5??

                 

                Please give me examples if you suggest... im pretty bad at finding out syntax!

                 

                thanks