Web Design Forums

pagey · 30-11-2007, 11:18

I'm trying to get my Flash file centered within my browser. I've searched all over Google, and come up with lots of different methods of how to do this, but none seem to work for me. I've tried using CSS, putting the Flash inside a table, and even a deprecated <center> tag.

I'm using some ActionScript to repeat a pattern to 100% of the browser, and in order to implement this, I've had to make a few alterations to the HTML Publish settings. Would this be whats causing the problem?

(Oh, and the effect I'm after is exactly the same as top_buzz's last showcase item, the New Years Eve nightclub site!)

Cheers

mx · 30-11-2007, 11:23

At a guess, you need to make the flash stage scale to a 100% of the browser window, then center the content within.

pagey · 30-11-2007, 11:31

Already scaling 100% for width and height...

Anybody else?

pasky · 30-11-2007, 11:33

I like your avatar pagey ... Now I would go about centering that flash object vertically by giving the html and body element heights of 100% then creating a table of width 100% and height 100% with only one <td> valign that <td> middle and align it center and presto you have a flash object that will always be in the center of the page regardless of the page width or height.

pagey · 30-11-2007, 12:09

Ok, so I've now got this as my CSS:

HTML Code:

<style type="text/css" media="all">
html, body {
	height:100%;
	width:100%;
	margin:0 auto; 
	padding:0px;
}

table {
width: 100%;
height: 100%;
}
 </style>

And this for my content:

HTML Code:

<table>
<td valign="center" align="center">
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="100%" height="100%" id="FlashAssignment1" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="false" />
	<param name="movie" value="FlashAssignment1.swf" /><param name="quality" value="high" /><param name="scale" value="noscale" /><param name="salign" value="lt" /><param name="bgcolor" value="#000000" />	<embed src="FlashAssignment1.swf" quality="high" scale="noscale" salign="lt" bgcolor="#000000" width="100%" height="100%" name="FlashAssignment1" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
	</object>
	</td>
</table>

But its still not centering....

funkyprem · 30-11-2007, 12:11

no tr??

pasky · 30-11-2007, 12:14

yes I think you might need a <tr> in there

pasky · 30-11-2007, 12:19

and its valign middle

Shiro · 30-11-2007, 12:20

Try this:

Code:

<div style="width:[enter width in pixels here eg: 500px]; margin: 0 auto; "><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="100%" height="100%" id="FlashAssignment1" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="false" />
	<param name="movie" value="FlashAssignment1.swf" /><param name="quality" value="high" /><param name="scale" value="noscale" /><param name="salign" value="lt" /><param name="bgcolor" value="#000000" />	<embed src="FlashAssignment1.swf" quality="high" scale="noscale" salign="lt" bgcolor="#000000" width="100%" height="100%" name="FlashAssignment1" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
	</object></div>

pasky · 30-11-2007, 12:24

This would be my code for aligning a picture in the center/middle of the 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" />

<style type="text/css">

html, body {

height: 100%; 
margin: 0; 
padding: 0;

}

</style>

</head>

<body scroll="no">
<table width="100%" border="0" style="height: 100%; border-collapse: collapse">
	<tr>
		<td width="100%" valign="middle" align="center" bgcolor="#2f2f2f">

			<img src="construction.jpg"/>
			<!-- Start of StatCounter Code -->
			<script type="text/javascript">
			var sc_project=3117249; 
			var sc_invisible=0; 
			var sc_partition=30; 
			var sc_security="79ffc37d"; 
			</script>
			
			<script type="text/javascript" src="http://www.statcounter.com/counter/counter_xhtml.js"></script><noscript><div class="statcounter"><a class="statcounter" href="http://www.statcounter.com/"><img class="statcounter" src="http://c31.statcounter.com/3117249/0/79ffc37d/0/" alt="counter free hit invisible" /></a></div></noscript>
			<!-- End of StatCounter Code -->
			<br />
			<form method="post" action="mail.php">

				<font face="Verdana, Arial, Helvetica, sans-serif" size="-2" color="#FFFFFF">Your email: </font>
				<input name="email" type="text" size="30" style="border-width:thin; border-color:#FFFFFF; border-style:solid; 					background-color:#2f2f2f; color:#FFFFFF"/>
				<input type="submit" value="Send" style="border-width: thin; border-color:#FFFFFF; border-style:solid; background-color:#2f2f2f; color:#FFFFFF">
			</form>
		</td>
  </tr>
