hiding multiple symbols using class name

[Topu252]

I have recently switched from Adobe Edge animate to Adobe animate and looking for a way to hide multiple graphic symbols on different layers at the beginning of the composition and also by button click. But I haven't found any actionscript export or class/base class option in HTML5canvas mode. In Adobe Edge, I used to assign the same CSS class to symbol instances I want to manipulate in a single batch from the properties panel and just use the class name .myclass instead of symbol name to change visibility etc.

I have noticed there's a Linkage column in the Animate's library panel in HTML 5 Canvas mode. If I put the cursor beside the symbol's name there in that column, it allows me to enter some strings. I entered "myclass" for example, but couldn't make it work as a common class.

Here's what I want to do in theory.

I want to make all circles in the above scenario invisible when I load the webpage. Then if I click on button1, circle1 shows up. If I click button2, circle2 shows up, etc. But, only the current circle should be visible and the corresponding button should be in selected state one at a time. All other circles (if displayed) should be invisible again and the buttons unselected. (I must use Graphic symbols for the circles, not the movieclip symbols, because I need to use the main timeline). For 40+ buttons, it is absurd to put 39 visible = false; statement insie a single mouse click handler and then show the intended one. So what else can I do to achieve the same result?

Use anything like 'Not this' function?
Use getChild() function? (The instances might not be from the same symbol)
Use something like document.getElementByClass("myclass");?
I tired all but failed.

I am not a programmer, so afraid of the concept like arrays. using class would be the easiest thing for me. But how can I assign a css or Javascript class to a Graphic symbol and make all relevant symbols nvisible in HTML 5 canvas mode? I appreciate any help in this regard.

[kglad]

animate canvas doesn't use classes.

choose the circle and button names prudentently and you can use for-loops (withou arrays) to avoid repetitive code.  or, if the names are already chosen without forseeing this issue, you can use arrays to store your button and circle references and still use for-loops to avoid repetitive code.

[Topu252]

Thanks a lot kglad. No, names are not chosen yet. Say, if I keep the same format, button1 to button40 and circle1 to circle40, then how would you code the for-loop statement for the button's mouse click handler in order to hide all circles but the one clicked? 

[Topu252]

If classes are not supported with HTML 5 Canvas, (You mean css class? Or Java class? I used css class in Adobe Edge projects and it worked fine on web pages) then I am wondering, what that text field is doing under the Linkage column? (Please see the right most side of the attacked picture, where I entered 'myclass' beside symbol Circle in the library section) What's its purpose?

[kglad]

that's a linkage id, not class.

you can define classes in animate using standard js, but it's not going to simplify what you're trying to do.

[kglad]

this.num = 40;

function resetF(){

for(var i=1;i<=this.num;i++){

this["circle"+i].visible = false;

this["button"+i].gotoAndStop("unselected");

}

}

for(var i=1;i<=this.num;i++){

this["button"+i].addEventListener("click",buttonF.bind(this));

this["button"+i].ivar = i;

}

function buttonF(e){

resetF();

this["circle"+e.currentTarget.ivar].visible = true;

e.currentTarget.gotoAndStop("selected");

}

[Topu252]

Thanks a lot Kglad. Appreciate your effort. I was wondering, can we make it even simpler, like when I click on a button, I know for sure which instance of the symbol 'Circle' I am going to make visible. For example, I am going to make instance Circle35 visible by clicking on Button35. Can I store the name of the Circle instance 35 (Or whatever) to a variable called 'store' to be used later during the next click? And then during the next click, make the content of the variable 'store' invisible again and make circle40 visible...and so on? (Let's forget about deselecting the button part) In this way, we don't need to make all Circle instances invisible to initialize just one Circle instance (As only one circle should be visible any given time). 

I tried the following but nothing changed, what did I do wrong?

this.button35.on('click', function(){
this.circle35.visible = true;
var store = circle35;
});

this.button40.on('click', function(){
this.store.visible = false;
this.circle40.visible = true;
var store = circle40;
});

[kglad]

sure.  you could also use:

this.num = 40;

this.previousIvar;

for(var i=1;i<=this.num;i++){

this["button"+i].addEventListener("click",buttonF.bind(this));

this["button"+i].ivar = i;

this["circle"+i].visible = false;

this["button"+i].gotoAndStop("unselected");

}

function buttonF(e){

if(this.previousIvar){

this["circle"+this.previousIvar].visible = false;

this["button"+this.previousIvar].gotoAndStop("unselected");

}

this["circle"+e.currentTarget.ivar].visible = true;

e.currentTarget.gotoAndStop("selected");

this.previousIvar = e.currentTarget.ivar;

}