HTML5 Canvas - Toggle Switch

[photogyulai]

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

[Nicktendo28]

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;

}

[photogyulai]

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)

[ClayUUID · Accepted solution]

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

    }

}

[photogyulai]

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