PDA

View Full Version : Centering .swf file in .html

varhodes
03-25-2010, 03:35 AM
I'll apologize up front for asking what is likely a stupid question, but here goes...

I created a Flash file and used the PUBLISH feature to create an .swf and .html version of the project. I prefer to use the .html file (that calls in the .swf file) because you can't see objects that move off the sides of the stage in the .html version.

However, the .swf is aligned top left in the .html and I don't know how to change it. I tried pulling the .html file into DreamWeaver, but still wasn't able to make the stage of the .swf file align to center. (Ideally, I'd like it to center vertically AND horizontally within the browser window, but I'll settle for aligned center horizontally and aligned at the top of the page vertically.)

Here's the link to the project so you can view the html source (warning file is 10MB b/c of an embedded video):
http://phd.maskreyrhodes.com/ENGL871/ExploringComics.html

Can something be changed in the .html file to center or is there a way to code this in to the .swf?

Thanks in advance for the help!
beezleboss
03-25-2010, 10:10 AM
It's not necessarily W3C Standards compliant but you can add<center></center> tags around the swf file to center the movie horizontally. Vertically it can be done using css but your best bet in HTML is to add a load of </ br> above the swf
scorpioserve
03-25-2010, 08:12 PM
I think that it might help you to look at swfobject it is an opensource project and will do exactly what you need and more, do a google search for it.

On second thaught here is a tutorial for it too
swfObject (http://www.slideshare.net/macloo/how-to-use-swfobject)
johnbeeby
03-29-2010, 05:27 PM
Put this code above <body> tag in your HTML
<style>
* {margin: 0; padding: 0;}

#flash {
margin:0 auto;
width:640px;
height:390px;
}
</style>

Put this code where you want your flash embed to be on the HTML page. (wherever it was before)

<div id="flash">
PLACE YOUR FLASH EMBED CODE HERE
</div>

What this does is uses CSS to center the flash file.

The code * {margin: 0; padding: 0;} resets the margins and padding.
The code margin:0 auto; centers the flash.

Be sure to change the dimensions in the flash div to match your flash file.