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
Solved

How to make Flash transparent in all browsers with swfobject?

Posted on 2010-09-11
3
397 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
  • 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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
jQuery Sticky Menu 24 35
Html form and modal / img src -problem 3 28
Responsive Font Size 6 25
really easy css change help please 4 17
This article discusses how to create an extensible mechanism for linked drop downs.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
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 receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

808 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