PDA

Click to See Complete Forum and Search --> : Centering SWF in HTML...



toddlerner
02-06-2007, 02:39 PM
Hi, how do I center my Flash banner ad in the HTML doc generated by Flash? The code as it now stands is below. Thanks! -Todd

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>banner1</title>
</head>
<body bgcolor="#ffffff">
<!--url's used in the movie-->
<a href="http://www.ToddLernerAdvertising.com/folio/tla_folio_link.html"></a>
<a href="FSCommand:URL1"></a>
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="728" height="90" id="banner1" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="banner1.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><embed src="banner1.swf" quality="high" bgcolor="#ffffff" width="728" height="90" name="banner1" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
</html>

catbert303
02-07-2007, 05:03 AM
First wrap a div element around your movie, something like this,



<div id="wrapper">
<object classid="...
all that other flash embed markup here
</object>
</div>


Now, if you just want the movie to be centred horizontally, you can use the following CSS in the <head> of your page,


<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>banner1</title>
<style type="text/css">
body {
text-align: center; /* for old IE versions */
}
#wrapper {
width: 728px;
margin: 0 auto;
}
</style>
</head>


If you wanted the movie right in the centre of the page (both horizontally and vertically) you could change the css as follows,


<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>banner1</title>
<style type="text/css">
#wrapper {
width: 728px; height: 90px;
position: absolute;
left: 50%; top: 50%;
margin: -45px 0 0 -364px;
}
</style>
</head>

the position top 50%, left 50% stuff will position the div so that it's top left corner is exactly in the centre of the page. The margin stuff nudges the movie up by 45px (half it's height) and left by 364px (half it's width) so that the centre of the movie is in the centre of the page.

toddlerner
02-07-2007, 10:30 AM
wow, that's great! thanks so much. 2 questions:

1) what if i wanted to center it horizontally, and then instead of centering it vertically i just wanted to lower it down a little, let's say lower it about 90 pixels (the height of the banner)?

2) is there a way that i can mark my new code so i'll know what to do for future banner ads?

i really appreciate your help :)
-todd

catbert303
02-07-2007, 12:22 PM
1) Sure, you can do that by adjusting the values of the CSS margin property on your div element


<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>banner1</title>
<style type="text/css">
body {
text-align: center; /* for old IE versions */
}
#wrapper {
width: 728px;
margin: 0 auto;
}
</style>
</head>

The CSS margin controls the amount of space around an element. You can set the values of the margin for each side using the margin-left, margin-right, margin-top and margin-bottom properties, for example,


margin-top: 90px;

would give you 90px of margin above the element.

but better than that is using the margin shorthand. Using the shorthand you can specify values for the margins on each side of the element all in one go (less typing == better :)) it works like this,


margin: 10px;

puts 10px of margin on all sides of the element


margin: 0 auto;

puts zero margin at the top and bottom of the element, and uses an automatic margin on the left and right. Using this automatic margin on the left and right sides is what causes the browser to centre the element horizontally.


margin: 10px 5px 20px;

this would add 10px of margin to the top of the element, 5px to the left and right sides, and 20px to the bottom.

finally if you want to use a different amount of margin on each side of the element,


margin: 1px 5px 10px 20px;

would put 1px of margin on the top of the element, 5px on the right side, 10px on the bottom and 20px on the left side.

So, now, if you want to keep the horizontal alignment of your movie but add some space above it you could use,


<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>banner1</title>
<style type="text/css">
body {
text-align: center; /* for old IE versions */
}
#wrapper {
width: 728px;
margin: 90px auto 0;
}
</style>
</head>

2) You could add some comments into the file to document the changes. In CSS you can write a comment using


/* your comment goes here */

and in HTML you can use,


<!-- your comment -->

Also if you wanted to reuse the same CSS across many pages, instead of placing it in a style element in the head of each page you could put it in a separate file, and then include that.

So you might create a file named banner.css with the CSS in it,


body {
text-align: center;
}
#wrapper {
width: 728px;
margin: 90px auto 0;
}

then in your page you could use,


