Avoiding letterboxing/cropping on browser resizing...

[pjfarr]

I haven't been able to find an answer to this anywhere...

I'd like to set the SWF height in the HTML code to (let's say) 95% of the browser height and have the SWF width adjust automatically, keeping with the aspect ratio, without any letterboxing, cropping, or distortion of the SWF.

Setting both the width and height to a percentage doesn't work, because on a wider-screen monitor where the browser is maximized, there'll be letterboxing on the sides of the SWF if the window is wider than usual. I've played around with the "Show All", "Exact Fit", and "No Border" settings to no avail.

Someone has to have an answer to this...

[Video Man]

You can't have a .swf that resized to every size window AND maintain the correct aspect ratio. Just think about what you are asking...
Exact fit does the part about

without any letterboxing, cropping

but of course, there is distortion.
Your best bet is to set the background to 100% and the Flash elements to maintain the aspect ratio, like a "Show all".
this can be done with a combination of a container background in CSS or by AS...
The background is always 100% but the actual Flash elements are something less,
Can't say I know how to do it with just AS, but you can Google for "Flash fluid layouts" for more info.
Video Man

[whispers]

In my footer is a link called fullscreen.

that shows how to make a background 'fullscreen'..while keeping certain flash elements (ie: footer..etc) always at the bottom..no matter the screen size/resolution..etc

you can also scale the background as well to fit...(I think Ive posted a demo on that as well before)

[pjfarr]

Thanks for the responses guys!

To clarify, I'd like to set the SWF HEIGHT parameter to a percentage of the browser's height and the SWF WIDTH parameter to a percentage of the SWF's height.

i.e. HEIGHT="75%" (of browser height), WIDTH="n" (% of SWF height, that would keep the aspect ratio intact).

Video Man, are you saying that can't be done? I'm not talking a fullscreen stretch, as many monitor's are widescreen now and I don't want to stretch it that wide. I don't mind the webpage background pattern filling in the extra space to the sides of the SWF. I just don't want letterboxing in the SWF itself (which would just be a whole lotta blank space, esp. in widescreen).

I'm starting to think it's maybe more a javascript thing (making that kind of dynamic calculation)...?

[Video Man]

Well if you are only wanting to set the height of the .swf as a % of the browsers height, you can do that with the CSS for the <div> holding the .swf.

#flash {
	height:75%;
	background-color:#00FF00
}

Then scale the .swf to 100% (of it's parent container). Work out all the CSS WITHOUT any Flash content in it first, just the background color. Once you get it looking just like you want, then put in the Flash content.
Best wishes,
Video Man

[pjfarr]

Video Man, I want to set the WIDTH parameter of the SWF to a % of the SWF's HEIGHT. Not a % of the browser width.

So if...
SWF HEIGHT="75%" of browser height
then...
SWF WIDTH="% of SWF HEIGHT"

[Video Man]

Are you sure you understand what you are asking for? I think there is some confusion here, which might be on my part…

on a wider-screen monitor where the browser is maximized, there'll be letterboxing on the sides of the SWF if the window is wider than usual.

Yes, that is absolutely right. Once the .swf has reached 100% height, it can get no taller (without cropping). So as the screen gets wider and wider, there will be space showing on both sides. Stretching the width of the .swf out to the edge of the screen changes the aspect ratio and distorts the Flash content.
Just to clarify a couple of things…
The Flash content will be placed inside a container on the Web page, in a <div>, correct?
So then there are two elements that need to be sized. One is the container <div> which you want to be 75% the height of the browser height. The other element is the Flash content. And you want the Flash content to fill 100% of the height of that <div> correct?
So the Flash will fill 100% height of the 75% browser height…completely fill the height of the <div> and adjust the width as needed, is that correct?
By default Flash will maintain the correct aspect ratio. Setting the Flash params of the .swf to 100%, both width and height, will maintain that aspect ratio. It will NOT stretch it out to 100% width of the container <div>. Because Flash will maintain it’s aspect ratio, if either 100% of the height OR 100% of the width are reached as the browser window is being resized, the other dimension will be adjusted correctly. There is no need to set the width as a % of the height to maintain the correct aspect ratio.
You cannot get a .swf to maintain it's aspect ratio and completely fill the screen at every screen dimension without distorting the .swf. That's why the suggestion to use a background, image or color, to fill in the space to the sides or above/below the .swf.
But you can set a container height,

#flash {
	height:75%;
	background-color:#00FF00
}

