html layers above flash, how?

[HotMadras]

Hi there,

Does anyone know if there is a way of getting a html layer (<div> tag) to display on top of a flash movie embedded in the same html file? I'm attempting to build a shopping cart in flash (I know, don't ask!) and I need a reliable way to display the images of products. Since there will be nigh on 1000 products to choose from, I'm not even going to attempt to put them all in movies and since there seems to be no readily apparent way to import an image into flash dynamically based on a variable I've turned my attention to the html/asp side of the equation. I figure that if I can get the pictures to display on top of the flash, I can dynamically display whichever pic I want using the asp that is already present to populate a floating layer with the pic. I tried it and whatever I did, the layer was always behind the flash movie. I've no idea why this should be.

Thanks for any help

 

[TulsaJeff]

You should be able to do this using Dreamweaver layers. Just put the flash on 1 layer and the html on another. Just set the layer depth(Z) in the properties panel according to what you need on top. Ya' Gotta Love It!X-)

 

[HotMadras]

Tried that. For some strange reason the layer still displays behind the flash content. If you want a demo have a look at

http://www.idealnet.co.uk/guestbook2/guestbook.html

Please ignore the page itself, its just a movie I was using as a test. See the sliver of an image on the right hand side? That whole image should be on top.
Take a look at the source. To my mind, that should force the layer above the flash, but it doesn't.

 

[TulsaJeff]

HotMadras

The link is not working for some reason. I will have to fiddle around with it when I get home. Technically..the depth setting of the layer should determine what shows above and beneath. Ya' Gotta Love It!X-)

 

[HotMadras]

Hmm... s'funny, the link works fine for me. Anyway, I'll do a cut and paste job here, so you can see for yourself:

<div id=&quot;flash&quot; style=&quot;z-index: 1&quot;>
<OBJECT classid=&quot;clsid:D27CDB6E-AE6D-11cf-96B8-444553540000&quot; codebase=&quot;[URL unfurl="true"]http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0&quot;[/URL] WIDTH=550 HEIGHT=400>
<PARAM NAME=movie VALUE=&quot;guestbook.swf&quot;><PARAM NAME=quality VALUE=high><PARAM NAME=bgcolor VALUE=#FFFFFF><EMBED src=&quot;guestbook.swf&quot; quality=high bgcolor=#FFFFFF  WIDTH=550 HEIGHT=400 TYPE=&quot;application/x-shockwave-flash&quot; PLUGINSPAGE=&quot;[URL unfurl="true"]http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash&quot;></EMBED>[/URL]
</OBJECT>
</div>
<div id=&quot;layer1&quot; style=&quot;position: absolute; left: 400px; top: 140px; z-index: 2&quot;>
<img src=&quot;me.jpg&quot;>
</div>

Apologies for the formatting, this is copied straight from Dreamweaver. Essentially the only parts that are important are the <div> tags. They look right to me, how about you?

 

[oldnewbie]

Don't know anything about Dreamweaver or if Dreamweaver's layers are any different than &quot;regular&quot; layers (which would really surprise me!), but it remains very hard to lay anything over an embedded object as the Flash player. I've experienced the same problem with the embedded RealPlayer... The only way I have managed to lay another div over that player (should be the same with the Flash player) is sort of clipping it(wiping it from left to right for example) while I move the other div over it following the same movement pattern.

Why not have your floating pictures along the side of a smaller Flash movie, using tables or a frameset. You could easily (relatively) design the whole thing so that the the pictures look like they're integrated in the Flash movie, but really aren't. Divs work fine when not trying to cover up the player.

I think the problem comes from the fact that these players use DirectX or ActiveX or one of those Xs... That's why you cannot overwrite them.

;-)

 

[onlima]

hi there,

man its is difficult case combine flash and html,
i alredy tried this, withuot sucess.
tri to use the options of layer (div, span, layer or ilayer),some of them must work.
if not try to make flash exact in the dimension you need...
or...ask god!

 

[HotMadras]

Thanks guys. Not sure what I'll do, but at least I know what I was trying ain't going to work!

Thanks again.

 

[blended]

It is possible to use flash for all of this (including the asp forms and such). It'really tricky, but it works fine. Since you're already using flash for part of it (i.e., you have to have the flash player) you may as well try to do the whole thing in flash. DIvisions and layers can wreck havoc on site by displaying way too wrong on various platforms and browsers. Check out the book Flash 5 magic for ways on how to implement database interaction into flash 5. It's a wonderful resource, and then all you'd have to do is have a new movie load into a layer or target instead of trying to get an html page to do the same thing. Good luck.

Blended

 

[oldnewbie]

Hot,
While playing around with something else... Just managed to overlay a division over an embedded Flash movie. One drawback... It only works with IE! For now at least!
Should I pursue? And keep you posted?

;-)

 

[HotMadras]

Thanks,

If you could let me know what you did, that would be great.

And to Blended, I am already doing database interaction with this movie. The problem is that I can't dynamically change an image displayed as part of the movie based on a value in the database. It's fine with text. I can assign variables to those and send information from the database to those variables. I can't do that with images. As far as I can see, they have to be defined before the movie is published and can't be redefined later. If anyone knows any different I'd love to hear about it.

 

[Guest_imported]

make an era from the swf transparent! so you can display the images below it. that way, it'll work.

 

[HotMadras]

I've managed to get the pic to display by setting the window mode property in the html options in flash to transparent and putting the pic on a layer beneath the movie. It also seems to work if the pic layer is on top of the movie. Unfortunately this only works in IE (I suspect this may be what you discovered oldnewbie). At least its a step in the right direction.

What puzzles me is why I can put the image on top with the transparency set (which, if the pic is on top anyway shouldn't make any odds) but not without. Curious.

I may use this as a solution for the time being, until something better presents itself.

Thanks for all the hints guys, if you discover anything else please let me know. I'd especially like to hear of anything that works in Netscape.

 

[Palisadian]

I have successfully layered several .swf files but they display in IE exact opposite from Netscape.

Anyone play with that idea?

 

[oldnewbie]

Hot,

Yeah! That's exactly what I discovered. And I too am puzzled as to why setting the swf to transparent, allows me to show a gif that's in a layer on top (z-index) of that movie. Very curious.

As for NS maybe a combination of the <layer> & <ilayer> tags would work...

;-)

 

[HotMadras]

oldnewbie,

I think the transparency thing probably has something to do with the way IE deals with the movie. I suspect it's probably little more than a hack of the original (opaque) version, something like:

if transparent then
   deal with it this way (hack, slash, rape, pillage etc)
else
   do it the old way

Still, if Netscape had the forethought to implement such a hack my problem would be solved now!

I'll look into the implications of doing it with NS specific layers and see how that works out. For the time being I'll put up with what I've got. The client will be viewing it in IE anyway, which, while technically unethical I suppose, gives me the full development time of the shopping cart to find an alternative for Netscape and friends.

Is it just me or are customers harder to please these days? There was a time when they'd be happy with a little page with a few pictures on. Ah, those were the days! Still, I guess it's more fun this way!

 

[raymondbirch]

Read my FAQ on Flash & Layers....it might help you

http://www.tek-tips.com/faqs.cfm?spid=770&sfid=1009&CFID=17428636&CFTOKEN=99494503