</table>

</body>
</html>

pagey · 30-11-2007, 13:20

Seeing as I'm starting to lose the will to live, I'll show you exactly the code I am using...This options doesn't work, and I also tried using a table (like one of you guys mentioned) and that didn't work either T

This is just the code that Flash CS3 outputs after being published:

HTML Code:

<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>FlashAssignment1</title>
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>

<style type="text/css" media="all">
html, body {
	height:100%;
	width:100%;
	margin:0 auto; 
	padding:0px;
}

 </style> 

</head>
<body bgcolor="#000000"> 
<!--url's used in the movie-->
<a href="http://www.flashfridge.com/"></a>
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<script language="javascript">
	if (AC_FL_RunContent == 0) {
		alert("This page requires AC_RunActiveContent.js.");
	} else {
		AC_FL_RunContent(
			'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
			'width', '100%',
			'height', '100%',
			'src', 'FlashAssignment1',
			'quality', 'high',
			'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
			'align', 'middle',
			'play', 'true',
			'loop', 'true',
			'scale', 'noscale',
			'wmode', 'window',
			'devicefont', 'false',
			'id', 'FlashAssignment1',
			'bgcolor', '#000000',
			'name', 'FlashAssignment1',
			'menu', 'true',
			'allowFullScreen', 'false',
			'allowScriptAccess','sameDomain',
			'movie', 'FlashAssignment1',
			'salign', 'lt'
			); //end AC code
	}
</script>
<noscript>
<div style="width:800px; margin: 0 auto; ">

	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="100%" height="100%" id="FlashAssignment1" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="false" />
	<param name="movie" value="FlashAssignment1.swf" /><param name="quality" value="high" /><param name="scale" value="noscale" /><param name="salign" value="lt" /><param name="bgcolor" value="#000000" />	<embed src="FlashAssignment1.swf" quality="high" scale="noscale" salign="lt" bgcolor="#000000" width="100%" height="100%" name="FlashAssignment1" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
	</object>
	</div>
</noscript>
</body>
</html>

pasky · 30-11-2007, 18:21

it should work with the div too but here you go here's my code

Code:


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" style="height: 100%">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>slide</title>
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>

<style>

body {
	height: 100%;
}

</style>

</head>
<body bgcolor="#000000">
<!--url's used in the movie-->
<!--text used in the movie-->
<!--
<p align="left"></p>
-->
<!-- saved from url=(0013)about:internet -->
<script language="javascript">
	if (AC_FL_RunContent == 0) {
		alert("This page requires AC_RunActiveContent.js.");
	} else {
		AC_FL_RunContent(
			'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
			'width', '750',
			'height', '270',
			'src', 'slide',
			'quality', 'high',
			'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
			'align', 'middle',
			'play', 'true',
			'loop', 'true',
			'scale', 'showall',
			'wmode', 'window',
			'devicefont', 'false',
			'id', 'slide',
			'bgcolor', '#000000',
			'name', 'slide',
			'menu', 'true',
			'allowFullScreen', 'false',
			'allowScriptAccess','sameDomain',
			'movie', 'slide',
			'salign', ''
			); //end AC code
	}
</script>
<noscript>
<table width="100%" height="100%">
	<tr>
		<td align="center" valign="middle">
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="750" height="270" id="slide" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="false" />
	<param name="movie" value="slide.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#000000" />	<embed src="slide.swf" quality="high" bgcolor="#000000" width="750" height="270" name="slide" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
	</object>
		</td>
	</tr>
</table>
</noscript>
</body>
</html>

*notice where I declared the height for the html container

agentxcell · 30-11-2007, 18:42

This is the code I used to get mine centered. I had to use the DIV and table to get it where I wanted.

Code:

<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>ZeroWeb_02</title>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body bgcolor="#ffffff">
<div align="center">
<table width="100%" height="100%">
<tr>
<td align="center" valign="middle">
<!--url's used in the movie-->
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0','width','1024','height','1425','id','ZeroWeb_02','align','middle','src','ZeroWeb_02','quality','high','bgcolor','#ffffff','name','ZeroWeb_02','allowscriptaccess','sameDomain','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','ZeroWeb_02' ); //end AC code
</script><noscript><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="1024" height="1425" id="ZeroWeb_02" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="ZeroWeb_02.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><embed src="ZeroWeb_02.swf" quality="high" bgcolor="#ffffff" width="1024" height="1425" name="ZeroWeb_02" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object></noscript>
</td>
</tr>
</table>
</div>
</body>
</html>

