How can I keep my flash files absolutely centered on the page?? [Archive]

Click to See Complete Forum and Search --> : How can I keep my flash files absolutely centered on the page??

spherculist

04-16-2005, 09:53 AM

I've been trying to figure this out on and off for ages now but just can't get it to work.

SO i know how to make a table in html and center my flash content but when the screen size is smaller than the flash file > the flash sticks to the top left corner of the browser instead of staying centered.

Here's an example of what I mean:

http://www.giantoctopus.com/

So you can have a great big graphic which crops down on 800x600, but still looks fine, then on higher res look totally badass.

SO how do you do this??? I've tried tables, I've tried framesets, i'm lost.

I wondered if you can get the size of the window from inside flash and then move the background to compensate but i can't seem to. Perhaps you use javascript to pass the window dimensions to flash and then move the background to keep it centered???

If anyone can help me out with this i will be a very happy man, cos we like to make big phat graphics but the boss man insists it all looks fine on 800x600.

Cheers

¦m¦

spherculist

04-16-2005, 05:22 PM

well i have spent the afternoon playing with iframes. They are pretty handy.

But i still haven't figured out my little problem.

Surely osmeone out there can point me in a good direction.

It seems like such a simple problem but I just dont get it.

Bobby Hill

04-17-2005, 07:46 AM

If I understand you correctly, you want everything centered in the browser window. If this is the case, the following code should help. If you are using background images I am not totally sure this will work. You may have to play around and modify the code to get it to work.

If you want to center the flash movie horizontally you would use the following code in your html file.

<div align="center">
Now place your embed and object tags here.
</div>

Now, if you want to center the flash movie both horizontally and vertically in the html file, you will use the following css code between the <head> tags in the html file.

<style type="text/css">
/* add a style rule for a tag with the id mymovie */
#mymovie {
position: absolute;
left: 50%; top: 50%;
margin-top: -400px;/*half of the movie height
margin-left: -300px;/*half of the movie width
}
</style>

Now place the movie id in the following code.

<div id="mymovie">
Now place your embed and object tags
</div>

spherculist

04-17-2005, 05:04 PM

thanks bobby hill,

I'll have a crack at it using your code!

I think that'll work. To be honest i've spent so long playing with flash that i've completely neglected getting my head round css and all that stuff.

Fingers crossed this will sort me out, i'll report back.

cheers,

m

spherculist

04-17-2005, 05:48 PM

cheers bobby that works a treat :)

I did have to make one change tho, where you said:

margin-top: -400px;/*half of the movie height
margin-left: -300px;/*half of the movie width

for starters i switched the -300 and -400 cos my movie is 800w x 600h but oddly the center point then becomes somewhere towards the bottom right of the movie?

So I had a fiddle with the numbers to find that this gets the whole thing centered:
margin-top: -200px;/*third of the movie height*/
margin-left: -266px;/*third of the movie width*/

Very odd indeed. Any ideas why you have to use thirds?

But you have totally sorted me out so thanks for that, you've also opened my eyes to the possibilities of css :) Plus i've learnt how to use iframes. Bonus.

cheers

matt

Bobby Hill

04-17-2005, 07:52 PM

I have no idea why you had to use thirds. I have always used halves to get the content centered on the page. I have one question though. Why are the images so small? You guys obviously have great Photoshop skills to show off. Anyways, the site looks great keep up the good work.

:)

spherculist

04-20-2005, 03:51 PM

Bobby you have otally confuddled me.

I definitely need to use thirds to center the content.

Then which site are you talking about? I didn't think i posted one. But maybe you searched through some old threads. Our latest site was http://www.wildcat.co.uk/420

Quite happy with it because there is an A6 booklet to go with it. All in the same style. First time we've managed to get the web and print sides of wildcat integrated and with the next 192 page A4 catalogue coming out soonish we'd love to integrate the whole webshop, php site and flash site with the same style so we end up with 1 unified 'image'. Which is tricky because printd graphics, flash, phpnuke and actinic (hopefully soon to become osCommere) don't really integrate that well :( But i'm hoping we can pull it off. Plus wildcat have over 4,000 completely different products with over 20,000 different specifications. So keeping up to date with photos, 3d models, product codes etc is a complete nightmare.

As for the image size. That's just my little test image. I think i'll do the final graphics at 1600 x 1200, with most of the detail in the middle. Perhaps png in the middle with big vector stuff around to lower kb size. I'll post any results in this thread but it won't be for a while.

Cheers,

m

harlowhair

04-24-2005, 09:39 AM

Another way to centre everything would be to use tables and if you declare widths as percentages then it doesn't matter what size the movie is:

<table cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td width="100%" height="100%" align="center" valign="middle">



</td>
</tr>
</table>