Overlay of seperate flash movies

[Chappo]

Hi everybody,

Have this dilemma involving 2 seperate .SWF files.

1st .swf file contains a drop down menu and the height of it is 800px and the 'effective' height is about 200px.

2nd .swf file contains clickable buttons and on the site it would be placed just under the drop down menu above.


Now... for both .swf files i have set a z-index and wmode: transparent.
When i publish the html, the drop down menu will open over the 2nd swf file.
But i cannot seem to click on the buttons anymore on the 2nd swf file.

how do i get this to work ?

thanks in advance

[RubenFlash]

wmode = transparent is a bit problematic, specially with firefox. Try changing the wmode to opaque and see if it works.

[Chappo]

Hi Rubenflash,

too bad, but it doesnt make much difference.
i see a big white background.

[RubenFlash]

Could you post the html code?

[Chappo]

basically its really simple to emulate, just have 2 swf files (for example swf_a and swf_b )

put buttons/links on both movies
put swf_a on top of swf_b and both with wmode=transparent

i want swf_a to be visible above swf_b , but i want to be able to click on buttons in swf_b

i'm fearing the worst :(

[RubenFlash]

I just re-read your first post and understand why you can't click on the second swf. It's because your first swf covers the second swf. They are being embed in different dhtml containers and that's why you can't click even if your wmode is set to transparent. Why don't you create both movies in the same file? It's a better solution.

[Chappo]

Rubenflash,

that is not possible and not an option.
i am thinking of another solution and i'm sure i've seen it before but with advertorials.

i've made a small example here
http://img124.imageshack.us/img124/1914/swflh4.jpg

What you see is a green box representing the menu, and the dotted lines is the region that it will fly / drop down to.
behind the menu is the other SWF file named swf_b

What i want to know is... what if you hover with your cursor over de mainmenu (with the lightly coloured green) and the menu becomes active and all the stuff in the background is inactive - sort of like putting the menu depth level above all the others.

and when you hover out of the lightly coloured green, the entire menu will drop behind the elements that was behind it before

is this possible ?
maybe through CSS or JS ?

[RubenFlash]

You could play with the z-indexes of both movies by firing a event in your html with flash. Something like this:



<div id="swf_a" style="z-index=1">
//embed you swf_a movie here
</div>
<div id="swf_b" style="z-index=2">
//embed you swf_b movie here
</div>
<script language="javascript">
function switch_zindex(movie){
document.getElementById(movie).style.zIndex += 1;
}
</script>


And then, in Flash, call the switch_zindex function everytime you need to switch the movie to the "front", by, for example, setting a RollOver event in the border of your movie.

[Chappo]

wow, looks pretty good (and with less code then i would've thought)

how would the code look like in flash as i never played with flash>js before

thanks again for your help!

[prg9]

i've made a small example here
http://img124.imageshack.us/img124/1914/swflh4.jpg

Hi, maybe I am not understanding properly, but why not just use a container_swf to the load both swf_a and swf_b into, then just worry about positioning your container_swf on your page and handle the stacking order in Flash (swapDepths, getNextHighestDepth, etc..) (as RubenFlash hinted at also above.)

Again maybe I am totally misunderstanding (would be no suprise), ;) I am just basing this suggestion off the "swflh4.jpg" you posted, from that example it would seem possible to do, but again maybe I dont properly understand your setup/layout of your page.

RubenFlash's js method looks promising, just test in ALL browsers ;) as these types of things are always fun (flash layering).

[Chappo]

i guess RubenFlash has explained/given a better solution to what i want.. just need to figure out how to tell flash to take the JS code into action and make it work actually haha

any help greatly appreciated!

[RubenFlash]

Quite simple. You could use ExternalInterface, but, to not complicate, just use the getURL:



switchA.onRelease = function(){
getURL("javascript:switch_zindex('swf_a');");
}
switchB.onRelease = function(){
getURL("javascript:switch_zindex('swf_b');");
}

[atodd66]

RubenFlash

Would I be able to use your html and actionscript code for a menu that has "expanding" buttons? The buttons expand or bounce larger than the swf window and I want them to be seen over the html and not be cut off. Can I call a transparent background behind the menu (that is bigger obviously) when I roll over each button so that the buttons will not get cut off? Any help would be great! Thanks!

Andrew

[RubenFlash]

You can't have flash elements (like buttons or movieclips) expand over the swf because they are the swf. For example, if you have a 250x250 swf you can't expect to have a 500x500 button and be able to see it in the html. Perhaps you should explore a different approach.

Remember that using a single base swf and then load other swf's into it is always better, because it allows you to have a greater control over them and how they interact with each other.

[atodd66]

So I can't have an swf that is bigger, load when I roll over a button? Kind of like Chappo's example only the red part would be all around. It would kind of act like a pop up margin. If it won't work it won't work. It's not the end of the world.:alien: Thanks for your help!:hugegrin:
http://img124.imageshack.us/img124/1914/swflh4.jpg

Here is the link to a fake home page where it will be:
http://www.gregsmithequipment.com/Articles.asp?ID=225

[atodd66]

Here is what I am trying to do:
http://mynetdocs.com/files/27/Picmain.swf

I know that it's just the swf and it's blown up but the blue border is supposed to be the "visual" size and the buttons expand outside of that border over the html. I got it to work visually but you can't click on any html buttons within 80px (which is the expansion area) outside of the blue border.

[RubenFlash]

That's feasible. Just embed your flash with wmode=transparent. Be sure that the swf background hasn't got any element.

[atodd66]

Ok I have the flash set to wmode=transparent but you still can't click on any html button around the menu if there in the 80px "margin". I'm not sure what you mean by element. Could you explain? Here is the link to a fake home page where it will probably be:
http://www.gregsmithequipment.com/Articles.asp?ID=225

[Chappo]

Hi RubenFlash,

I have made a little example based on your replies.
Zipfile consists of 2 .swf files with the menu having the script to switch z-index.

Could you please help me on how to set it up further?

The menu should just go over all the objects in the scene, but when i hover over the first blue button , it should put all the objects on the back, to the front

How can i do this?

Big thank you in advance

[Chappo]

just tested it a bit more but still unable to make the div move 'higher' in z-index based on the scripts..

hoping someone could help - thanks in advance!

[Chappo]

little bump :thumb: