7 Replies Latest reply on May 16, 2011 8:30 AM by Chris W. Griffith

    Scaling SWF to browser NOT WORKING!

    curlykath21

      I have built my website in flash catalyst with a stage size of 1000 x 699 of course this is not a perfect resolution for all browsers so I want to scale the SWF to fit within the browser window.

       

      This should be simple I thought!

       

      First I edited the HTML file to make all size values 100%.....no joy there.

       

      So i read on the forums here (http://forums.adobe.com/thread/652613?tstart=0) that you have to import your project into flash builder and add this line of code to the .mxml file

       

      preinitialize="systemManager.stage.scaleMode='showAll'

       

      And then edit the HTML file to set the SWF size.

       

      That doesn't work.

       

      It seems that it will resize but if you choose to make it resizeable then you can no longer set the stage size. Mine seems to default to something like 550 x 400?!!

       

      Editing the HTML file at this point does very little unless you reset the top width and height variables and then we are back at a correctly sized but non scalable site!

       

      FRUSTRATED!!! AND ANNOYED!!! This used to be so simple i don't know why i didn't save myself the headache and spend the extra time building my site in flash pro instead of catalyst!!!!!!!

       

       

       

      SEE HTML FILE BELOW

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <!-- saved from url=(0014)about:internet -->
      <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">   
          <!--
          Smart developers always View Source.
         
          This application was built using Adobe Flex, an open source framework
          for building rich Internet applications that get delivered via the
          Flash Player or to desktops via Adobe AIR.
         
          Learn more about Flex at http://flex.org
          // -->
          <head>
              <title></title>        
              <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
              <!-- Include CSS to eliminate any default margins/padding and set the height of the html element and
                   the body element to 100%, because Firefox, or any Gecko based browser, interprets percentage as
                   the percentage of the height of its parent container, which has to be set explicitly.  Initially,
                   don't display flashContent div so it won't show if JavaScript disabled.
              -->
              <style type="text/css" media="screen">
                  html, body    { height:100%; }
                  body { margin:0; padding:0; overflow:auto; text-align:center;
                         background-color: #031926; }  
                  #flashContent { display:none; }
              </style>
             
              <!-- Enable Browser History by replacing useBrowserHistory tokens with two hyphens -->
              <!-- BEGIN Browser History required section -->
              <link rel="stylesheet" type="text/css" href="history/history.css" />
              <script type="text/javascript" src="history/history.js"></script>
              <!-- END Browser History required section --> 
                 
              <script type="text/javascript" src="swfobject.js"></script>
              <script type="text/javascript">
                  <!-- For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. -->
                  var swfVersionStr = "10.0.45";
                  <!-- To use express install, set to playerProductInstall.swf, otherwise the empty string. -->
                  var xiSwfUrlStr = "playerProductInstall.swf";
                  var flashvars = {};
                  var params = {};
                  params.quality = "high";
                  params.bgcolor = "#031926";
                  params.allowscriptaccess = "sameDomain";
                  params.allowfullscreen = "true";
                  var attributes = {};
                  attributes.id = "Main";
                  attributes.name = "Main";
                  attributes.align = "middle";
                  swfobject.embedSWF(
                      "Main.swf", "flashContent",
                      "1000", "699",                       <--------------------------------------EDIT THIS BACK TO THESE VALUES AND NO SCALING
                      swfVersionStr, xiSwfUrlStr,
                      flashvars, params, attributes);
                  <!-- JavaScript enabled so display the flashContent div in case it is not replaced with a swf object. -->
                  swfobject.createCSS("#flashContent", "display:block;text-align:left;");
              </script>
          </head>
          <body>
              <!-- SWFObject's dynamic embed method replaces this alternative HTML content with Flash content when enough
                   JavaScript and Flash plug-in support is available. The div is initially hidden so that it doesn't show
                   when JavaScript is disabled.
              -->
              <div id="flashContent">
                  <p>
                      To view this page ensure that Adobe Flash Player version
                      10.0.45 or greater is installed.
                  </p>
                  <script type="text/javascript">
                      var pageHost = ((document.location.protocol == "https:") ? "https://" :    "http://");
                      document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='"
                                      + pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" );
                  </script>
              </div>
                
                 <noscript>
                  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1000" height="699" id="Main">  <----------------------------EDITING THIS DOES NOTHING


                      <param name="movie" value="Main.swf" />
                      <param name="quality" value="high" />
                      <param name="bgcolor" value="#031926" />
                      <param name="allowScriptAccess" value="sameDomain" />
                      <param name="allowFullScreen" value="true" />
                      <!--[if !IE]>-->
                      <object type="application/x-shockwave-flash" data="Main.swf" width="1000" height="699"> <----------------------------EDITING THIS ALSO DOES NOTHING
                          <param name="quality" value="high" />
                          <param name="bgcolor" value="#031926" />
                          <param name="allowScriptAccess" value="sameDomain" />
                          <param name="allowFullScreen" value="true" />
                      <!--<![endif]-->
                      <!--[if gte IE 6]>-->
                          <p>
                              Either scripts and active content are not permitted to run or Adobe Flash Player version
                              10.0.45 or greater is not installed.
                          </p>
                      <!--<![endif]-->
                          <a href="http://www.adobe.com/go/getflashplayer">
                              <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>
              </noscript>       
         </body>
      </html>

        • 1. Re: Scaling SWF to browser NOT WORKING!
          Chris W. Griffith Adobe Community Professional

          Hum....

           

          Let me start by asking if you Exported the modified project out of Flash Builder? It is just a shot in the dark.

           

          I was able follow the instructions from the FAQ and got a simple FC to scale.

           

          Now, if your project can wait just bit, Adobe has announced an update to Flash Catalyst 5.5 which adds support for resizeable applications! A preview release is still available on labs.adobe.com. It is a bit a old, but you might find it useful during the transition. The other added benefit of the new release is that it allows for round trip editing between Flash Catalyst and Flash Builder.

           

          Chris

          • 2. Re: Scaling SWF to browser NOT WORKING!
            curlykath21 Level 1

            Yes I did sadly...

             

            It all seems very strange. I have tried Flash Catalyst Panini but it cannot import my already buil;t project which means alot of work if I want to rebuild the site again in panini.

             

            SO I guess I'll have to wait for the new build and hope that fixes all the problems.

             

            Is there anyway to set the site to scale and to set the stage size other than setting the size of the embedded SWF in the html file?

             

            Thanks

            • 3. Re: Scaling SWF to browser NOT WORKING!
              Chris W. Griffith Adobe Community Professional

              Not that I am aware of. Flash Catalyst CS 5.5 should ship VERY SOON, so hopefully that will be the right solution for you.

               

              Chris

              1 person found this helpful
              • 4. Re: Scaling SWF to browser NOT WORKING!
                sanyi90

                Hello Chris, I have tried in Catalyst 5.5, but the liquid swf in browser still does not work. Work only in fixed size. I also added the tag: preinitialize = "systemManager.stage.scaleMode = 'showAll' in Builder. It gives me error. What is the right procedure in Catalyst 5.5?

                • 5. Re: Scaling SWF to browser NOT WORKING!
                  Chris W. Griffith Adobe Community Professional

                  Without seeing the project, try this: Make a basic Flash Catalyst 5.5 project, with some elements that are assigned constraints. Make sure it is set to resizable at that start (it should be by default). Then export it. See if that project works as you want. Then compare the HTML code and any application code to your project. Maybe that will provide the 'aha' you need.

                   

                  I would offer to take a look but I have 5 project all due ASAP.

                   

                  Chris

                  • 6. Re: Scaling SWF to browser NOT WORKING!
                    sanyi90 Level 1

                    Thank you Chris for the time that you dedicate for me. But probably I have not explained my problem correctly. I would like to have from Catalyst 5.5 a swf that when I resize the browser window, all content will resize whitout the elements change position between them, but must change only dimension. Briefly, I make big browser window; all my work is visualized in big size proportionally. I make little window, all my work will visualize all little size proportionally. In the Catalist 5.0 this we have resolved in Builder with a little script. But in new Builder version this script work not.

                    • 7. Re: Scaling SWF to browser NOT WORKING!
                      Chris W. Griffith Adobe Community Professional

                      Hum. That is a very different problem than I first understood. Maybe one of the FC engineers can weigh in...?

                       

                      Chris