5 Replies Latest reply on Nov 16, 2006 1:26 PM by kimbflex

    resize to fit browser window

    kimbflex Level 1
      does anyone know how i can set my Flex app to scale to fit the browser window . I tried setting the html parameters and stage.scaleMode = "exactFit" etc.. but neither seems to work

      ??

      An example would be nice.

      kimb

        • 1. Re: resize to fit browser window
          Level 1
          The file below is automatically generate via Flex Builder 2 for my pmportal application. The flex app scales to the full browser window.

          <!-- saved from url=(0014)about:internet -->
          <html lang="en">
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <title></title>
          <script src="AC_OETags.js" language="javascript"></script>
          <style>
          body { margin: 0px; overflow:hidden }
          </style>
          <script language="JavaScript" type="text/javascript">
          <!--
          // -----------------------------------------------------------------------------
          // Globals
          // Major version of Flash required
          var requiredMajorVersion = 9;
          // Minor version of Flash required
          var requiredMinorVersion = 0;
          // Minor version of Flash required
          var requiredRevision = 0;
          // -----------------------------------------------------------------------------
          // -->
          </script>
          </head>

          <body scroll="no">
          <script language="JavaScript" type="text/javascript" src="history.js"></script>
          <script language="JavaScript" type="text/javascript">
          <!--
          // Version check for the Flash Player that has the ability to start Player Product Install (6.0r65)
          var hasProductInstall = DetectFlashVer(6, 0, 65);

          // Version check based upon the values defined in globals
          var hasRequestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);


          // Check to see if a player with Flash Product Install is available and the version does not meet the requirements for playback
          if ( hasProductInstall && !hasRequestedVersion ) {
          // MMdoctitle is the stored document.title value used by the installation process to close the window that started the process
          // This is necessary in order to close browser windows that are still utilizing the older version of the player after installation has completed
          // DO NOT MODIFY THE FOLLOWING FOUR LINES
          // Location visited after installation is complete if installation is required
          var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn";
          var MMredirectURL = window.location;
          document.title = document.title.slice(0, 47) + " - Flash Player Installation";
          var MMdoctitle = document.title;

          AC_FL_RunContent(
          "src", "playerProductInstall",
          "FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"" ,
          "width", "100%",
          "height", "100%",
          "align", "middle",
          "id", "pmportal",
          "quality", "high",
          "bgcolor", "#ffffff",
          "name", "pmportal",
          "allowScriptAccess","sameDomain",
          "type", "application/x-shockwave-flash",
          "pluginspage", " http://www.adobe.com/go/getflashplayer"
          );
          } else if (hasRequestedVersion) {
          // if we've detected an acceptable version
          // embed the Flash Content SWF when all tests are passed
          AC_FL_RunContent(
          "src", "pmportal-debug",
          "width", "100%",
          "height", "100%",
          "align", "middle",
          "id", "pmportal",
          "quality", "high",
          "bgcolor", "#ffffff",
          "name", "pmportal",
          "flashvars",'historyUrl=history.htm%3F&lconid=' + lc_id + '',
          "allowScriptAccess","sameDomain",
          "type", "application/x-shockwave-flash",
          "pluginspage", " http://www.adobe.com/go/getflashplayer"
          );
          } else { // flash is too old or we can't detect the plugin
          var alternateContent = 'Alternate HTML content should be placed here. '
          + 'This content requires the Adobe Flash Player. '
          + '<a href=http://www.adobe.com/go/getflash/>Get Flash</a>';
          document.write(alternateContent); // insert non-flash content
          }
          // -->
          </script>
          <noscript>
          <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
          id="pmportal" width="100%" height="100%"
          codebase=" http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
          <param name="movie" value="pmportal-debug.swf" />
          <param name="quality" value="high" />
          <param name="bgcolor" value="#ffffff" />
          <param name="allowScriptAccess" value="sameDomain" />
          <embed src="pmportal-debug.swf" quality="high" bgcolor="#ffffff"
          width="100%" height="100%" name="pmportal" align="middle"
          play="true"
          loop="false"
          quality="high"
          allowScriptAccess="sameDomain"
          type="application/x-shockwave-flash"
          pluginspage=" http://www.adobe.com/go/getflashplayer">
          </embed>
          </object>
          </noscript>
          <iframe name="_history" src="history.htm" frameborder="0" scrolling="no" width="22" height="0"></iframe>
          </body>
          </html>


          Hope that helps.

          --Andy
          • 2. Re: resize to fit browser window
            Level 1

            looks like it requires this javascript file: AC_OETags.js

            // Flash Player Version Detection - Rev 1.5
            // Detect Client Browser type
            // Copyright(c) 2005-2006 Adobe Macromedia Software, LLC. All rights reserved.
            var isIE = (navigator.appVersion.indexOf("MSIE") != -1) ? true : false;
            var isWin = (navigator.appVersion.toLowerCase().indexOf("win") != -1) ? true : false;
            var isOpera = (navigator.userAgent.indexOf("Opera") != -1) ? true : false;

            function ControlVersion()
            {
            var version;
            var axo;
            var e;

            // NOTE : new ActiveXObject(strFoo) throws an exception if strFoo isn't in the registry

            try {
            // version will be set for 7.X or greater players
            axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.7");
            version = axo.GetVariable("$version");
            } catch (e) {
            }

            if (!version)
            {
            try {
            // version will be set for 6.X players only
            axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.6");

            // installed player is some revision of 6.0
            // GetVariable("$version") crashes for versions 6.0.22 through 6.0.29,
            // so we have to be careful.

            // default to the first public version
            version = "WIN 6,0,21,0";

            // throws if AllowScripAccess does not exist (introduced in 6.0r47)
            axo.AllowScriptAccess = "always";

            // safe to call for 6.0r47 or greater
            version = axo.GetVariable("$version");

            } catch (e) {
            }
            }

            if (!version)
            {
            try {
            // version will be set for 4.X or 5.X player
            axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.3");
            version = axo.GetVariable("$version");
            } catch (e) {
            }
            }

            if (!version)
            {
            try {
            // version will be set for 3.X player
            axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.3");
            version = "WIN 3,0,18,0";
            } catch (e) {
            }
            }

            if (!version)
            {
            try {
            // version will be set for 2.X player
            axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
            version = "WIN 2,0,0,11";
            } catch (e) {
            version = -1;
            }
            }

            return version;
            }

            // JavaScript helper required to detect Flash Player PlugIn version information
            function GetSwfVer(){
            // NS/Opera version >= 3 check for Flash plugin in plugin array
            var flashVer = -1;

            if (navigator.plugins != null && navigator.plugins.length > 0) {
            if (navigator.plugins["Shockwave Flash 2.0"] || navigator.plugins["Shockwave Flash"]) {
            var swVer2 = navigator.plugins["Shockwave Flash 2.0"] ? " 2.0" : "";
            var flashDescription = navigator.plugins["Shockwave Flash" + swVer2].description;
            var descArray = flashDescription.split(" ");
            var tempArrayMajor = descArray[2].split(".");
            var versionMajor = tempArrayMajor[0];
            var versionMinor = tempArrayMajor[1];
            if ( descArray[3] != "" ) {
            tempArrayMinor = descArray[3].split("r");
            } else {
            tempArrayMinor = descArray[4].split("r");
            }
            var versionRevision = tempArrayMinor[1] > 0 ? tempArrayMinor[1] : 0;
            var flashVer = versionMajor + "." + versionMinor + "." + versionRevision;
            }
            }
            // MSN/WebTV 2.6 supports Flash 4
            else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.6") != -1) flashVer = 4;
            // WebTV 2.5 supports Flash 3
            else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.5") != -1) flashVer = 3;
            // older WebTV supports Flash 2
            else if (navigator.userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 2;
            else if ( isIE && isWin && !isOpera ) {
            flashVer = ControlVersion();
            }
            return flashVer;
            }

            // When called with reqMajorVer, reqMinorVer, reqRevision returns true if that version or greater is available
            function DetectFlashVer(reqMajorVer, reqMinorVer, reqRevision)
            {
            versionStr = GetSwfVer();
            if (versionStr == -1 ) {
            return false;
            } else if (versionStr != 0) {
            if(isIE && isWin && !isOpera) {
            // Given "WIN 2,0,0,11"
            tempArray = versionStr.split(" "); // ["WIN", "2,0,0,11"]
            tempString = tempArray[1]; // "2,0,0,11"
            versionArray = tempString.split(","); // ['2', '0', '0', '11']
            } else {
            versionArray = versionStr.split(".");
            }
            var versionMajor = versionArray[0];
            var versionMinor = versionArray[1];
            var versionRevision = versionArray[2];

            // is the major.revision >= requested major.revision AND the minor version >= requested minor
            if (versionMajor > parseFloat(reqMajorVer)) {
            return true;
            } else if (versionMajor == parseFloat(reqMajorVer)) {
            if (versionMinor > parseFloat(reqMinorVer))
            return true;
            else if (versionMinor == parseFloat(reqMinorVer)) {
            if (versionRevision >= parseFloat(reqRevision))
            return true;
            }
            }
            return false;
            }
            }

            function AC_AddExtension(src, ext)
            {
            if (src.indexOf('?') != -1)
            return src.replace(/\?/, ext+'?');
            else
            return src + ext;
            }

            function AC_Generateobj(objAttrs, params, embedAttrs)
            {
            var str = '';
            if (isIE && isWin && !isOpera)
            {
            str += '<object ';
            for (var i in objAttrs)
            str += i + '="' + objAttrs + '" ';
            for (var i in params)
            str += '><param name="' + i + '" value="' + params
            + '" /> ';
            str += '></object>';
            } else {
            str += '<embed ';
            for (var i in embedAttrs)
            str += i + '="' + embedAttrs + '" ';
            str += '> </embed>';
            }

            document.write(str);
            }

            function AC_FL_RunContent(){
            var ret =
            AC_GetArgs
            ( arguments, ".swf", "movie", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
            , "application/x-shockwave-flash"
            );
            AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);
            }

            function AC_GetArgs(args, ext, srcParamName, classid, mimeType){
            var ret = new Object();
            ret.embedAttrs = new Object();
            ret.params = new Object();
            ret.objAttrs = new Object();
            for (var i=0; i < args.length; i=i+2){
            var currArg = args
            .toLowerCase();

            switch (currArg){
            case "classid":
            break;
            case "pluginspage":
            ret.embedAttrs[args ] = args[i+1];
            break;
            case "src":
            case "movie":
            args[i+1] = AC_AddExtension(args[i+1], ext);
            ret.embedAttrs["src"] = args[i+1];
            ret.params[srcParamName] = args[i+1];
            break;
            case "onafterupdate":
            case "onbeforeupdate":
            case "onblur":
            case "oncellchange":
            case "onclick":
            case "ondblClick":
            case "ondrag":
            case "ondragend":
            case "ondragenter":
            case "ondragleave":
            case "ondragover":
            case "ondrop":
            case "onfinish":
            case "onfocus":
            case "onhelp":
            case "onmousedown":
            case "onmouseup":
            case "onmouseover":
            case "onmousemove":
            case "onmouseout":
            case "onkeypress":
            case "onkeydown":
            case "onkeyup":
            case "onload":
            case "onlosecapture":
            case "onpropertychange":
            case "onreadystatechange":
            case "onrowsdelete":
            case "onrowenter":
            case "onrowexit":
            case "onrowsinserted":
            case "onstart":
            case "onscroll":
            case "onbeforeeditfocus":
            case "onactivate":
            case "onbeforedeactivate":
            case "ondeactivate":
            case "type":
            case "codebase":
            case "id":
            ret.objAttrs[args
            ] = args[i+1];
            break;
            case "width":
            case "height":
            case "align":
            case "vspace":
            case "hspace":
            case "class":
            case "title":
            case "accesskey":
            case "name":
            case "tabindex":
            ret.embedAttrs[args ] = ret.objAttrs[args] = args[i+1];
            break;
            default:
            ret.embedAttrs[args ] = ret.params[args] = args[i+1];
            }
            }
            ret.objAttrs["classid"] = classid;
            if (mimeType) ret.embedAttrs["type"] = mimeType;
            return ret;
            }


            I couldn't put them both in the same post as it went over 10000 Bytes.

            --Andy
            • 3. resize to fit browser window
              kimbflex Level 1
              thanks for the input.

              that's what my html looks like though.

              I need to scale/zoom the swf to fit the browser, not make the 'constraints' of it fit, if you see what i mean.

              i.e. like can be done really easily with Flash 8 in Dreamweaver.
              • 4. Re: resize to fit browser window
                Level 1
                Unfortunately, I'm not too familiar with the Flash 8 stuff (I'm a total code dork, from a J2EE background), so I'm not too sure what you are aiming for. If you set the percentWidth & percentHeight at 100 on the root object of your flex app, that will do the trick

                like so:
                <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
                x="0" y="0"
                percentWidth="100"
                percentHeight="100"
                paddingLeft="0"
                paddingTop="0"
                paddingBottom="0"
                paddingRight="0" >

                • 5. Re: resize to fit browser window
                  kimbflex Level 1
                  Yeah, I also avoided Flash like the plague as it wasn't what I'd call a 'progamming ide'. Flex 2 however is pretty cool I think compared to Java or .NET.

                  The code you gave works although it doesn't scale the swf up, it just draws the 'space' the browser object is in bigger.

                  Swf files are vector based and can be 'stretched' to fit the window it's in, this used to be really easy to do in F8 by just setting stuff in the html <object> parameters.

                  That doesn't seem to be the case with F9.

                  Thanks for your input.

                  This seemingly simple thing is quite hard to do in Flash 9. Adobe put a whole article on how to do a 'Full Screen' swf with F9 yet did not tell anyone how to do a scaled swf in a browser window, just like was normal in F8. This getting to feature creep without even explaining the things 'most' developers will want to do.

                  I will continue to find a fix for this, and post a solution to benefit others when i find it.

                  kimb