1 2 Previous Next 50 Replies Latest reply on Apr 10, 2013 1:19 PM by BB 2112

    Fixed aspect ratio throughout the end users browser

    BB 2112

      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!

        • 1. Re: Fixed aspect ratio throughout the end users browser
          kglad Adobe Community Professional & MVP

          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.

          • 2. Re: Fixed aspect ratio throughout the end users browser
            BB 2112 Level 1

            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!

            • 3. Re: Fixed aspect ratio throughout the end users browser
              kglad Adobe Community Professional & MVP

              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.

              • 4. Re: Fixed aspect ratio throughout the end users browser
                BB 2112 Level 1

                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!

                • 5. Re: Fixed aspect ratio throughout the end users browser
                  BB 2112 Level 1

                  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!!

                  • 6. Re: Fixed aspect ratio throughout the end users browser
                    BB 2112 Level 1

                    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?

                    • 7. Re: Fixed aspect ratio throughout the end users browser
                      kglad Adobe Community Professional & MVP

                      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.

                      1 person found this helpful
                      • 8. Re: Fixed aspect ratio throughout the end users browser
                        BB 2112 Level 1

                        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!

                        • 9. Re: Fixed aspect ratio throughout the end users browser
                          BB 2112 Level 1

                          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">

                          <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">

                                      <!-- Adobe recommends that developers use SWFObject2 for Flash Player detection. -->

                                      <!-- For more information see the SWFObject page at Google code (http://code.google.com/p/swfobject/). -->

                                      <!-- Information is also available on the Adobe Developer Connection Under "Detecting Flash Player versions and embedding SWF files with SWFObject 2" -->

                                      <!-- Set to minimum required Flash Player version or 0 for no version detection -->

                                      var swfVersionStr = "11.4.0";

                                      <!-- xiSwfUrlStr can be used to define an express installer SWF. -->

                                      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>

                                  <!-- SWFObject's dynamic embed method replaces this alternative HTML content for Flash content when enough JavaScript and Flash plug-in support is available. -->

                                  <div id="flashContent">

                                      <a href="http://www.adobe.com/go/getflash">

                                          <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />

                                      </a>

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

                                  </div>

                              </body>

                          </html>?

                          • 10. Re: Fixed aspect ratio throughout the end users browser
                            kglad Adobe Community Professional & MVP

                            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;")

                            • 11. Re: Fixed aspect ratio throughout the end users browser
                              BB 2112 Level 1

                              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!

                              • 12. Re: Fixed aspect ratio throughout the end users browser
                                BB 2112 Level 1

                                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!

                                • 13. Re: Fixed aspect ratio throughout the end users browser
                                  kglad Adobe Community Professional & MVP

                                  you have a screwed-up html template.

                                   

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

                                  1 person found this helpful
                                  • 15. Re: Fixed aspect ratio throughout the end users browser
                                    BB 2112 Level 1

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

                                    • 16. Re: Fixed aspect ratio throughout the end users browser
                                      kglad Adobe Community Professional & MVP

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

                                      • 17. Re: Fixed aspect ratio throughout the end users browser
                                        BB 2112 Level 1

                                        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!

                                        • 18. Re: Fixed aspect ratio throughout the end users browser
                                          BB 2112 Level 1

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

                                          • 19. Re: Fixed aspect ratio throughout the end users browser
                                            kglad Adobe Community Professional & MVP

                                            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.

                                            • 20. Re: Fixed aspect ratio throughout the end users browser
                                              BB 2112 Level 1

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

                                              • 22. Re: Fixed aspect ratio throughout the end users browser
                                                BB 2112 Level 1

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

                                                • 24. Re: Fixed aspect ratio throughout the end users browser
                                                  BB 2112 Level 1

                                                  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!

                                                  • 25. Re: Fixed aspect ratio throughout the end users browser
                                                    BB 2112 Level 1

                                                    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.

                                                    • 26. Re: Fixed aspect ratio throughout the end users browser
                                                      BB 2112 Level 1

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

                                                      • 27. Re: Fixed aspect ratio throughout the end users browser
                                                        kglad Adobe Community Professional & MVP

                                                        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.

                                                        • 28. Re: Fixed aspect ratio throughout the end users browser
                                                          BB 2112 Level 1

                                                          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!!

                                                          • 29. Re: Fixed aspect ratio throughout the end users browser
                                                            BB 2112 Level 1

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

                                                            • 30. Re: Fixed aspect ratio throughout the end users browser
                                                              kglad Adobe Community Professional & MVP

                                                              you're welcome.

                                                               

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

                                                              • 31. Re: Fixed aspect ratio throughout the end users browser
                                                                BB 2112 Level 1

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

                                                                • 32. Re: Fixed aspect ratio throughout the end users browser
                                                                  kglad Adobe Community Professional & MVP

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

                                                                  • 33. Re: Fixed aspect ratio throughout the end users browser
                                                                    BB 2112 Level 1

                                                                    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">

                                                                    <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%; }

                                                                            </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" />

                                                                                    <!--[if !IE]>-->

                                                                                    <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" />

                                                                                    <!--<![endif]-->

                                                                                        <a href="http://www.adobe.com/go/getflash">

                                                                                            <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />

                                                                                        </a>

                                                                                    <!--[if !IE]>-->

                                                                                    </object>

                                                                                    <!--<![endif]-->

                                                                                </object>

                                                                            </div>

                                                                        </body>

                                                                    </html>

                                                                    • 34. Re: Fixed aspect ratio throughout the end users browser
                                                                      kglad Adobe Community Professional & MVP

                                                                      :

                                                                       

                                                                       

                                                                       

                                                                      <!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" />

                                                                                      <!--[if !IE]>-->

                                                                                      <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" />

                                                                                      <!--<![endif]-->

                                                                                          <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>

                                                                                      <!--[if !IE]>-->

                                                                                      </object>

                                                                                      <!--<![endif]-->

                                                                                  </object>

                                                                              </div>

                                                                          </body>

                                                                      </html>

                                                                      • 35. Re: Fixed aspect ratio throughout the end users browser
                                                                        BB 2112 Level 1

                                                                        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

                                                                        • 36. Re: Fixed aspect ratio throughout the end users browser
                                                                          kglad Adobe Community Professional & MVP

                                                                          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" />

                                                                                          <!--[if !IE]>-->

                                                                                          <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" />

                                                                                          <!--<![endif]-->

                                                                                              <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>

                                                                                          <!--[if !IE]>-->

                                                                                          </object>

                                                                                          <!--<![endif]-->

                                                                                      </object>

                                                                                  </div>

                                                                              </body>

                                                                          </html>

                                                                          1 person found this helpful
                                                                          • 37. Re: Fixed aspect ratio throughout the end users browser
                                                                            BB 2112 Level 1

                                                                            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.

                                                                            • 38. Re: Fixed aspect ratio throughout the end users browser
                                                                              kglad Adobe Community Professional & MVP

                                                                              no problem and, congrats!

                                                                              • 39. Re: Fixed aspect ratio throughout the end users browser
                                                                                BB 2112 Level 1

                                                                                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!!

                                                                                1 2 Previous Next