(HTML5) Buttons With Multiple Functions?

[Mariel33115364fjnz]

I am working on a system with buttons that turn on labels. The buttons change color when on or off. There are also a set of toggles that hide the labels. I am trying to find a way to have the buttons change colors correctly when the toggles are used to turn them off or on. 

I can make the buttons change color one way (like having them brighten when turned on), but I don't know how to get them to change back the other way (returning to their original colors).

The buttons are movie clip symbols, with the different colors on different frames in the timeline. In the code, the toggles send a signal to move the button's frames to the lighter color. 

What I want to do is have the toggles send one signal when pressed once, and send a different signal when pressed twice. Is there a way to do this in HTML5? I know there is a similat function when working with visible/invisible functions (```this.SymbolInstance.visible = !this.SymbolInstance.visible;```), but is there a way to work like this with frames?

[kglad]

yes, you could use a variable for each toggle or just check the toggle's target movieclip target current frame

[Mariel33115364fjnz]

Would I be able to use two different variables for the same toggle?

[kglad]

sure.  eg, 

this.toggle.var1 = whatever;

this.toggle.var2 = whateverelse;

[Mariel33115364fjnz]

Thank you! I'll try it out

[kglad]

sure. keep us updated.

[JoãoCésar]

Hi.

I believe this example is helpful:
https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/toggle_animation

Please note how the button is strutcured in the FLA.

And the only code needed for the button to work is this:

var root = this;

root.playPause.on("click", function(e)
{
    e.currentTarget.play();
});

Regards,

JC

[Mariel33115364fjnz]

Thank you! I'll take a look at the project file

[Mariel33115364fjnz]

I reworked the example project file to reflect the project I'm working on. The "else" statement works, but the initial "if" statement does not do anything.

root.ToggleYellow.on("click", function(e)
{
	e.currentTarget.play();
	
	if (e.currentTarget.currentFrame === 7)
		root.LabelYellow1.gotoAndStop('hide');
	else
		root.LabelYellow1.gotoAndStop('show');
});

Is there a way to fix this?

[kglad]

you know the initial frame is frame 0, correct?

ie, it's usually more reliable to use labels.

[Mariel33115364fjnz]

That worked, thank you! I was trying to use 1 as the initial frame before I tried labels, so that was my issue.

[kglad]

yes, i know to use zero-based frame numbers but still find it much easier and safer to use labels.