<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>banner1</title>
<link rel="stylesheet" type="text/css" href="banner.css" />
</head>

toddlerner
02-07-2007, 11:23 PM
how cool! thanks SO MUCH for your great help.

one last thing: how can i wrap a div tag around my LIFE to center my soul? :)

with much appreciation,
-todd

http://www.ToddLernerAdvertising.com

cristi_b_1
02-13-2007, 06:06 PM
sorry, i just wrote a code for centering the entire flash page (i didnt read the "banner"part, thought u were talking about the whole page :D). i deleted it

DreadLoxxzz
11-07-2007, 10:46 AM
I tried the codes above maybe I have a different coding method for my published html coding out of flash publisher, here is what I have:



<!-- saved from url=(0013)about:internet -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>VicRaeIncIntro</title>
<script language="javascript"> AC_FL_RunContent = 0; </script>
<script language="javascript"> DetectFlashVer = 0; </script>
<script src="AC_RunActiveContent.js" language="javascript"></script>
<script language="JavaScript" type="text/javascript">
<!--
// -----------------------------------------------------------------------------
// Globals
// Major version of Flash required
var requiredMajorVersion = 9;
// Minor version of Flash required
var requiredMinorVersion = 0;
// Revision of Flash required
var requiredRevision = 45;
// -----------------------------------------------------------------------------
// -->
</script>
</head>
<body bgcolor="#000000">
<!--url's used in the movie-->
<a href="http://www.myspace.com/vicraeinc"></a>
<!--text used in the movie-->
<!--
<p align="left"></p>
-->
<script language="JavaScript" type="text/javascript">
<!--
if (AC_FL_RunContent == 0 || DetectFlashVer == 0) {
alert("This page requires AC_RunActiveContent.js.");
} else {
var hasRightVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
if(hasRightVersion) { // if we've detected an acceptable version
// embed the flash movie
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,45,0',
'width', '882',
'height', '588',
'src', 'VicRaeIncIntro',
'quality', 'high',
'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'showall',
'wmode', 'window',
'devicefont', 'false',
'id', 'VicRaeIncIntro',
'bgcolor', '#000000',
'name', 'VicRaeIncIntro',
'menu', 'true',
'allowScriptAccess','sameDomain',
'allowFullScreen','true',
'movie', 'VicRaeIncIntro',
'salign', ''
); //end AC code
} else { // flash is too old or we can't detect the plugin
var alternateContent = 'Alternate HTML content should be placed here.'
+ 'This content requires the Adobe Flash Player.'
+ '<a href=http://www.macromedia.com/go/getflash/>Get Flash</a>';
document.write(alternateContent); // insert non-flash content
}
}
// -->
</script>
<noscript>
// Provide alternate content for browsers that do not support scripting
// or for those that have scripting disabled.
Alternate HTML content should be placed here. This content requires the Adobe Flash Player.
<a href="http://www.macromedia.com/go/getflash/">Get Flash</a>
</noscript>
</body>
</html>


view it @
www.vicraeinc.com

Mylander
11-16-2007, 11:18 AM
If you wanted the movie right in the centre of the page (both horizontally and vertically) you could change the css as follows,


<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>banner1</title>
<style type="text/css">
#wrapper {
width: 728px; height: 90px;
position: absolute;
left: 50%; top: 50%;
margin: -45px 0 0 -364px;
}
</style>
</head>

the position top 50%, left 50% stuff will position the div so that it's top left corner is exactly in the centre of the page. The margin stuff nudges the movie up by 45px (half it's height) and left by 364px (half it's width) so that the centre of the movie is in the centre of the page.[/QUOTE]

i tried it and this code soesnt work.
the first version (horizontal centering) works fine.
but the second code (see quote - both axis centered) doesnt ceneter anything.

does someone know why?

sticks464
11-16-2007, 12:22 PM
If you put this code in your head section it will work.


<style type="text/css">
<!--
body {
background:#000;
margin:0;
padding:0;
}
#wrapper {
width:480px;
height:480px;
position:absolute;
left:50%;
top:50%;
margin-top:-240px;
margin-left:-230px;
}
-->
</style>

