Code for show/hide multiple buttons and images

[jonw56480164]

Hi Ya'll, 

Im a total noob and really struggling to get this to work. I've managed to get individual images to show/hide using some of the examples I've found in this in this forum, but can't seem to workout how to translate that into muliple objects. My scenario is this.... 

I have 4 buttons (btn_Button1, btn_Button2, btn_Button3 and btn_Button4), I want them to show a  corresponding image (mc_Image1, mc_Image2, mc_Image3 and mc_Image4). btn_Button1 shows mc_Image1 and so on. The image covers most of the stage when showing, so I’d like to be able to hide it again by clicking the image.

Additionally, I’d like another image (mc_Overlay) to show when ALL buttons are pressed (this image will appear behind mc_image1, mc_image2 etc) and this will also hide when you click on the image, as described above.

Does that make sense? and can anyone help??

Many thanks

[kglad]

as3 or html5?

[jonw56480164]

html5, sorry should have said. 

[kglad]

this.btn_pressedA = [];
this.btn_num = 4;
for(var i=1;i<=this.btn_num;i++){
this["btn_Button"+i].addEventListener("click",btn_clickF.bind(this));
this["mc_Image"+i].addEventListener("click",mc_clickF.bind(this));
this["mc_Image"+i].visible = false;
this.mc_Overlay.visible = false;
}
function btn_clickF(e){
var i = e.currentTarget.name.split("Button")[1];
this["mc_Image"+e.currentTarget.name.split("Button")[1]].visible = true;
if(this.btn_pressedA.indexOf(i)==-1){
this.btn_pressedA.push(i);
}
if(this.btn_pressedA.length==this.btn_num){
this.mc_Overlay.visible = true;
}
}

function mc_clickF(e){
e.currentTarget.visible = false;
}

[jonw56480164]

Fantastic, I'll give this a try tomorrow. Thanks so much for taking the time. 

[kglad]

you're welcome.

[jonw56480164]

Hi kglad, 

apologies for the delay, I've been away.

This doesn't seem to work - I tried it on my project and nothing happened, so I set up a crude test project with just btn_Button1, btn_Button2, btn_Button3, btn_Button4, mc_Image1, mc_Image2, mc_Image3, mc_Image4 and mc_Overlay. I added the code in and when I "test" everything just appears on the screen. 

I tried with and without giving the buttons and images instance names, this made no difference. Out of curiosity, do I need to give them all instance names? I think I do. 

Do you have any suggestions? 

Many thanks, 

[kglad]

you do need to use the exact instance names (and case matters) you used in your first message. 

if there's a problem when testing, use your developers console to see where you made your error(s).

[jonw56480164]

Thanks for coming back on this, much appreciated.

Okay, so the names in my first message were the names given to the buttons and images when I first converted them to a symbol. I then named the instances, which were different (see below). Which should I be using in the code? 

[kglad]

use:

this.btn_pressedA = [];
this.btn_num = 4;
for(var i=1;i<=this.btn_num;i++){
this["Button"+i+"_btn"].addEventListener("click",btn_clickF.bind(this));
this["Image"+i+"_mc"].addEventListener("click",mc_clickF.bind(this));
this["Image"+i+"_mc"].visible = false;
this.mc_Overlay.visible = false;
}
function btn_clickF(e){
var i = e.currentTarget.name.split("Button")[1];
this["Image"+i+"_mc"].visible = true;
if(this.btn_pressedA.indexOf(i)==-1){
this.btn_pressedA.push(i);
}
if(this.btn_pressedA.length==this.btn_num){
this.mc_Overlay.visible = true;
}
}

function mc_clickF(e){
e.currentTarget.visible = false;
}

[jonw56480164]

Thanks again for coming back, it's much appreciated.  

This doesn't seem to work either. All content just shows up on the "test" and buttons are not clickable. 

I've just mocked another crude version up in case there were any bugs but still nothing.

I've attached the test file, if you don't have time to take a look I'll totally understand. 

[kglad]

i don't see anything attached but here's the code i suggested working:

http://www.kglad.com/Files/forums/show.html

the fla is at that same path and is show.fla

[jonw56480164]

Thank you!

That's very close although the overlay is not appearing with when you press every button, it only seems to appear when you click on the last box on the right and then doesn't disappear again.

https://we.tl/t-lvWQGiHyWJ

it wont let me attach for some reason 

[kglad]

overlay appears when you click each button.  clear your cache, and click the right most button, does overlay appear?

and i didn't code for overlay to disappear because i didn't see that in you "asks".  but if that's what you want add an event listener to it must like the movieclips have:

this.btn_pressedA = [];
this.btn_num = 4;

this.mc_Overlay.addEventListener("click",mc_clickF.bind(this));

this.mc_Overlay.visible = false;

for(var i=1;i<=this.btn_num;i++){
this["Button"+i+"_btn"].addEventListener("click",btn_clickF.bind(this));
this["Image"+i+"_mc"].addEventListener("click",mc_clickF.bind(this));
this["Image"+i+"_mc"].visible = false;
}
function btn_clickF(e){
var i = e.currentTarget.name.split("Button")[1];
this["Image"+i+"_mc"].visible = true;
if(this.btn_pressedA.indexOf(i)==-1){
this.btn_pressedA.push(i);
}
if(this.btn_pressedA.length==this.btn_num){
this.mc_Overlay.visible = true;}
}

function mc_clickF(e){
e.currentTarget.visible = false;
}