A Flash Developer Resource Site

Results 1 to 17 of 17

Thread: SWFObject embed

  1. #1
    Senior Member
    Join Date
    Apr 2001
    Posts
    996

    SWFObject embed

    I'm trying to get my embed code to center the flash stage in the center of the browser with no space at the top of the browser. The code I have below just keeps it left aligned. Can anyone tell me why the style is not working.

    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>
    		<title></title>
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    		<script type="text/javascript" src="assets/js/swfobject.js"></script>
            <style type="text/css">
    	
    		body {
    			background-color: #ffffff;
    			font: .8em/1.3em verdana,arial,helvetica,sans-serif;
    		}
    
    		#flashcontent {
    			//border: solid 1px #CCC;
    			width: 920px;
    			height: 644px;
    			margin: 0 auto;
    		}
    
    		</style>
    	</head>
    	<body>
    		<div id="flashcontent">
    			<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>
    		</div>
            <script type="text/javascript">
    			var flashvars = {};
    			flashvars.xmlPath = "assets/XML/main.xml";
    			var params = {};
    			params.quality = "best";
    			params.bgcolor = "#ffffff";
    			params.allowscriptaccess = "always";
    			var attributes = {};
    			attributes.id = "flashcontent";
    			swfobject.embedSWF("Main.swf", "flashcontent", "920", "644", "9.0.45", "expressInstall.swf", flashvars, params, attributes);
    		</script>
    	</body>
    </html>

  2. #2
    Senior Member
    Join Date
    May 2008
    Posts
    332
    Code:
    body {
    	border: 0px;
    	margin: 0px;
    	padding: 0px;	
    }
    #main_container {
    	width: 1000px;
    	height: 550px; 
    	border:none;
    	padding: 0px;
    	margin-left: auto;
    	margin-right: auto;
    }
    Will remove space at top and center content. Of course you'll need to add any other style to body or main_container that you need and set width/height as needed.
    Best wishes,
    Eye for Video
    www.cidigitalmedia.com

  3. #3
    Senior Member
    Join Date
    Apr 2001
    Posts
    996
    Thanks for your reply but I'm not seeing how that would work with my code.
    Is main_container the same as what I have as my ID name "flashcontent" or is this a completely separate div tag? It would be great if you could explain how I could use this in conjunction with my code.

  4. #4
    Senior Member
    Join Date
    May 2008
    Posts
    332
    You could rename main_container to flashcontent or use main_container as a wrapper container if you have a number of other <div>s on the same page.
    Various browser have different default padding and margins so it's a good idea to zero those things out from the very beginning to handle those cross browsers differences.
    Best wishes,
    EfV

  5. #5
    Senior Member
    Join Date
    Apr 2001
    Posts
    996
    I just tried adding your code and it still does not center the flash on the browser.

    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>
    		<title></title>
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    		<script type="text/javascript" src="assets/js/swfobject.js"></script>
            <script type="text/javascript" src="assets/js/swfaddress.js"></script>
            <style type="text/css">
    	
    		body {
    			border: 0px;
    			margin: 0px;
    			padding: 0px;	
    			background-color: #ffffff;
    			font: .8em/1.3em verdana,arial,helvetica,sans-serif;
    		}
    
    		#flashcontent {
    			//border: solid 1px #CCC;
    			width: 920px;
    			height: 644px;
    			border:none;
    			padding: 0px;
    			margin-left: auto;
    			margin-right: auto;
    		}
    
    		</style>
    	</head>
    	<body>
    		<div id="flashcontent">
    			<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>
    		</div>
            <script type="text/javascript">
    			var flashvars = {};
    			flashvars.xmlPath = "assets/XML/main.xml";
    			var params = {};
    			params.quality = "best";
    			params.bgcolor = "#ffffff";
    			params.allowscriptaccess = "always";
    			var attributes = {};
    			attributes.id = "flashcontent";
    			swfobject.embedSWF("Main.swf", "flashcontent", "920", "644", "9.0.45", "assets/SWF/expressInstall.swf", flashvars, params, attributes);
    		</script>
    	</body>
    </html>
    Thanks

  6. #6
    Senior Member
    Join Date
    May 2008
    Posts
    332
    Copy and paste into new html page:
    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=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    body {
    	border: 0px;
    	margin: 0px;
    	padding: 0px;	
    }
    #flashcontent {
    	width: 1000px;
    	height: 550px; 
    	background-color: #320d07;
    	border:none;
    	padding: 0px;
    	margin-left: auto;
    	margin-right: auto;
    }
    -->
    </style>
    </head>
    
    <body>
    <div id="flashcontent">
    </div>
    </body>
    </html>
    Centers in IE, FF, & Safari
    Edit to suit your needs
    Best wishes,
    EfV

  7. #7
    Senior Member
    Join Date
    Apr 2001
    Posts
    996
    This is exactly what I had posted just above your previous post. IF you try adding my SWFObject it still stays to the left of the page and does not center horizontally when scaling the browser.

  8. #8
    Senior Member
    Join Date
    May 2008
    Posts
    332
    Try putting:
    Code:
    <script type="text/javascript">
    			var flashvars = {};
    			flashvars.xmlPath = "assets/XML/main.xml";
    			var params = {};
    			params.quality = "best";
    			params.bgcolor = "#ffffff";
    			params.allowscriptaccess = "always";
    			var attributes = {};
    			attributes.id = "flashcontent";
    			swfobject.embedSWF("Main.swf", "flashcontent", "920", "644", "9.0.45", "expressInstall.swf", flashvars, params, attributes);
    		</script>
    inside the <div>, so move closing tag </div> below script. Right now it's outside and not controlled by CSS
    Best wishes,
    EfV

  9. #9
    Senior Member
    Join Date
    Apr 2001
    Posts
    996
    I already tried that but it didn't make a difference.

  10. #10
    Senior Member
    Join Date
    May 2008
    Posts
    332
    Did you put a background color like #00ff00 in the "flash content"? Be sure that sticks out like a sore thumb for testing. Does that div show up as centered?
    When you add the Flash, is it inside or outside that green rectangle (flash content)?
    EfV

  11. #11
    Senior Member
    Join Date
    Apr 2001
    Posts
    996
    My Flash movie has a background that stands out. The DIV shows up as all the way to the left of the browser.

  12. #12
    Senior Member
    Join Date
    May 2008
    Posts
    332
    Comment out all content of flashcontent except:
    Code:
    <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>
    This should show centered <div> with small Adobe image in top left of <div>.
    See photo
    Do you see the same thing?
    EfV
    Attached Images Attached Images

  13. #13
    Senior Member
    Join Date
    Apr 2001
    Posts
    996
    Thanks Eye for Video that's great but the idea here is to be able to put content into the div like flash and if flash is not installed then alternative html content.
    I understand that your div tag will center but when the flash object is placed in there it does not. Maybe someone can let me know why this is happening.

    Thanks again.

  14. #14
    Senior Member
    Join Date
    May 2008
    Posts
    332
    Yeah sorry I couldn't be more help, but I do understand the idea of inserting Flash and alt content into the <div>. The principle being that the CSS has to work before you attempt to insert the Flash.
    I use swfobject and alt html content all the time. Here's just a couple examples of using swfobject and alt content, including a complete text narration to match the Flash video content. That particular alt content was indexed within 4 hours of uploading the page. OH YEAH, I love swfobject! View source to review code, scroll down to
    Code:
      <!-- THIS IS ALTERNATE CONTENT -->
    http://www.cataractvideo.com/
    and
    http://www.uncledoodad.com/06_19_09/06_19_09.html
    So if your CSS is working correctly, your method of using swfobject is the problem.
    Best wishes,
    Eye for Video
    www.cidigitalmedia.com

  15. #15
    Bearded (M|G)od MyFriendIsATaco's Avatar
    Join Date
    Dec 2002
    Location
    Awesomeville.
    Posts
    3,046
    The problem is with how the newer versions of swfObject work. For a little bit of background, v1.x inserted the actual Flash content INSIDE the element you specified, and the newer 2.x code REPLACES the element.

    So the issue is that you're styling the element that is being REPLACED. You need to nest it inside another <div> to actually have it styled properly.
    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>
    		<title></title>
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    		<script type="text/javascript" src="assets/js/swfobject.js"></script>
            <style type="text/css">
    	
    		body {
    			background-color: #ffffff;
    			font: .8em/1.3em verdana,arial,helvetica,sans-serif;
    			margin: 0;
    			padding: 0;
    		}
    
    		#flashcontent {
    			//border: solid 1px #CCC;
    			width: 920px;
    			height: 644px;
    			margin: 0 auto;
    		}
    
    		</style>
    	</head>
    	<body>
    		<div id="flashcontent"><div id="flashcontent_inner">
    			<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>
    		</div></div>
            <script type="text/javascript">
    			var flashvars = {};
    			flashvars.xmlPath = "assets/XML/main.xml";
    			var params = {};
    			params.quality = "best";
    			params.bgcolor = "#ffffff";
    			params.allowscriptaccess = "always";
    			var attributes = {};
    			attributes.id = "flashcontent_inner";
    			swfobject.embedSWF("Main.swf", "flashcontent_inner", "920", "644", "9.0.45", "expressInstall.swf", flashvars, params, attributes);
    		</script>
    	</body>
    </html>
    That extra <div> is just needed to tell swfObject to replace THAT inner object instead of the one you're actually styling. This is technically a feature in 2.x and gives you a bit more flexibility in how your place your Flash objects on the page.

  16. #16
    Senior Member
    Join Date
    Apr 2001
    Posts
    996
    Thanks MyFriendIsATaco I'll give this a try and see how it works. I appreciate all the help from everyone.

    Thanks

  17. #17
    Senior Member
    Join Date
    May 2008
    Posts
    332
    Thanks for clarify this!
    Best wishes,
    EfV

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