Inserting Flash on Layer

**prestigeinteractive** · 10-30-2007, 12:58 AM

Hi there,

I am making a site for a friend, and have been working with CSS. I want to have a logo on the top corner of the page with some simple links running horizontally. Anyways, this is not the problem. I have set up the site's basic layout, however, in the content portion of the site, I want to have a flash movie play beneath the logo. I have tried a number of things with z-index etc. but it has not worked. I am not sure what to do next. I would love if someone could help me make the right adjustments.

Thanks for your help,

Greg

-----------

Here's the HTML for the page and the CSS content is below that:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vida Doce Chocolates</title>

<!--Stylesheet attached -->
<link href="css_scripts/vida_doce.css" rel="stylesheet" type="text/css" />

<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>


<body>
<div align="center">

<!--Wrapper for the Site -->
<div id="wrapper">

<!--Site Header -->
<div id="header"></div>
	<!--Site Navbar -->
	<div id="navbar">
    | <a href="index.html" class="nav_buttons">MAIN </a> | <a href="creations.html" class="nav_buttons">CREATIONS</a> | <a href="contact.html" class="nav_buttons">CONTACT</a> |	</div>
    	<!--Site Content -->
  <div id="content">
  <div align="center">
    <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','780','height','305','align','left','title','aaa','src','images/flash_files/aaa','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','images/flash_files/aaa' ); //end AC code
    </script>
    <noscript>
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="780" height="305" align="left" title="aaa">
      <param name="movie" value="images/flash_files/aaa.swf" />
      <param name="quality" value="high" />
      <embed src="images/flash_files/aaa.swf" width="780" height="305" align="left" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"></embed>
    </object>
    </noscript>
  </div>
  </div>
<!--Site Footer -->
            <div id="footer">
            			<!--Insert Email -->
                        <div id="email_address"><a href="mailto:vidadoce@mountaincable.net">vidadoce@mountaincable.net</a></div>
                        <div id="phone_number">905-765-0488</div>
            </div >
</div>
</div>
</body>
</html>

CSS Content

Code:

@charset "utf-8";
/* CSS Document */

body { 
	text-align: center;
	background-image:url(../images/backgrounds/vida_brown_stripe.gif);
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#c90;
	margin:0
}


#wrapper {
	 position:absolute;
     left: 50%; 
     top: 50%;
     width: 780px;
     height: auto;
     margin-top: -200px; /* half of the height */
     margin-left: -390px; /* half of the width */
 	}
	
#header {
	text-align:left;
	background-image:url(../images/logo/vida_logo2.png);
	background-repeat:no-repeat;
	margin:0 0 0 -10px;
	position:absolute;
	z-index:9;
	top:-33px;
	left:-27px;
	width: 378px;
	height: 310px;
}



#navbar {
	text-align:left;
	color:#c90;
	margin-left: 47%;
}

.nav_buttons {
	padding-left:3px;
	padding-right: 3px;
	}


#content {
	text-align:left;
	height:305px;
	border-style: solid none;
	border-top-width:4px;
	border-top-color: #c90;
	background-color:#FFFFFF;
	padding:10px;
	z-index:1;
	position:relative;
}

.blurb_main {
	color:#630;
	margin-top: 4%;
	margin-left:47%;
	margin-right:5%;
	}
	
.blurb_contact {
	color:#630;
	margin-top: 2%;
	margin-left:47%;
	margin-right:5%;
	}


#email_address{
	width:50%;
	color:c90;
	text-align:left;
	float:left;
	}



#phone_number {
	width:50%;
	color:c90;
	text-align:right;
	float:left;
	}

#footer {
	text-align:left;
}


a:link { color: #c90; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none }


a:visited { color: #c90; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none }


a:hover { color: #fc0; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none }


a:active { color: #c90; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none }

**sticks464** · 10-30-2007, 12:13 PM

For some reason it won't let me attach a script...so...go here and download the swfobject script file. Save it to the scripts folder.
Put this link in your head section and remove the link to the AC_RunActiveContent.js.

Code:

<script type="text/javascript" src="scripts/swfobject.js"></script>

Remove

Code:

<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','780','height','305','align','left','title','aaa','src','images/flash_files/aaa','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','images/flash_files/aaa' ); //end AC code
    </script>
    <noscript>
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="780" height="305" align="left" title="aaa">
      <param name="movie" value="images/flash_files/aaa.swf" />
      <param name="quality" value="high" />
      <embed src="images/flash_files/aaa.swf" width="780" height="305" align="left" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"></embed>
    </object>
    </noscript>

Insert

Code:

<script type="text/javascript">
   var so = new SWFObject("images/flash_files/aaa.swf", "AAA", "760", "305", "6", "");
   so.addParam("quality", "high");
   so.addParam("wmode", "transparent");
   so.write("content");
</script>

I just checked IE6 and the background png is not transparent like FF and IE7.
But the above code works in FF and IE7 and the png show as being transparent.

**sticks464** · 10-30-2007, 04:55 PM

I just had a chance to check the background png. It is a png-32 which will not work in IE 6 or earlier (only 7 recognizes the png-24 or 32 format). I saved it as a png-8, the edges are ragged but it will work in IE6 and 5.5. You might try saving it as a transparent gif but I don't think it will look as good as the png.

**prestigeinteractive** · 10-30-2007, 07:08 PM

Hey there,

Thanks for the help so far. It is so close to working. I have it working in FireFox, however, IE crashes as soon as it loads. I am not sure why that is occurring. I downloaded the js file you mentioned and placed it in my scripts folder. I referenced the link to the js file in the head. I altered the SWF script as per your request, but now it crashes IE.

I would love to hear your suggestions, as this is now beyond my understanding. I usually need to see something working to figure it out and apply it later.

Thanks again,

G

**sticks464** · 10-30-2007, 07:36 PM

Your code should look like this

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vida Doce Chocolates</title>

<!--Stylesheet attached -->
<link href="css_scripts/vida_doce.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/swfobject.js"></script>

</head>


<body>
<div align="center">

<!--Wrapper for the Site -->
<div id="wrapper">

<!--Site Header -->
<div id="header"></div>
	<!--Site Navbar -->
	<div id="navbar">
    | <a href="index.html" class="nav_buttons">MAIN </a> | <a href="creations.html" class="nav_buttons">CREATIONS</a> | <a href="contact.html" class="nav_buttons">CONTACT</a> |	</div>
    	<!--Site Content -->
  <div id="content">
  <div align="center"></div>
  <script type="text/javascript">
   var so = new SWFObject("images/flash_files/aaa.swf", "AAA", "760", "305", "6", "");
   so.addParam("quality", "high");
   so.addParam("wmode", "transparent");
   so.write("content");
</script> 
  </div>
<!--Site Footer -->
            <div id="footer">
            			<!--Insert Email -->
                        <div id="email_address"><a href="mailto:vidadoce@mountaincable.net">vidadoce@mountaincable.net</a></div>
                        <div id="phone_number">905-765-0488</div>
            </div >
</div>
</div>
</body>
</html>

Don't know why it would crash IE. I tested it in IE7, 6 and 5.5.

**prestigeinteractive** · 10-30-2007, 09:13 PM

Hey there,

You are the most helpful person I have come across in a long time.
I tried to find where the code was messed up...but couldn't find it.

Thanks for your time. It is greatly appreciated.

Have a great day,

G

Thread: Inserting Flash on Layer

Thread Tools

Display

Inserting Flash on Layer

Flash and CSS - placing on a layer

It's working...

Posting Permissions