Fixed aspect ratio throughout the end users browser

Report · Apr 02, 2013

Hi there..

I have a music website. www.vitaguitar.com and I am trying to figure out how to keep the .swfs from scaling if the browser is resized. The weird thing is it's only messed up (pixalated) when the browser is enlarged vertically. You can move stretch the browser horizontal and it doesn't change anything. Also.. when I test it locally(in flash).. it's all good. The size is not affected and looks great. I did try to publish out using match movie + no scale with no luck. When I test the html's locally they stay the same size no matter how I size the browser. Should I be using the published html and modify the code to not scale? A bit confused here. I've uploaded the .swf's and flv's and html's to the host. I can put up any of the code and would appreciate any help I could get. I have some important music people who need to see the site but if there browser happens to be maximized.. I'm in trouble with pixelated stretched movies (flv's)! I also realize I need to make the file sizes smaller but just need to get over this first hurdle. Thank you so much in advance!

Report · Apr 02, 2013

publising with a fixed size instead of a percentage should prevent your swf from scaling.

post a link to your url that shows the problem.

In Response To kglad · Apr 02, 2013

Hi.. thank you so much for responding! The website is:

www.vitaguitar.com

You can see if you stretch the site horizontal it stays fixed just as it should. But when you pull it vertically it scales and is all pixelated. It's also strange because the site was originally made in flash cs4 and worked great and then it was taken down for 2 years. Now.. I just updated the flv's and brought everything in to cs6.. still using As2 and nothing else was change and I have this scaling issue. The site is comprised of the "index" page which is basically the frame to show my 4 pages/movies (swf's).

Thank you again kglad!

In Response To BB_2112 · Apr 02, 2013

you're not using the html page published by flash and you're not using swfobject correctly. in particuler:

swfobject.createCSS("html", "height:100%; background-color: #000000;");

swfobject.createCSS("body", "margin:0; padding:0; overflow:hidden; height:100%;");

are problematic causing your swf to scale vertically.

In Response To kglad · Apr 02, 2013

I took everything down (re-published) and I'm in the middle of uploading everything again. Please tell me.. do I only need to upload the .swf's -- published html's -- and the included swfobject +AC_RunAtiveContent files to the host?

I do not need to upload the .flv's nor fla's to the host.. correct? Please excuse my ignorence and thank you so much!

In Response To BB_2112 · Apr 02, 2013

O.k. after the re-upload nothing changed so when you say I'm not using the html page published by flash? I did upload all the html pages published out by flash set to no scale and to match movie. Do I just need to go in and edit something? What do I do to fix this? Thank you sir!!

In Response To BB_2112 · Apr 02, 2013

You say..

"swfobject.createCSS("html", "height:100%; background-color: #000000;");

swfobject.createCSS("body", "margin:0; padding:0; overflow:hidden; height:100%;");

are problematic causing your swf to scale vertically."

Then how do I fix this?

In Response To BB_2112 · Apr 02, 2013

in flash pro open the fla that published index.swf.

click file>publish settings>html and make sure html is ticked and that you publish index.html.

the publish your swf and html file from flash.

then upload your html and swf files to your website. do not open the html in another problem and do not edit it.

In Response To kglad · Apr 02, 2013

I did exactly what you said and it still does not stay "fixed" vertically. Even after setting it to "no scale". Strange. Is there something in the code maybe you could take a look? Must be something simple I'm missing. Thank you for your help sir!

In Response To BB_2112 · Apr 02, 2013

Here is the published "index" html code. Just wondering if there should be something after salign?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>index</title>

var swfVersionStr = "11.4.0";

var xiSwfUrlStr = "";

var flashvars = {};

var params = {};

params.quality = "high";

params.bgcolor = "#000000";

params.play = "true";

params.loop = "true";

params.wmode = "window";

params.scale = "noscale";

params.menu = "true";

params.devicefont = "false";

params.salign = "";

params.allowscriptaccess = "sameDomain";

var attributes = {};

attributes.id = "index";

attributes.name = "index";

attributes.align = "middle";

swfobject.createCSS("html", "height:100%; background-color: #000000;");

swfobject.createCSS("body", "margin:0; padding:0; overflow:hidden; height:100%;");

swfobject.embedSWF(

"index.swf", "flashContent",

"1209", "800",

swfVersionStr, xiSwfUrlStr,

flashvars, params, attributes);

</script>

</head>

<body>

</a>

<p>This page requires Flash Player version 11.4.0 or higher.</p>

</div>

</body>

</html>?

In Response To BB_2112 · Apr 02, 2013

in your flash pro, click help>about Flash or about Adobe Flash pro or something similar. attach a screenshot showing your cs pro version.

and those createCSS lines to:

	swfobject.createCSS("html", "height:1209; width:800; background-color: #000000;");
			swfobject.createCSS("body", "margin:0; padding:0; overflow:hidden; height:1209; width:800;")

In Response To kglad · Apr 02, 2013

Flash Pro CS6 (v12.0.2.529)

And where do I find those created CSS lines to the above? Should I post the swfobject file? Thank you so much!

In Response To BB_2112 · Apr 02, 2013

I am not very good with Flash so I apologize about this. A frend set up the code while I designed everything in After effects. But.. I'm sure this can be figured out as it worked fine a few years ago before updating the flv movies. Please not: This was created originally in CS4 Pro and was brought in CS6 to update. Thanks!

In Response To BB_2112 · Apr 02, 2013

you have a screwed-up html template.

in flash pro, click file>publish settings>html and in the template combobox what's listed?

In Response To kglad · Apr 02, 2013

In Response To BB_2112 · Apr 02, 2013

I hope this is what you asked for. Thank you for your pateince with me.

In Response To BB_2112 · Apr 02, 2013

what's your operating system? win xp, vista, 7, 8?

In Response To BB_2112 · Apr 02, 2013

Getting desperate to get this solved. Is there anyone online at this time that can give me any more advice on how to keep my site at a "fixed" height. Again.. it does not scale when a browser expands horizontally (looks great) stays fixed .. but does scale when a browser moves vertical which makes the site get distorted/pixelated. Thanks to anyone for some more help!

In Response To BB_2112 · Apr 02, 2013

Hey Kglad.. it's win. 7 64 bit

In Response To BB_2112 · Apr 02, 2013

download: http://www.kglad.com/Files/forums/default.zip

and unzip the default.html template and add to the following directory:

C:\users\<your name>\AppData\Local\Adobe\Flash CS6\en_US\Configuration\HTML

if you like the html you're currently using, rename the default.html that's currently there to something like screwy_vertical_sizing.html before over-writting with the downloaded default.html

then restart flash pro and publish another html page and upload it.

In Response To kglad · Apr 02, 2013

Much appreciated! Although I'm getting an Error 404 - Not Found -- on the link.

In Response To BB_2112 · Apr 02, 2013

that should be: http://www.kglad.com/Files/forums/Default.zip

In Response To kglad · Apr 02, 2013

O.k. got it! I will report back soon. I see some light at the end of the tunnel!

In Response To BB_2112 · Apr 02, 2013

ok.

In Response To kglad · Apr 02, 2013

Well, I feel beat up. I tried the new default.html with no luck and now I'm back to the original. What's strange is I can play the html's in my browser and they are fixed and look great know matter what I do to the browser. But when I solo the swf's they distort if the browser is moved vertical. How diffucult can this be? If there is any else we can try I would be so thankful. Can't even focus on what's really important.. my music as this website has drained the life out of me. Thanks again sir!

Fixed aspect ratio throughout the end users browser

1 Correct answer