A Flash Developer Resource Site

Results 1 to 6 of 6

Thread: Inserting Flash on Layer

Hybrid View

  1. #1
    Getting Better With Time
    Join Date
    Jun 2001
    Location
    Canada
    Posts
    54

    Inserting Flash on Layer

    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 }
    Attached Files Attached Files
    ____________________________
    Greg White
    http://www.prestigeinteractive.com

  2. #2
    Senior Member
    Join Date
    May 2007
    Posts
    266
    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.
    Last edited by sticks464; 10-30-2007 at 12:30 PM.

  3. #3
    Senior Member
    Join Date
    May 2007
    Posts
    266
    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.

  4. #4
    Getting Better With Time
    Join Date
    Jun 2001
    Location
    Canada
    Posts
    54

    Flash and CSS - placing on a layer

    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
    ____________________________
    Greg White
    http://www.prestigeinteractive.com

  5. #5
    Senior Member
    Join Date
    May 2007
    Posts
    266
    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.

  6. #6
    Getting Better With Time
    Join Date
    Jun 2001
    Location
    Canada
    Posts
    54

    It's working...

    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
    ____________________________
    Greg White
    http://www.prestigeinteractive.com

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center