The reason it does not center well is all the white space on the left and bottom of the movie. Your canvas may be 882px wide and 588 px height but your content is only the size of the width and height of what is set in the wrapper.

Then add this to the body section


<body>/*remove background color, it is set with css*/
<div id="wrapper">/*add this line immediately following the opening body tag*/
script blah blah blah
</div>/*add this ending tag between the noscript ending tag and the body ending tag*/

Mylander
11-16-2007, 01:32 PM
well, it works and i understand it except:
how do i calculate the margin top and left, is my swf is sized 900x600?

:scared:


<style type="text/css">
<!--
body {
background:#424242;
margin:0;
padding:0;
}
#wrapper {
width:900px;
height:600px;
position:absolute;
left:50%;
top:50%;
margin-top:-240px;
margin-left:-530px;
}
-->
</style>

rdoyle720
11-16-2007, 03:17 PM
The margin should be half the width and height of your movie. So if your width is 900, the left margin should be -450px. Your top margin should be -300px.

Mylander
11-17-2007, 12:58 PM
thanks i made it work with a centered table.

this link is helpfull too:


Quote:
Originally Posted by Robb@exo
Take a look at this link. Does a good job of centering both h & v in multiple browsers.

http://d-graff.de/fricca/center.html

Hope this helps. Cheerio.

EXCELLENT LINK!!

sticks464
11-17-2007, 04:09 PM
It not only puts IE5 Mac into quirks mode, it also puts IE Windows into quirks mode due to incomplete doctype.

nikkitranchita
03-24-2011, 11:09 AM
Hello,
I have read and tried all of these posts, but for some reason, I cannot get my SWF to center! I don't know if I'm just missing something stupid or what... Any help/advice would be appreciated! I am pasting ALL of my code, just in case... I am really not sure if I'm putting things in the right place.

Thanks,
Nikki