pagey · 30-11-2007, 18:42

Thanks for your help, sadly, it still didn't work

I'm not sure if something within Flash is ruining it. When I added your code my background (which was covering 100% of the browser background) was missing on the right third of my screen, so it obviously did something!

Anyway, if anybody knows what I might be doing wrong, I'd be extremely grateful.

Thanks

herkalees · 30-11-2007, 19:04

HTML:
<div id="flashContainer">

all your flash stuffs here.

</div>

CSS:
#flashContainer {

width: 500px; /* Change this number to the real width of your movie */
height: 800px; /* Change this number to the real height of your movie */
position: relative;
left: 50%;
top: 50%;
margin-left: -250px; /* Change this number to half the real width of your movie */
margin-top: -400px; /* Change this number to half the real height of your movie */

}

pagey · 30-11-2007, 19:25

Thanks for all the suggestions. I'm sure in most cases they would all work perfectly, but unfortunately, I'm thinking that it must be something to do with my publish settings, or my ActionScript.

In a last ditch attempt to get this sorted, I'll bare the soul of my whole project, and see if anybody can see the problem.

I had to change some of the default settings on the publish section above in order to make the background repeat 100% thorughout the browser.

The HTML code, complete with Herks centering technique.

HTML Code:

<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>FlashAssignment1</title>
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>
<style>
#flashContainer {

width: 800px; /* Change this number to the real width of your movie */
height: 550px; /* Change this number to the real height of your movie */
position: relative;
left: 50%;
top: 50%;
margin-left: -275px; /* Change this number to half the real width of your movie */
margin-top: -400px; /* Change this number to half the real height of your movie */
}
</style>
</head>
<body bgcolor="#ffffff">
<!--url's used in the movie-->
<a href="http://www.flashfridge.com/"></a>
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<script language="javascript">
	if (AC_FL_RunContent == 0) {
		alert("This page requires AC_RunActiveContent.js.");
	} else {
		AC_FL_RunContent(
			'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
			'width', '100%',
			'height', '100%',
			'src', 'FlashAssignment1',
			'quality', 'high',
			'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
			'align', 'middle',
			'play', 'true',
			'loop', 'true',
			'scale', 'noscale',
			'wmode', 'window',
			'devicefont', 'false',
			'id', 'FlashAssignment1',
			'bgcolor', '#ffffff',
			'name', 'FlashAssignment1',
			'menu', 'true',
			'allowFullScreen', 'false',
			'allowScriptAccess','sameDomain',
			'movie', 'FlashAssignment1',
			'salign', 'lt'
			); //end AC code
	}
</script>
<noscript>
<div id="flashContainer">
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="100%" height="100%" id="FlashAssignment1" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="false" />
	<param name="movie" value="FlashAssignment1.swf" /><param name="quality" value="high" /><param name="scale" value="noscale" /><param name="salign" value="lt" /><param name="bgcolor" value="#ffffff" />	<embed src="FlashAssignment1.swf" quality="high" scale="noscale" salign="lt" bgcolor="#ffffff" width="100%" height="100%" name="FlashAssignment1" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
	</object>
</div>
</noscript>
</body>
</html>

My ActionScript in order to resize the browser without resizing the content, and to make the backgrounf image repeat.

HTML Code:

import flash.display.BitmapData;

function stageResize() {
scale_mc._width = Stage.width;
scale_mc._height = Stage.height;
}
function center() {
noscale_mc._y = Stage.height/2;
noscale_mc._x = Stage.width/2;
}

Stage.scaleMode = "noScale";

myListener = new Object();
myListener.onResize = function() {
stageResize();
center();
};
Stage.addListener(myListener); 

var stripe:BitmapData = BitmapData.loadBitmap("stripe");

function fillBG() {
	this.beginBitmapFill(stripe);
	this.moveTo(0,0);
	this.lineTo(Stage.width,0);
	this.lineTo(Stage.width,Stage.height);
	this.lineTo(0,Stage.height);
	this.lineTo(0,0);
	this.endFill();
}

fillBG();

Thats all I can think of for now.

Any help on this is appreciated as always.

pasky · 01-12-2007, 00:58

hey why don't you send me your swf file and I'll post the results

agentxcell · 01-12-2007, 08:30

