I can't figure out if this is a flash or browser issue..
I've created a .swf with a red shape. The alpha of the red shape is only 20%, making the shape very light red.
On top of the red shape is a picture and some text.
My problem appears when I try fading this .swf in and out using CSS... (The following testresults are from a PC):
I can easily fade my .swf in and out in Opera, Firefox and Chrome, but when I try the same in Internet Explorer and Safari it seems like a dark backgroundcolor is automatically added to the Flash making it very dark red / brown.
The .swf is embedded in HTML using wmode: transparent as this Flash later needs to be put on top of other graphics.
Here is the link to a test page:
http://test.co3.dk/damngood/flash/default.html
Here you can see the difference when the .swf is fully faded in in Firefox and Explorer:
It's the version on the left we like :)
How can I avoid the .swf from getting that auto-generated background in Internet Explorer and Safari?
Here's the HTML-code for the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Flash</title>
<style type="text/css">
html,body{background:#FFC;}
#flashArea_2_container{background:transparent;height:500px;width:300px;}
#flashArea_2{background:transparent}
</style>
<script type="text/javascript" src="http://jscripts.s3.co3.dk/jquery.min.js"></script>
<script type="text/javascript" src="http://jscripts.s3.co3.dk/swfobject/v2.2/swfobject.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#btn1").click(function(){
jQuery("#flashArea_2_container").animate({opacity:"1"}, 900);
});
jQuery("#btn2").click(function(){
jQuery("#flashArea_2_container").animate({opacity:"0"}, 300);
});
});
</script>
</head>
<body>
<button id="btn1">Show flash</button>
<button id="btn2">Hide flash</button>
<div id="flashArea_2_container">
<div id="flashArea_2"></div>
</div>
<script type="text/javascript">
swfobject.embedSWF("Flash_top.swf", "flashArea_2", "100%", "100%", "9.0.0", false, {}, {wmode:"transparent"}, {id:"flashArea_2"});
</script>
</body>
</html>
Abonnér