PDA

View Full Version : Flash & HTML Layers

azik
10-01-2001, 09:41 PM
I'm trying to make a flash interface that will show over a webpage (any HTML document) even when browsing any other site. I'have found a solution but it seems something isn't right.

I'm doing the following thing (it was tested in IE 5.5):
- creating a floating frame <ilayer> with a low z-index
- creating a layer with flash (wmode transparent) with a high z-index
Then I just have to change the URL of the floating frame and everything works perfect. Flash shows over any HTML.

The problem beggins when a page with a java applet or othe flash is loaded into the floating frame. Then this loaded flash or java shows over my flash, while the rest is still under (like it's supposed to be).

Any idea how to make this work? Mabe some other solutions of this problem?

Mic.

Here is the HTML for referenc:

<style type="text/css"> #floatframe {position:absolute; left: 0px; top: 0px; width: 800px; height: 600px; z-index: 1 }</style>
[...]
<div id="floatframe" style="left: 0px; top: 0px; z-index: 1"> <iframe width="800" height="600" name="_window" src="http://www.google.com" align="left" frameborder="0"><iframe> </div>
[...]
<div id="Layer1" style="position:absolute; left:0px; top:0px; width:800px; height:600px; z-index:100">
<OBJECT>
[...flash stuff... wmode transparent...]
</OBJECT>
</div>
Jesse
10-02-2001, 01:52 AM
Macromedia's own site removed Flash on pages with DHTML layers and ackowledged that the Flash Player has the highest Z-Index and cannot be superimposed by another layer. We recently saw a site which did it beautifully though: www.orange.co.uk . Don't ask me how!
digs
08-01-2006, 06:16 AM
Hi people..
I have a similar problem please view www.goodtimesociety.com
what the problem is, i have a menu bar which is a java script running on the side with buttons promotions, funstuff goodtimes, etc.
well it sits under the flash layer, i need the java script button to sit on top of the flash, is there a way to do this, any code i need to put infront of the script?

Please help me, as i can't find the problem to this.

Cheers.
digs
data2000
08-11-2006, 04:39 PM
Hi digs, i have the similar problem, did you find the solution?
pixel8or
09-13-2006, 06:10 PM
One solution to the above, would be to set the background of the flash file to transparent via the wmode parameter.

Great explanation of the above is available here:
Adobe Tech Note (http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_14201)

Hope that helps!
timtastic
07-24-2007, 04:19 PM
The following works with IE but not Firefox. Does anyone have a solution for the latter?

<style type="text/css"> #floatframe {position:absolute; left: 20px; top: 10px; width: 800px; height: 600px; z-index: 1 }</style>
<script type="text/javascript" language="JavaScript" src="swfobject.js"></script>
</head>
<body>
<div id="floatframe"> <iframe width="800" height="600" name="_window" src="http://www.google.com" align="left" frameborder="0"></iframe></div>

<div id="flashcontent" style="position: absolute; top: 0px; left: 0px; z-index: 100)"></div>
<script type="text/javascript">
var so = new SWFObject("content.swf", "mymovie", "600", "600", "8", "#FFFFFF");
so.addParam("wmode", "transparent");
so.write("flashcontent");
</script>
timtastic
07-24-2007, 04:46 PM
On a lark I completely removed the iframe from its own div layer and sat it right in the page. It works amazingly on both browsers.

Now I am running into the problem azik was having with displaying the "top" flash over other flash content that loads inside the iframe. It seems that whenever flash redraws a piece of either movie it causes that redrawn region to pop up to the forefront. The only way I can think of to fix this is to cause my "top" flash to force a full redraw on enterFrame but obviously I'm hoping for a better solution. Does anyone have one?


<head>
<script type="text/javascript" language="JavaScript" src="swfobject.js"></script>
</head>
<body>
<div id="flashcontent" style="position: absolute; top: 0px; left: 0px; z-index: 100)"></div>
<script type="text/javascript">
var so = new SWFObject("content.swf", "mymovie", "100", "100", "8", "#FFFFFF");
so.addParam("wmode", "transparent");
so.write("flashcontent");
</script>
<iframe width="800" height="600" name="_window" src="http://www.google.com/" align="left" frameborder="0"></iframe>
</body>
reynoldsdesign
08-31-2007, 03:53 PM
Here is another solution to the problem

this is using adobe's AC_RunActiveContent.js file

<div class="ads">
<div class="holder">
<div class="flashLayer" style="position:absolute; z-index:0;"><script type="text/javascript">AC_FL_RunContent('codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0','width','555','wmode' ,'transparent','height','115','align','middle','sr c','images/ads/87570-banner','quality','high','name','images/ads/87570-banner','background-color','#457BA5','allowscriptaccess','sameDomain', 'pluginspage','http://www.macromedia.com/go/getflashplayer','movie','images/ads/87570-banner' );</script></div>

<div class="imageLayer" style="position:absolute; display:block; z-index:1;"><a href="#"><img src="images/clear.gif" alt="" /></a></div>
</div>
</div>