Skip to main content
P
pmfr01
Known Participant
March 3, 2012
Question

Setting fixed background layout

  • March 3, 2012
  • 3 replies
  • 3025 views

I all.

I'm building my first Flash website in a 1280x800 px resolution, fixed top-centered layout. I have a 1920x1080 px bitmap set as my background. I did it in 1920x1080 px size, because I want the browser to display it (the background) acording to the user's monitor resolution. The main content though - buttons, images, animations, etc - are fixed (1280x800 px centered). So, how do I do this? I've been searching the web, but I only find instructions for liquid layout layouts and such, and I don't want liquid, just the background to adapt to the target monitor size.

I use Flash CS5.5 (11.5.0)

Thanx in advance.

Pedro

This topic has been closed for replies.

3 replies

sinious
sinious
Legend
March 6, 2012

Flash externally interfacing with the webpage so you can talk from javascript <-> actionscript. That requires some extra code. I'm going to presume if you're asking, you don't need it, so don't worry about it.

P
pmfr01Author
Known Participant
March 6, 2012

Ok, thanx.

I'm going to test the HTML and then I'll tell you how it went. It's going to take a while though.

Thanx again.

sinious
sinious
Legend
March 6, 2012

Welcome

sinious
sinious
Legend
March 5, 2012

Are you saying you want the background image to scale down to the size of the browsers width so even though it's 1920x1080 it will scale down if the browser window is smaller? If this is the case you will still need to deal with irregular size windows. e.g. if you set the width of the image too small the height won't be large enough and vice versa. So you might need to set the height and clip some of the width to maintain aspect ratio on the background image. 

Is the background built in flash or HTML?

If it's flash then you will need to resize the SWF to 100% 100% like mentioned and not scale your content (look up stage.scaleMode). You would need to pay attention to browser onResize events, send them to flash and have flash re-center your content. Outside that it's just detecting the size of your browser window and setting the width of the background (sprite?) to that size.

I don't presume this is the case, however. Are you centering a 1280 SWF in the center of a page and are using HTML to set the background image? If so then CSS3 has a background-size property you could use but this wouldn't work in all browsers, it's too new.

A simple HTML way to accomplish this would be to use a normal <img> tag and load the background image inside of this (assuming scrolling is not something you care about). Set the z-index of the image to 0. Wrap the SWF in a div and set the z-index higher, say to 1. Center the <div> the flash is contained in using absolute positioning anytime the document is resized (onResize). Flash will float over the image. You'll also need to scale the image as the browser resizes as well.

If you're not familiar with javascript, check out jquery. It can make things like this a little easier. But this is pretty straight forward CSS/JS.

Example code will be easier once we know your exact needs.

P
pmfr01Author
Known Participant
March 5, 2012

Hmm, I think I've neglected some details about this. I'm going to make a sketch of what I want and I'll get back to you.

P
pmfr01Author
Known Participant
March 5, 2012

Here it is.

1280x800 px

1980x1080 px

This is what I want - fixed background that auto-centers itself, being 1280x800px the minimum resolution and 1920x1080px the highest. There will be images coming out of the screen (in 1280x800px) into the main site area, like the hand holding the photo. In a 1280x800px, these images will be "bleed-cut" with no scroll bars. In a 1980x1080px they will be fully visible. The rest of the content fixed. Scroll bars would only appear in lower resolutions.

I know my way around Flash, but have no knowledge of Actionscript. So, if anyone could provide me with the code it would be great.

kglad
Community Expert
kgladCommunity Expert
Community Expert
March 3, 2012

try setting your file/publish settings/html for 100%x100%.  that may do what you want.

P
pmfr01Author
Known Participant
March 5, 2012

No, I've already tried that - it just fits the background in 1280x800 px and hides the rest of the background that would fit the 1920x1080 px resolution.

kglad
Community Expert
kgladCommunity Expert
Community Expert
March 5, 2012

then you do want a liquid layout.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices