Toggle an image on and off

[LuckyNotLucky]

I have a series of layered images that I want to toggle on and off; think a map with layers of roads, cities, rivers, etc.

This is in an html 5 canvas.

A separate button for each layer.

I could do this with AS2 and very easily with Animate Edge, but I'm spinning my wheels in Animate CC.

Anyone have a code snippet I could start with?

Many Thanks,  m

[kglad]

convert each to a movieclip, assign an instance name and use the visible property of html5 movieclips:

this.roads_btn.addEventListener('click',roadsF.bind(this));

function roadsF(){

this.roads_mc.visible=!this.roads_mc.visible;

}

[LuckyNotLucky]

Mmmm, can't get that to work.

I made the layer image an instance (called roads) of a movie clip symbol (called roads); I made the button a button symbol.

I attached the action to the button at the scene level.

My test file is: http://www.grafport.com/toggletest01.fla

I really appreciate the help,   m

[ClayUUID]

This sort of thing works almost exactly like in AS2.

Can you get clips to disappear by hard-coding a toggle of the .visible property?

Have you verified that your button event handlers are firing with console.log() statements?

You have to narrow down exactly what the point of failure is.

[kglad · Accepted solution]

i don't download and correct files unless hired.

here's a working example that you can start with:  http://www.kglad.com/Files/forums/toggle.html

http://www.kglad.com/Files/forums/toggle.fla

[LuckyNotLucky]

Thank you! I see where I failed; I tried to attach the action to the button rather than the frame. I can run with this now.

Sorry if I appeared to be asking for spec work, I really just wanted the concept, not for you to do it for me. Thanks again,  m

[kglad]

you're welcome.

if you're going to do more than a negligible amount of work with html5, it's helpful to setup a debugging scheme.  there are lots of them depending on which browser you like to use.  they allow you to pinpoint problems instead of guessing why something is failing.

i like firefox so i use the firebug plugin for debugging.