and set the .swf width/height params to 100% and it will maintain the correct aspect ratio and display as large as possible in any give browser window size.
Review this from an old post:

Here are examples of different scaling parameters available in the Publish settings. You can also add these parameters directly in the html (<param name="scale" value="noscale"). All the examples replace the actual Flash dimensions with 100% for both width and height (width="100%" height="100%"). These examples use the old <object> and <embed> to illustrate the different ways to scale Flash. Once you understand how it works I’d recommend that you use swfobject to place the Flash in your final project.
View the source code for each page to see the full code.

http://www.cidigitalmedia.com/tutori...exact_fit.html

"exactFit" scales the file to fit exactly within the confines of the screen, irregardless if the movie becomes consequently distorted. The original aspect ratio is not maintained. So round things are not round and squares are not square.

http://www.cidigitalmedia.com/tutori...e/noScale.html

"noScale" is the default setting, and causes the movie to be displayed at the originally designed dimensions.

http://www.cidigitalmedia.com/tutori...no_border.html

"noBorder" causes the movie to be scaled to what ever dimensions are needed to have no border surrounding the movie within the player, which consequently could result in some of the movie being cut off from view. In other words, the movie will maintain the original aspect ratio and will fill the screen completely. But if the movie has to be streched wider to fill both sides of the screen, it will also stretch taller, but then some of the top and the bottom of the movie may be cut off from view.

http://www.cidigitalmedia.com/tutori.../show_all.html

"showAll" scales the movie to the size of the screen (which could cause pixelation if the file contains raster information), the difference between showAll and exactFit is that showAll mantains initial movie size proportions. Because it maintains the original aspect ratio, there can be space to the sides or the top and bottom. But everything always shows and they are not distorted. But notice the photo in the center, it becomes pixilated at larger screen resolutions.

Best wishes,
Video Man

[pjfarr]

Thanks, VM, for your thoughtful and well-articulated reply.

I guess what I'm referring to is the background space of the SWF. The background widens out too much on a widescreen monitor. The graphics on the stage resize perfectly and keep their spatial/size relationships. It's the background that extends outward on a wider screen.

The reason this is a problem is because I have objects hidden "offstage" until they're required to slide/fly/roll in. In a widescreen browser window, when the SWF scale is set to "Show All", there is letterboxing on the sides and those hidden objects are fully visible in the offstage area before they're required onstage, which ruins the effect. On a 4:3 monitor, with browser maximized, there is no letterboxing and so the offstage objects remain hidden. When viewed on 16:9 monitor with browser maximized, the objects can be fully seen sitting in the letterboxed portion of the SWF before it's time for them to make their respective appearances.

The reason I want to use percentages instead of setting specific widths and heights is to accommodate different resolutions, so the SWF doesn't appear too big at lesser resolutions or too small with larger resolutions.

Hope that all made sense...

[Video Man]

OOHHH!! OK.. well then that's makes a difference.
Now I understand what you are looking for!
You know, there may be some fancy *ss way to code that, but it's late, I'm tired.. so here is the KISS method...
Set a mask over the .swf the exact same size as the Flash doc. Set the scale to "show all". Only the content covered by the mask will show at any resolution and any window display size.
Best wishes,
Video Man

[pjfarr]

Hey, I just appreciate the time and thought you've put into this!

I was actually mulling over the idea of an all-encompassing mask, but wondered if it would slow down things (processor-wise) if the SWF was resized much larger than the original stage size. I'll have to test that out and see.

More and more I'm convinced this is more a javascript thing: get the dimensions of the SWF, then use innerHTML to set the height to a % of the browser height and the width to a % of that. My javascript experience is very sketchy, but I do have some books and of course Google.