<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Cuddle Bug Designs</title>
<script language="JavaScript" type="text/javascript">
<!--
//v1.7
// Flash Player Version Detection
// Detect Client Browser type
// Copyright 2005-2008 Adobe Systems Incorporated. All rights reserved.
var isIE = (navigator.appVersion.indexOf("MSIE") != -1) ? true : false;
var isWin = (navigator.appVersion.toLowerCase().indexOf("win") != -1) ? true : false;
var isOpera = (navigator.userAgent.indexOf("Opera") != -1) ? true : false;
function ControlVersion()
{
var version;
var axo;
var e;
// NOTE : new ActiveXObject(strFoo) throws an exception if strFoo isn't in the registry
try {
// version will be set for 7.X or greater players
axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.7");
version = axo.GetVariable("$version");
} catch (e) {
}
if (!version)
{
try {
// version will be set for 6.X players only
axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.6");

// installed player is some revision of 6.0
// GetVariable("$version") crashes for versions 6.0.22 through 6.0.29,
// so we have to be careful.

// default to the first public version
version = "WIN 6,0,21,0";
// throws if AllowScripAccess does not exist (introduced in 6.0r47)
axo.AllowScriptAccess = "always";
// safe to call for 6.0r47 or greater
version = axo.GetVariable("$version");
} catch (e) {
}
}
if (!version)
{
try {
// version will be set for 4.X or 5.X player
axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.3");
version = axo.GetVariable("$version");
} catch (e) {
}
}
if (!version)
{
try {
// version will be set for 3.X player
axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.3");
version = "WIN 3,0,18,0";
} catch (e) {
}
}
if (!version)
{
try {
// version will be set for 2.X player
axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
version = "WIN 2,0,0,11";
} catch (e) {
version = -1;
}
}

return version;
}
// JavaScript helper required to detect Flash Player PlugIn version information
function GetSwfVer(){
// NS/Opera version >= 3 check for Flash plugin in plugin array
var flashVer = -1;

if (navigator.plugins != null && navigator.plugins.length > 0) {
if (navigator.plugins["Shockwave Flash 2.0"] || navigator.plugins["Shockwave Flash"]) {
var swVer2 = navigator.plugins["Shockwave Flash 2.0"] ? " 2.0" : "";
var flashDescription = navigator.plugins["Shockwave Flash" + swVer2].description;
var descArray = flashDescription.split(" ");
var tempArrayMajor = descArray[2].split(".");
var versionMajor = tempArrayMajor[0];
var versionMinor = tempArrayMajor[1];
var versionRevision = descArray[3];
if (versionRevision == "") {
versionRevision = descArray[4];
}
if (versionRevision[0] == "d") {
versionRevision = versionRevision.substring(1);
} else if (versionRevision[0] == "r") {
versionRevision = versionRevision.substring(1);
if (versionRevision.indexOf("d") > 0) {
versionRevision = versionRevision.substring(0, versionRevision.indexOf("d"));
}
}
var flashVer = versionMajor + "." + versionMinor + "." + versionRevision;
}
}
// MSN/WebTV 2.6 supports Flash 4
else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.6") != -1) flashVer = 4;
// WebTV 2.5 supports Flash 3
else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.5") != -1) flashVer = 3;
// older WebTV supports Flash 2
else if (navigator.userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 2;
else if ( isIE && isWin && !isOpera ) {
flashVer = ControlVersion();
}
return flashVer;
}
// When called with reqMajorVer, reqMinorVer, reqRevision returns true if that version or greater is available
function DetectFlashVer(reqMajorVer, reqMinorVer, reqRevision)
{
versionStr = GetSwfVer();
if (versionStr == -1 ) {
return false;
} else if (versionStr != 0) {
if(isIE && isWin && !isOpera) {
// Given "WIN 2,0,0,11"
tempArray = versionStr.split(" "); // ["WIN", "2,0,0,11"]
tempString = tempArray[1]; // "2,0,0,11"
versionArray = tempString.split(","); // ['2', '0', '0', '11']
} else {
versionArray = versionStr.split(".");
}
var versionMajor = versionArray[0];
var versionMinor = versionArray[1];
var versionRevision = versionArray[2];
// is the major.revision >= requested major.revision AND the minor version >= requested minor
if (versionMajor > parseFloat(reqMajorVer)) {
return true;
} else if (versionMajor == parseFloat(reqMajorVer)) {
if (versionMinor > parseFloat(reqMinorVer))
return true;
else if (versionMinor == parseFloat(reqMinorVer)) {
if (versionRevision >= parseFloat(reqRevision))
return true;
}
}
return false;
}
}
function AC_AddExtension(src, ext)
{
if (src.indexOf('?') != -1)
return src.replace(/\?/, ext+'?');
else
return src + ext;
}
function AC_Generateobj(objAttrs, params, embedAttrs)
{
var str = '';
if (isIE && isWin && !isOpera)
{
str += '<object ';
for (var i in objAttrs)
{
str += i + '="' + objAttrs[i] + '" ';
}
str += '>';
for (var i in params)
{
str += '<param name="' + i + '" value="' + params[i] + '" /> ';
}
str += '</object>';
}
else
{
str += '<embed ';
for (var i in embedAttrs)
{
str += i + '="' + embedAttrs[i] + '" ';
}
str += '> </embed>';
}
document.write(str);
}
function AC_FL_RunContent(){
var ret =
AC_GetArgs
( arguments, ".swf", "movie", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
, "application/x-shockwave-flash"
);
AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);
}
function AC_SW_RunContent(){
var ret =
AC_GetArgs
( arguments, ".dcr", "src", "clsid:166B1BCA-3F9C-11CF-8075-444553540000"
, null
);
AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);
}
function AC_GetArgs(args, ext, srcParamName, classid, mimeType){
var ret = new Object();
ret.embedAttrs = new Object();
ret.params = new Object();
ret.objAttrs = new Object();
for (var i=0; i < args.length; i=i+2){
var currArg = args[i].toLowerCase();
switch (currArg){
case "classid":
break;
case "pluginspage":
ret.embedAttrs[args[i]] = args[i+1];
break;
case "src":
case "movie":
args[i+1] = AC_AddExtension(args[i+1], ext);
ret.embedAttrs["src"] = args[i+1];
ret.params[srcParamName] = args[i+1];
break;
case "onafterupdate":
case "onbeforeupdate":
case "onblur":
case "oncellchange":
case "onclick":
case "ondblclick":
case "ondrag":
case "ondragend":
case "ondragenter":
case "ondragleave":
case "ondragover":
case "ondrop":
case "onfinish":
case "onfocus":
case "onhelp":
case "onmousedown":
case "onmouseup":
case "onmouseover":
case "onmousemove":
case "onmouseout":
case "onkeypress":
case "onkeydown":
case "onkeyup":
case "onload":
case "onlosecapture":
case "onpropertychange":
case "onreadystatechange":
case "onrowsdelete":
case "onrowenter":
case "onrowexit":
case "onrowsinserted":
case "onstart":
case "onscroll":
case "onbeforeeditfocus":
case "onactivate":
case "onbeforedeactivate":
case "ondeactivate":
case "type":
case "codebase":
case "id":
ret.objAttrs[args[i]] = args[i+1];
break;
case "width":
case "height":
case "align":
case "vspace":
case "hspace":
case "class":
case "title":
case "accesskey":
case "name":
case "tabindex":
ret.embedAttrs[args[i]] = ret.objAttrs[args[i]] = args[i+1];
break;
default:
ret.embedAttrs[args[i]] = ret.params[args[i]] = args[i+1];
}
}
ret.objAttrs["classid"] = classid;
if (mimeType) ret.embedAttrs["type"] = mimeType;
return ret;
}
// -->
</script>
</head>
<body bgcolor="#ffffff">
<!--url's used in the movie-->
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<script language="JavaScript" type="text/javascript">
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0',
'width', '960',
'height', '750',
'src', 'index',
'quality', 'high',
'pluginspage', 'http://www.adobe.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'showall',
'wmode', 'window',
'devicefont', 'false',
'id', 'index',
'bgcolor', '#ffffff',
'name', 'index',
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','sameDomain',
'movie', 'index',
'salign', ''
); //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=10,0,0,0" width="960" height="750" id="index" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="index.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /> <embed src="index.swf" quality="high" bgcolor="#ffffff" width="960" height="750" name="index" align="middle" allowscriptaccess="sameDomain" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
</object>
</noscript>
</body>
</html>

