Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

How to make Flash transparent in all browsers with swfobject?

Posted on 2010-09-11
3
Medium Priority
?
403 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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

688 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