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!

In Response To BB_2112 · Apr 02, 2013

Also.. not sure if this means anything but when I test the website in flash it works perfectly and stays fixed when I expand to full screen. It just fills the background all black which is all I want.

In Response To BB_2112 · Apr 02, 2013

Just tried the new default.html again but nothing changed. Followed instructions exactly.

In Response To BB_2112 · Apr 03, 2013

go to: http://www.vitaguitar.com/index.html

so, the problem is your site is not using index.html when you go to http://www.vitaguitar.com. it's serving http://www.vitaguitar.com/index.swf.

you'll need to change that in your server's settings or .htaccess file.

In Response To kglad · Apr 03, 2013

Yes! That's it!! I thought it was strange how the top of the browser said index.swf/shockwave/ ect.. instead of the "title". I will call the Host now and get that straitened out. So the question now is how to get that html centered? As you can see it's displaying at the top left of the browser. Or maybe after straitening out the main issue will resolve this? Thank you kglad so much!!

In Response To BB_2112 · Apr 03, 2013

O.k. Got it pointing to the index.html and all is good there so I just need to get it (centered). Thanks again!

In Response To BB_2112 · Apr 03, 2013

you're welcome.

you can google horizontal centering css to see how to center your flash.

In Response To kglad · Apr 03, 2013

Hmm.. everything is centered when I "Test" in flash. Gonna try publishing a new index?

In Response To BB_2112 · Apr 03, 2013

you can google horizontal centering css to see how to center your flash.

In Response To kglad · Apr 03, 2013

Could you or someone please help and edit this so that my website is "centered" across browsers? Thank you so very much!!

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

<head>

<title>index</title>