not that this will help but whenever I publish something from flash I always make the alignment center and center even though I think I change it in the HTML but just in case it matters there you go.

agentxcell · 01-12-2007, 08:31

Also I like Herks centering technique better than using the table. I hate tables.

pagey · 01-12-2007, 11:53

Quote:

Originally Posted by agentxcell

not that this will help but whenever I publish something from flash I always make the alignment center and center even though I think I change it in the HTML but just in case it matters there you go.

Whenever I try that, the repeated background centres itself, and doesn't stretch over the left side of the browser.

Thanks though.

30-11-2007, 11:18	#1 (permalink)
pagey Resident Cheese Expert Join Date: Aug 2006 Location: South Wales Posts: 1,090	Centering Flash in a Browser I'm trying to get my Flash file centered within my browser. I've searched all over Google, and come up with lots of different methods of how to do this, but none seem to work for me. I've tried using CSS, putting the Flash inside a table, and even a deprecated <center> tag. I'm using some ActionScript to repeat a pattern to 100% of the browser, and in order to implement this, I've had to make a few alterations to the HTML Publish settings. Would this be whats causing the problem? (Oh, and the effect I'm after is exactly the same as top_buzz's last showcase item, the New Years Eve nightclub site!) Cheers

30-11-2007, 11:23	#2 (permalink)
mx fucksocks™ Join Date: Jun 2005 Location: in the boosh Posts: 1,629	At a guess, you need to make the flash stage scale to a 100% of the browser window, then center the content within. __________________

30-11-2007, 12:11	#6 (permalink)
funkyprem For all your goober needs Join Date: Dec 2004 Location: Coventry, UK Posts: 1,547	no tr?? __________________ Time is really the only capital that any human being has, and the one thing that he can’t afford to lose. - Thomas Edison prem ghinde

30-11-2007, 19:04	#15 (permalink)
herkalees Semantics, yay. Join Date: Nov 2005 Location: Salem, Massachusetts Posts: 1,146	HTML: <div id="flashContainer"> all your flash stuffs here. </div> CSS: #flashContainer { width: 500px; /* Change this number to the real width of your movie / height: 800px; / Change this number to the real height of your movie / position: relative; left: 50%; top: 50%; margin-left: -250px; / Change this number to half the real width of your movie / margin-top: -400px; / Change this number to half the real height of your movie */ } __________________ Writing on markup, CSS, and other web geekery Professional, accessible, and search engine friendly web site development by Boston Web Studio

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

30-11-2007, 11:31	#3 (permalink)
pagey Resident Cheese Expert Join Date: Aug 2006 Location: South Wales Posts: 1,090	Already scaling 100% for width and height... Anybody else?

30-11-2007, 11:33	#4 (permalink)
pasky big paw Join Date: Nov 2007 Location: Toronto Posts: 165	I like your avatar pagey ... Now I would go about centering that flash object vertically by giving the html and body element heights of 100% then creating a table of width 100% and height 100% with only one <td> valign that <td> middle and align it center and presto you have a flash object that will always be in the center of the page regardless of the page width or height.

30-11-2007, 12:14	#7 (permalink)
pasky big paw Join Date: Nov 2007 Location: Toronto Posts: 165	yes I think you might need a <tr> in there

30-11-2007, 12:19	#8 (permalink)
pasky big paw Join Date: Nov 2007 Location: Toronto Posts: 165	and its valign middle

30-11-2007, 18:42	#14 (permalink)
pagey Resident Cheese Expert Join Date: Aug 2006 Location: South Wales Posts: 1,090	Thanks for your help, sadly, it still didn't work I'm not sure if something within Flash is ruining it. When I added your code my background (which was covering 100% of the browser background) was missing on the right third of my screen, so it obviously did something! Anyway, if anybody knows what I might be doing wrong, I'd be extremely grateful. Thanks

01-12-2007, 00:58	#17 (permalink)
pasky big paw Join Date: Nov 2007 Location: Toronto Posts: 165	hey why don't you send me your swf file and I'll post the results

01-12-2007, 08:30	#18 (permalink)
agentxcell Senior Member Join Date: Nov 2007 Posts: 103	not that this will help but whenever I publish something from flash I always make the alignment center and center even though I think I change it in the HTML but just in case it matters there you go.

01-12-2007, 08:31	#19 (permalink)
agentxcell Senior Member Join Date: Nov 2007 Posts: 103	Also I like Herks centering technique better than using the table. I hate tables.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)