Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 407
  • Last Modified:

How to make Flash transparent in all browsers with swfobject?

My Flash is only transparent in Firefox. How can I make it cross-browser compatible, and still get the absolute positioning with Flash on top of the background image?  

Here's a link to the page where I'm testing this:

http://www.cowfly.com/test/kb/

Here's my code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Kenny Bellew's Personal Website</title>
            
            <script type="text/javascript" src="swfobject.js"></script>

<link rel="shortcut icon" href="images/favicon.ico">

<link href="mysite.css" rel="stylesheet" type="text/css" />

<style type="text/css">
<!--
body {
      background-color: #90260C;
}
-->
</style></head>

<body>

    <div align="center" style="position:absolute; top: 0px;
clear:both; left: 0px; z-index: 0">
<img src="images/background.jpg" alt="background" width="775" height="740" />

</div>


    <div align="center" style="position:absolute; top: 6px;
clear:both; left: 75px; z-index: 4">
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="75" id="myName">
        <param name="movie" value="Name.swf" />
        <param name=”wmode” value=”transparent”>
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="Name.swf" width="300" height="75" id="myName" wmode="transparent">
        <!--<![endif]-->
          <p>Alternative content 1</p>
        <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object>
    </div>

    <div align="center" style="position:absolute; top: 375px;
clear:both; left: 110px; z-index: 5">
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="200" height="300" id="myTypewriter">
        <param name="movie" value="typewriter.swf" />
        <param name=”wmode” value=”transparent”>
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="typewriter.swf" width="200" height="300" id="myTypewriter" wmode="transparent">
        <!--<![endif]-->
          <p>Alternative content 2</p>
        <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object>
    </div>

</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Kenny Bellew's Personal Website</title>
		
		<script type="text/javascript" src="swfobject.js"></script>

<link rel="shortcut icon" href="images/favicon.ico">

<link href="mysite.css" rel="stylesheet" type="text/css" />

<style type="text/css">
<!--
body {
	background-color: #90260C;
}
-->
</style></head>

<body>

    <div align="center" style="position:absolute; top: 0px;
clear:both; left: 0px; z-index: 0">
<img src="images/background.jpg" alt="background" width="775" height="740" />

</div>


    <div align="center" style="position:absolute; top: 6px;
clear:both; left: 75px; z-index: 4">
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="75" id="myName">
        <param name="movie" value="Name.swf" />
        <param name=”wmode” value=”transparent”> 
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="Name.swf" width="300" height="75" id="myName" wmode="transparent">
        <!--<![endif]-->
          <p>Alternative content 1</p>
        <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object>
    </div>

    <div align="center" style="position:absolute; top: 375px;
clear:both; left: 110px; z-index: 5">
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="200" height="300" id="myTypewriter">
        <param name="movie" value="typewriter.swf" />
        <param name=”wmode” value=”transparent”> 
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="typewriter.swf" width="200" height="300" id="myTypewriter" wmode="transparent">
        <!--<![endif]-->
          <p>Alternative content 2</p>
        <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object>
    </div>

</body>
</html>

Open in new window

0
Aspirin99
Asked:
Aspirin99
  • 2
1 Solution
 
maxxerificCommented:
Although you will never get this featuie wokring in 100% of browsers
The fastest/easiest solution is to use the swfobject to embed your .swf file

Get the object here:
http://code.google.com/p/swfobject/

Here is an example of transparency:

<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "200", "100%", "7", "#336699");
so.addParam("quality", "low");
so.addParam("wmode", "transparent");
so.addParam("salign", "t");
so.write("flashcontent");
</script>
0
 
Aspirin99Author Commented:
I've tried to read that documentation page, but it does not have enough information for me to know how to do everything I need to do-- like absolute positioning. My attempts to make it work have failed.

I also haven't found a complete sample of how to use it .  Can you provide an example of how I would change my page?
0
 
Aspirin99Author Commented:
I figured it out. I was previously already using swfobject, but I figured out how to implement it in a way that works in all browsers. See attached.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
		<title>SWFObject 2 dynamic embed multiple SWFs</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<script type="text/javascript" src="swfobject.js"></script>
        <script type="text/javascript">
		var flashvars = {};	
        var params = {};
        params.wmode = "transparent";
		swfobject.embedSWF("typewriter.swf", "myTypewriter", "200", "251", "8", "expressInstall.swf",null, params);
		swfobject.embedSWF("Name.swf", "myName", "300", "75", "8", "expressInstall.swf",null, params);
		</script>
        
<link href="mysite.css" rel="stylesheet" type="text/css" />

<style type="text/css">
<!--
body {
	background-color: #90260C;
}
-->
</style>
</head>


<body>

<div align="center" style="position:absolute; top: 0px; clear:both; left: 0px; z-index: 0">
<img src="images/background.jpg" alt="background" width="775" height="740" />
</div>

<div align="center" style="position:absolute; top: 4px; clear:both; left: 75px; z-index: 0">
<div id="myName">
			<h1>Alternative content - My Name</h1>
			<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
		</div>
</div>

<div align="center" style="position:absolute; top: 380px; clear:both; left: 125px; z-index: 999">

	<div id="myTypewriter">
			<h1>Alternative content - My Typewriter</h1>
			<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
		</div>
        
</div>


</body>
</html>

Open in new window

0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now