html, body { height:100%; background-color: #000000;}

body { margin:0; padding:0; overflow:hidden; }

#flashContent { width:100%; height:100%; }

</style>

</head>

<body>

</a>

</object>

</object>

</div>

</body>

</html>

In Response To BB_2112 · Apr 03, 2013

:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title>index</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css" media="screen">
        html, body { height:100%; background-color: #000000;}
        body { margin:0; padding:0; overflow:hidden; }
       #flashContent { width:100%; height:100%;margin-left:auto;margin-right:auto;}
        </style>
    </head>
    <body>
        <div id="flashContent">
            <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="1209" height="800" id="index" align="middle">
                <param name="movie" value="index.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#000000" />
                <param name="play" value="true" />
                <param name="loop" value="true" />
                <param name="wmode" value="window" />
                <param name="scale" value="showall" />
                <param name="menu" value="true" />
                <param name="devicefont" value="false" />
                <param name="salign" value="" />
                <param name="allowScriptAccess" value="sameDomain" />
                
                <object type="application/x-shockwave-flash" data="index.swf" width="1209" height="800">
                    <param name="movie" value="index.swf" />
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="#000000" />
                    <param name="play" value="true" />
                    <param name="loop" value="true" />
                    <param name="wmode" value="window" />
                    <param name="scale" value="showall" />
                    <param name="menu" value="true" />
                    <param name="devicefont" value="false" />
                    <param name="salign" value="" />
                    <param name="allowScriptAccess" value="sameDomain" />
                
                    <a href="http://www.adobe.com/go/getflash">
                        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.g if" alt="Get Adobe Flash player" />
                    </a>
                
                </object>
                
            </object>
        </div>
    </body>
</html>

In Response To kglad · Apr 03, 2013

Thank you so much kglad.. but it's still not "centered". Does this new code need to be applied throughout all the other pages to work?

I only applied this to the index.html

In Response To kglad · Apr 03, 2013

use:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title>index</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css" media="screen">
        html, body { height:100%; background-color: #000000;}
        body { margin:0; padding:0; overflow:hidden; }
       #flashContent { width:1209px; height:100%;margin-left:auto;margin-right:auto;}
        </style>
    </head>
    <body>
        <div id="flashContent">
            <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="1209" height="800" id="index" align="middle">
                <param name="movie" value="index.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#000000" />
                <param name="play" value="true" />
                <param name="loop" value="true" />
                <param name="wmode" value="window" />
                <param name="scale" value="showall" />
                <param name="menu" value="true" />
                <param name="devicefont" value="false" />
                <param name="salign" value="" />
                <param name="allowScriptAccess" value="sameDomain" />
                
                <object type="application/x-shockwave-flash" data="index.swf" width="1209" height="800">
                    <param name="movie" value="index.swf" />
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="#000000" />
                    <param name="play" value="true" />
                    <param name="loop" value="true" />
                    <param name="wmode" value="window" />
                    <param name="scale" value="showall" />
                    <param name="menu" value="true" />
                    <param name="devicefont" value="false" />
                    <param name="salign" value="" />
                    <param name="allowScriptAccess" value="sameDomain" />
                
                    <a href="http://www.adobe.com/go/getflash">
                        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.g if" alt="Get Adobe Flash player" />
                    </a>
                
                </object>
                
            </object>
        </div>
    </body>
</html>

In Response To kglad · Apr 03, 2013

You did it!! Whew.. I can move on with my life!..lol I see you added the width 1209px and all is good!

Thank you kglad for everything sir!! And sorry about being a koo koo with the ranting questions.

In Response To BB_2112 · Apr 03, 2013

no problem and, congrats!

In Response To kglad · Apr 09, 2013

Hi Kglad.. well I came over from my other thread because I realized I never clicked on the "detect flash version" when I published my index.html page. Although I did on all the other 4 pages. So many people are not getting anything or an option if they have an older flash version. Some have reported just seeing black or no buttons while others see it just fine. So I published out a new index.html version and tried to replace some of that code (above) you did to center everything but could not get it to work. This new "detect flash version" index.html code looks quite different and when I tried to splice in there..

html, body { height:100%; background-color: #000000;}

body { margin:0; padding:0; overflow:hidden; }

#flashContent { width:1209px; height:100%;margin-left:auto;margin-right:auto;}

</style>

It did not work in the browser when testing. I'm sure it something simple so I wanted to ask if you could please edit this new index.html page with the "flash detection" for me so it will be "centered"? Then I will be good to go and people will be directed to install version 11.4. Here is that code and thank you once again sir!!

In Response To BB_2112 · Apr 09, 2013

Here it is.

<!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 = "showall";

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 10, 2013

try:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title>index</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="swfobject.js"></script>
        <script type="text/javascript">
            
            
            
            
            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 = "showall";
            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; width:1209px;margin-left:auto;margin-right:auto;height:100%;");
            swfobject.embedSWF(
                "index.swf", "flashContent",
                "1209", "800",
                swfVersionStr, xiSwfUrlStr,
                flashvars, params, attributes);
        </script>
    </head>
    <body>
        
        <div id="flashContent">
            <a href="http://www.adobe.com/go/getflash">
                <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.g if" alt="Get Adobe Flash player" />
            </a>
            <p>This page requires Flash Player version 11.4.0 or higher.</p>
        </div>
    </body>
</html>

In Response To kglad · Apr 10, 2013

O.k. great! Got this kglad. I just downloaded "notepad 2" and wanted to ask, What is the proper way to save this after copy & pasting so "everyone" can see this?

Thank you so much!!

In Response To BB_2112 · Apr 10, 2013

From what I've been reading the UTF-8 without Bom sounds like the one? So someone say.. in China can see understand it?

In Response To BB_2112 · Apr 10, 2013

Thank you kglad!! Everything looks great and I do see that it directs people if they need the targeted FP. So I'm just left wondering about the html encoding. I chose the default just to be safe (ANSI) but curious to know if UTF-8 is more universal? Appreciate all your help so very much!!

In Response To BB_2112 · Apr 10, 2013

your web page is using utf-8 encoding (specified in a meta tag).

In Response To kglad · Apr 10, 2013

What should I be using? What is best? Thanx!

In Response To BB_2112 · Apr 10, 2013

any plain text editor will work. notepad will work.

In Response To kglad · Apr 10, 2013

Sorry for my confusing question:

What encode is best? Most universal? UTF-8, ANSI, UTF-8 without BOM? This answer will set me strait. Thanks kglad!

In Response To BB_2112 · Apr 10, 2013

use utf-8

Fixed aspect ratio throughout the end users browser

1 Correct answer

Photos