6 Replies Latest reply: Jun 13, 2012 2:13 AM by Bibis431 RSS

    how to maintain aspect ratio of an external swf file in index.html the same as in flash.swf?

    Bibis431

      I need help with embeding a flip book into flash CS5 AS3, I am using a UILoader to run an external  single swf flip book (with no extra files or folders), using scale contents in the UILoader settings, the flip book loads and works in flash, but when I publish the settings, the flip book is scaled down to a very small window in index.html.

       

      I have tried resizing the flip book before publishing (the flip book) and using maintain aspect ratio in the UILoader settings, but no joy so far.

       

      Scale contents setting produces a small window in index.html and Maintain aspect ratio produces a very large window that over flows the whole screen.

       

      I think the index.html needs amending as the swf file works fine, but unsure what to do. I have also tried changing the height below in both instances from 660 to 1500, but that had no effect either.

       

       

      Many thanks in advance for all replies.

       

      Here is the index.html file

       

       

      <!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>preloader</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <style type="text/css" media="screen">

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

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

        #flashContent { width:100%; height:100%; text-align: center; }

        </style>

      </head>

      <body>

        <div id="flashContent">

         <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="1360" height="660" id="preloader" align="middle">

          <param name="movie" value="preloader.swf" />

          <param name="quality" value="high" />

          <param name="bgcolor" value="#ffffff" />

          <param name="play" value="true" />

          <param name="loop" value="true" />

          <param name="wmode" value="gpu" />

          <param name="scale" value="showall" />

          <param name="menu" value="true" />

          <param name="devicefont" value="false" />

          <param name="salign" value="" />

          <param name="allowScriptAccess" value="sameDomain" />

          <param name="allowFullScreen" value="true" />

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

          <object type="application/x-shockwave-flash" data="preloader.swf" width="1360" height="660">

           <param name="movie" value="preloader.swf" />

           <param name="quality" value="high" />

           <param name="bgcolor" value="#ffffff" />

           <param name="play" value="true" />

           <param name="loop" value="true" />

           <param name="wmode" value="gpu" />

           <param name="scale" value="showall" />

           <param name="menu" value="true" />

           <param name="devicefont" value="false" />

           <param name="salign" value="" />

           <param name="allowScriptAccess" value="sameDomain" />

           <param name="allowFullScreen" value="true" />

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

        • 1. Re: how to maintain aspect ratio of an external swf file in index.html the same as in flash.swf?
          adninjastrator Community Member

          1360 wide is VERY wide! Many monitors will have problems displaying that.

          What is the resolution of the monitor you are testing on?

          What is the desired display size?

          #flashContent { width:100%; height:100%; text-align: center; }

          Have you tried getting rid of the 100% and just setting the desired display size as <object> dimensions?... of course you need to use a correct aspect ratio.

          Best wishes,

          Adninjastrator

          • 2. Re: how to maintain aspect ratio of an external swf file in index.html the same as in flash.swf?
            Bibis431 Community Member

            Thank you for replying, the 1360 width should really be 1280 as  the desired disply is a standard 15" laptop screen, I have tested this on 4 different laptops, it displays ok, although this is not really necessary as I can change the width.

             

            My problem is there are left,right and top boxes / banner and the UILoder is in the center.

             

            I tried changing the 100% to object width and height exact dimensions and smaller but no joy.

             

            If I use scale contents in the UILoader sttings I get a very small window and if untick it whether or not I tick maintain aspect ratio, the image overflows past the right edge of the screen.

             

            I forgot to mention I am a newbie to flash.

            • 3. Re: how to maintain aspect ratio of an external swf file in index.html the same as in flash.swf?
              adninjastrator Community Member

              I think you are attempting to resize too many different things and they are not interating well together... scaling UILoader, then the .swf itself and then <object>.... that's 3 different means of attempting to set dimensions.

              While many 15" laptops may have 1280 wide resolution, most will not display the full wide. Once you get up to 1240 or some, scroll bars may be required. And it's almost impossible to perfectly fit to height to multiple screens... everyone has different toolbars etc that affect the height.

              So attempting to maintain aspect ratio may shrink the size way down so the height will fit.

              As for boxes in top right and left... we have no idea what that means.

              Please post a link to the actual page and then describe in detail the exact problems and we can follow along and visually see what you are talking about. Detail exactly what are the boxes and what is the UILoader.

              My advice though... do all the scaling in the HTML code, and don't attempt to do scaling in all 3 elements.

              To help you understand scaling as it relates to aspect ratio a little better:

              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/tutorials/scale/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/tutorials/scale/noScale.html

               

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

              http://www.cidigitalmedia.com/tutorials/scale/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/tutorials/scale/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.

              The trickiest part of trying to go full screen is that it’s difficult to make the Flash wider without making it taller also, that is, to maintain the correct proportions or aspect ratio of everything on the stage. These methods are just simple scaling accomplished with html. There are also methods to dynamically scale the stage and it’s elements using Actionscript… but that’s a much more complex undertaking.

              Best wishes,

              Eye for Video

              www.cidigitalmedia.com

              Best wishes,

              Adninjastrator

              • 4. Re: how to maintain aspect ratio of an external swf file in index.html the same as in flash.swf?
                Bibis431 Community Member

                Thanks again for your time. The flip book has scroll bars so it is only necessary to fit it in the center and it will do the rest but right now my main problem is fitting it in the center in some reasonable size as it already has zoom and scroll, but I can't seem to manage that.I may opt-out to move it out so it has it's own URL.

                 

                Once again, thank you very much.

                • 5. Re: how to maintain aspect ratio of an external swf file in index.html the same as in flash.swf?
                  adninjastrator Community Member

                  We just don't have enough information to be of much more help... we really need to see the whole page.

                  Best wishes,

                  Adninjastrator

                  • 6. Re: how to maintain aspect ratio of an external swf file in index.html the same as in flash.swf?
                    Bibis431 Community Member

                    I found out that the flip book publisher was the cause of the problem as it was designed for a mobile device, although on the desktop it was displaying in full screen, it was causing the scaling problem.

                     

                    I did away without embeding and just linked to it as an external URL.

                     

                    Thanks for your help.