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

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?

HTML Code:

<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?

HTML Code:

<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

ActionScript Code:

<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','src','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>

10-01-2001, 09:41 PM	#1
azik Registered User Join Date: Oct 2001 Posts: 1	Flash & HTML Layers 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>

10-02-2001, 01:52 AM	#2
Jesse Administrator Join Date: Nov 2000 Location: Australia Posts: 8,612	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! __________________ Cheers Jesse Stratford ActionScript.org Cofounder Email: presented in this way to stop spam-bots: My email is composed of my first name (jesse) followed by my last name (stratford) followed by @ followed by actionscript.org Please don't email or PM me Flash questions, that's what the Forums are for! Please don't rely on me reading my PMs either. Email me about important stuff.

08-01-2006, 06:16 AM	#3
digs Registered User Join Date: Aug 2006 Posts: 1	Layer problem 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

09-13-2006, 06:10 PM	#5
pixel8or Registered User Join Date: Sep 2006 Posts: 1	Flash below javascript menus 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 Hope that helps!

07-24-2007, 04:46 PM	#7
timtastic Registered User Join Date: Jun 2004 Posts: 5	Solution for Firefox 2.0 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? HTML Code: <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>


<a href='http://d1.openx.org/ck.php?n=ac86e9f0&cb=INSERT_RANDOM_NUMBER_HERE' target='_blank'><img src='http://d1.openx.org/avw.php?zoneid=36053&source=_blank&cb=INSERT_RANDOM_NUMBER_HERE&n=ac86e9f0' border='0' alt='' /></a>

08-11-2006, 04:39 PM	#4
data2000 Registered User Join Date: Aug 2006 Posts: 1	Did you fix it? Hi digs, i have the similar problem, did you find the solution?

Thread Tools
Show Printable Version Email this Page
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
one template, many looks?	subquark	ActionScript 1.0 (and below)	1161	09-03-2009 04:45 PM
Flash, JavaScript and the HTML DOM (dHTML)	drZoode	HTML and JavaScript	10	08-21-2008 07:59 PM
[Q] Do we need those forums???	CyanBlue	General Chat	59	07-27-2004 12:13 PM
Flash MX Developers Exam	VitiminJ	General Chat	34	05-05-2004 02:27 PM
opening flash from html links	dotfoil	ActionScript 1.0 (and below)	3	06-10-2003 09:48 PM