Copy link to clipboard
Copied
For the life of me, I can't figure out how to make my swf transparent in IE. I've tested in Firefox, Opera, Safari, and Chrome on Windows 7 and it works fine, but in IE it is showing a black opaque background. I've seen the same issue on Safari on the Mac.
I now have 3 different variations of the code on the page, all 3 variations being transparent in Firefox, Opera, Safari, and Chrome on Windows 7, and all 3 variations NOT being transparent in Internet Explorer.
For 'attempt 2', I'm using swfobject which in theory should generate the correct code.
Page link is http://www.bikramyogabrighton.com/index_test_swf.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test page</title>
</head>
<body style="background-color:#CC6633;">
<!--
ATTEMPT 1
-->
<object width="450" height="375">
<param name="movie" value="flash/sun.swf">
<param name="wmode" value="transparent" />
<embed src="flash/sun.swf" width="450" height="375" wmode="transparent"/></embed>
</object>
<!--
ATTEMPT 2
-->
<script type="text/javascript" src="/js/swfobject/swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myFlashSun", "10.3.0", "/js/swfobject/expressInstall.swf");
</script>
<div id="flashsun">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="450" height="375" id="myFlashSun">
<param name="movie" value="flash/sun.swf" />
<param name="wmode" value="transparent" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="flash/sun.swf" width="450" height="375">
<param name="wmode" value="transparent" />
</object>
<!--<![endif]-->
</object>
</div>
<!--
ATTEMPT 3
-->
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="450" height="375" id="navigation">
<param name="wmode" value="transparent" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="flash/sun.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" />
<embed src="flash/sun.swf" quality="high" bgcolor="#000000" width="450" height="375" name="start" allowscriptaccess="sameDomain" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
</html>
Any help much appreciated.
Copy link to clipboard
Copied
Looks exactly the same in IE or FF to me.... tested on 2 different machines, Windows Vista on one, Windows XP on another.
Adninjastrator
Copy link to clipboard
Copied
Hi adninjastrator,
Thanks for taking the time to look at this.
When you say they are exactly the same, do you mean they all have the opaque black background? Or transparent with the page background color showing through?
Can you see what might be wrong with my code? Or is it possible that the SWF itself could have some wrong setting?
Cheers,
b
Copy link to clipboard
Copied
All 3 examples seem to render just fine in IE and FF.
See comparison photo:
http://www.cidigitalmedia.com/web_devel/background.jpg
If not working for you, try clearing your cache to remove any old, non working versions.
Test on some other machine besides yours.
Code looks fine and seems to work.
Best wishes,
Adninjastrator
Copy link to clipboard
Copied
Hi Adninjastrator,
I tried clearing the cache and making sure I was using the latest version. Even so, I'm still seeing the opaque background on Internet Explorer version 9 on Windows 7 64bit and on Safari on the Mac OS X Lion.
I'm wondering if it might be the swf itself. I guess the next step is to check another transparent swf in the same page and see what kind of results I get. I can't see what's wrong with the code, so it might somehow be the swf.
Thanks mucho, Adninjastrator. I appreciate your effort in helping me thus far.
Cheers,
b
Copy link to clipboard
Copied
I have the exact same problem and I can reproduce it. It came with the new Flash Version 11.0.1.152.
Apparently if you put a php or html file in an iframe you will get problems (black background) with Flash 11, IE 8 and IE 7, wmode=transparent.
The .php/.html-file is loaded with a javascript jQuery function into the iframe, the iframe is made visible, gets a height and width with an animation(everything is done over the jQuery function) and it is packed into quite alot of tags so it is hard to find out where the error lies.
Just putting a .html into an iframe with normal javascript doesn't seem to cause this issue.
IE 9 and other Browsers don't have this problem.
If I look at b3vegans HTML, it will show everything correctly in IE 8, which means, since I don't have the .swf-files, that the only thing I see is the orange background of the HTML-Body. But if I load it in my .php in an iframe the black boxes appear where the flashes would be.
EDIT: So I found now the issue for me. The jQuery function .animate, seems to make the background black for transparent flashes inside the enlarging html-container. Also it seems like the only thing hurting the flashes is the "width" and "height" altering parts.
Cheers,
Khazar
Copy link to clipboard
Copied
Please vote to fix this issue:
https://bugbase.adobe.com/index.cfm?event=bug&id=3019125
https://bugbase.adobe.com/index.cfm?event=bug&id=3017111
https://bugbase.adobe.com/index.cfm?event=bug&id=3018116
Notes:
1- Using Internet Explorer 9 + Flash Latest Version (11,0,1,152)= Problem with Flash (Transparent become Black)
2- Using Internet Explorer 9 + Flash Older Version (10,3,162,28)= Flash is OK
3- Using Internet Explorer 8 + Flash Latest Version (11,0,1,152)= Flash is OK
Copy link to clipboard
Copied
Everything worked perfect on my own websites (http://www.idle-city-else.org) untill I was forced to install IE9 on my main computer. Maybe we should ask the whizzkids of Microsoft to fix the problem?
Copy link to clipboard
Copied
You need to add the wmode="transparent" parameter for IE. I stuck it after the height/width parameter and worked in IE 9