Solved

How to make Flash transparent in all browsers with swfobject?

Posted on 2010-09-11
3
401 Views
Last Modified: 2012-05-10
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
Comment
Question by:Aspirin99
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 1

Expert Comment

by:maxxerific
ID: 33653870
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
 
LVL 1

Author Comment

by:Aspirin99
ID: 33653892
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
 
LVL 1

Accepted Solution

by:
Aspirin99 earned 0 total points
ID: 33656313
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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The goal of the tutorial is to teach the user how to how to record live broadcast.
The goal of the tutorial is to teach the user how to select which audio input to use. Once you have an audio input plugged into the laptop or computer, you will go into the audio input settings and choose which audio input you want to use.

631 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question