How'd they do it? DHTML menu over Flash !

[redbeth]

I admit I'm new to CSS, but I thought that this was impossible:

A dhtml menu drops down OVER a Flash animation, but they did it at www.hesketh.com (http://www.hesketh.com/).

And I can look at the code, but can someone point out the bit that actually accomplishes this trick? I've been saying "no that can't be done" when I'm asked to accomplish the same task.

[redhead]

the menus are set with a z-index of 100 using CSS, which brings them in front of the flash movie.

z-index controls what "order" its in from front to back... the greater the number, the nearer the front the object will be.

[SIGINT]

Hi ,
does this also work with IFRAMES,or do i have to wait for
standard conform webbrowsers???

Thx SIGINT

[whackaxe]

iframes are the devil to play with if you want to interact with them. your better off making normal frames

[Spookster]

Well that is certainly interesting. Up to this point as far as I knew layers could not be positioned in front of embedded third party software objects such as flash even with setting the z-index. Is this something new in flash that is allowing it maybe?

[redhead]

Originally posted by Spookster
Up to this point as far as I knew layers could not be positioned in front of embedded third party software objects such as flash even with setting the z-index... Oh... i just saw the menu was assigned to a z-index of 100 and presumed that was how it was done.

[whackaxe]

try contacting the webmaster and ask him to unveil his secrets!

[joh6nn]

last i knew, Spookster has it right, that nothing could be placed over a flash movie. or certain form objects, or iframes ( in IE5 and lower ).

but look at this. It's VB, but you guys should still be able to follow it:

<script language="vbscript" type="text/vbscript">
on error resume next
var flashPresent = False
flashPresent = IsObject(CreateObject("ShockwaveFlash.ShockwaveFlash.5"))
If flashPresent = True Then
document.getElementById("flashy").innerHTML = "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0' width='382' height='165'><param name='movie' value='/flash/wp_ue.swf'><PARAM NAME=loop VALUE=false><param name='quality' value='high'><param name='bgcolor' value='#FFFFFF'><param name='wmode' value='transparent'></object>"
End If
</script>

that flash is only conditionally there. this leads me to suspect, that the flash dissappears when the menus are active. now, i can't verify this; i searched the code, and didn't see this happening anywhere, but it's the only thing i can think of that makes any sense to me.

[Spookster]

What that script is doing is simply checking to see if the browser supports flash and if it does put the flash file in there. That script will run as the page loads and no other time. So they are not changing or hiding the flash file when the menu is active so this is still interesting.

The only thing that seems to stand out in there is this parameter:

><param name='wmode' value='transparent'>

I'm not a flash guru but maybe that has something to do with this?

[oracleguy]

Originally posted by Spookster
What that script is doing is simply checking to see if the browser supports flash and if it does put the flash file in there. That script will run as the page loads and no other time. So they are not changing or hiding the flash file when the menu is active so this is still interesting.

The only thing that seems to stand out in there is this parameter:

><param name='wmode' value='transparent'>

I'm not a flash guru but maybe that has something to do with this?

I not a flash guru either but I've never encountered that perameter. So they probably built it into their action scripting perhaps to accomplish this?

[joh6nn]

i've seen that parameter before, but having never worked with flash, i was under the impression that it had to do with placing flash over the top of other items, and not vice versa

[MCookie]

Transparent movies

In a transparent movie, the background of the HTML page on which the movie is embedded shows through all the transparent portions of the movie. This allows you to overlap the movie with other elements of the HTML page. You can take advantage of this feature without changing your existing SWF files by using the new WMode parameter for the <OBJECT> tag.

Controlling transparency with the WMode parameter
The WMode parameter is a new parameter for the <OBJECT> tag. Recognized by the latest version of the Flash Player Player, WMode determines whether or not the background of the HTML page on which a movie is embedded shows through the transparent portions of the movie, depending on which of three properties you choose.

Window — Use the Window property to play a Flash Player movie in its own rectangular window on a web page. This is the default property for WMode and the works the way the classic Flash Player Player works. This normally provides the fastest animation performance.

Opaque — By using the Opaque property you can use JavaScript to move or resize movies that don't need a transparent background.

Transparent — Use the Transparent property to create a transparent movie in which the background of the HTML page on which the movie is embedded shows through all the transparent portions of the movie. Animation performance might be slower when you use this property.

http://www.macromedia.com/support/flash/how/shock/wless2/wless02.html

[firepages]

+ a quick warning that transparent mode does NOT work on IE for MAC's (as my mac loving client recently discovered) - I normally dont bother much about mac users but since its a client :)

[redbeth]

I knew it wasn't the z-index, and a transparent background would show anything behind the movie. I am not fluent in VBScript, but it does look like it's just checking for Flash.

Maybe I'll try asking the nice folks over at were-here or ultrashock how that was done, they're the Flash gurus...

This one is a puzzle! :rolleyes:

[brothercake]

apparently this works - http://www.flashkit.com/tutorials/Tips_And_Techniques/Flash_an-Wouter-675/index.shtml

[redbeth]

It works, but only in I.E. on the PC.

Check it out on my experiments page (http://www.bethhansen.net/code/).

[Spookster]

The site in the original post also works in NS. So there must be something else they are doing.

[Spookster]

So what was the final verdict? Did anybody get in contact with the webmaster of that site and ask them? Or were you all too scared to ask? :D

[hairynugs6382]

Ill email them!! what can they due not reply


edit:I do not see the contact 4 webmaster just the orginization that owns the site should i still email them!

[Spookster]

I just figured it out. The parameter that I mentioned is the key. That parameter that makes it transparent in IE makes it work. However in NS4.x and Mozilla they just use a regular image instead of flash. At first I though it was a flash file but in NS4.x and Mozilla it's not. Arghhh!!! That would have been nice. Why can't NS4.x just disappear off the planet.

You have to give them credit though. I couldn't tell the difference right away.

[redbeth]

Ha ha! Only in IE is it possible, but that it is possible is kinda cool. I'm trying to learn how to do things with web standards, where everyone gets the same experience no matter the browser, so this trick wouldn't quite qualify. Oh well.

http://www.webstandards.org/

[Freelancer]

Your link to a tutorial on this subject just took me to a general page at flashkit. I think they moved things around. Do you know the name or what section this tutorial is in? appreciate it bud.

[Freelancer]

The link you put in to look check out over at Flashkit doesn't take you to the tutorial but a generic page on FlashKit. Could you tell me the name of the tutorial and possibly where it's located? with so many I'm just randomly searching. Thanks bud

Freelancer

[brothercake]

I don't know; I can't find it now either

[Freelancer]

Thanks for trying. If you ever find it I'd love to get my hands on it and vice versa. Feel free to email me and will also.

sectura@cox.net

thx