sticks464
03-24-2011, 05:28 PM
The Flash version detection script is over riding any css to center the movie. The flash version detection script is not needed anyway.

This will center the movie. I tested by changing the movie background color so it could be seen since it and the body background are the same.


<!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>Cuddle Bug Designs</title>

<style type="text/css">
html,body{
height:100%;
margin:0;
padding:0;
}
body{
min-width:1024px;
min-height:750px;
background-color:#fff;
}
#vertical{
width:100%;
height:50%;
margin-top:-375px;/* half vertical height of hoz object*/
float:left;
}
#hoz {
width:1024px;
height:750px;
margin:auto;
overflow:auto;
clear:both;
}
#hoz object {
display:block;
width:960px;
height:750px;
}
</style>

<script language="JavaScript" type="text/javascript">
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0',
'width', '960',
'height', '750',
'src', 'index',
'quality', 'high',
'pluginspage', 'http://www.adobe.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'showall',
'wmode', 'window',
'devicefont', 'false',
'id', 'index',
'bgcolor', '#ffffff',
'name', 'index',
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','sameDomain',
'movie', 'index',
'salign', ''
); //end AC code
</script>

</head>
<body>
<div id="vertical"></div>
<div id="hoz">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="960" height="750" id="index" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="index.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /> <embed src="index.swf" quality="high" bgcolor="#ffffff" width="960" height="750" name="index" align="middle" allowscriptaccess="sameDomain" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
</object>
</div>

</body>
</html>

nikkitranchita
03-25-2011, 10:37 AM
OMG that worked!!!!!!! Thankyou thankyou thankyou!!!!!!!!!!!
Very much appreciated :)