浏览器显示应用程序太大,Flex Flash

时间:2012-03-18 15:05:58

标签: flash flex

我正在使用Flash Builder构建一个网站。 我建立了一个带有缩略图的图库,它沿着底部水平滚动,选中后会显示标题和全尺寸图像。

我遇到的问题是它在我的计算机上运行并且看起来很棒,在所有分辨率和FF,IE和Chrome中 - 然而,在我朋友的计算机上,整个应用程序对于他的浏览器来说太大了,所以他看到了是标题,图像和水平滚动条的顶部。

如何减小计算机上的显示尺寸,以及如何确定导致错误的原因?应用程序的宽度和高度都设置为100%,所以我真的不知道为什么会发生这种情况。

感谢您的帮助和建议!

修改

是否有办法测试屏幕尺寸,并相应调整应用程序的高度/宽度?我更习惯于Flex for mobile,而不是浏览器......

有趣的是,当我使应用程序高度=“80%”时,它在他的计算机上使问题更加严重......这是违反直觉的,因为它应该使应用程序更小并且更能够适应他的屏幕 - 是否会出现屏幕拍帮助?

最新编辑

好吧 - 在他的计算机上,似乎应用程序的大小调整为他的moniter大小,而不是他浏览器中可用的区域(moniter space减去工具栏),但是对于MY Computers,如果我调整大小,它会自动调整浏览器--->我怎么能纠正这个?

HTML EMBED代码:

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

      

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 name="google" value="notranslate" />         
    <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.  Fix for
         Firefox 3.6 focus border issues.  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: #000000; }   
        object:focus { outline:none; }
        #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 = "11.1.0";
        // 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 = "#000000";
        params.allowscriptaccess = "sameDomain";
        params.allowfullscreen = "true";
        var attributes = {};
        attributes.id = "PhotoGallery";
        attributes.name = "PhotoGallery";
        attributes.align = "middle";
        swfobject.embedSWF(
            "PhotoGallery.swf", "flashContent", 
            "100%", "100%", 
            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 
            11.1.0 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="100%" height="100%" id="PhotoGallery">
            <param name="movie" value="PhotoGallery.swf" />
            <param name="quality" value="high" />
            <param name="bgcolor" value="#000000" />
            <param name="allowScriptAccess" value="sameDomain" />
            <param name="allowFullScreen" value="true" />
            <!--[if !IE]>-->
            <object type="application/x-shockwave-flash" data="PhotoGallery.swf" width="100%" height="100%">
                <param name="quality" value="high" />
                <param name="bgcolor" value="#000000" />
                <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
                    11.1.0 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>     

* 最新编辑 - 3月27日*

我还没有找到这个问题的原因,如果/当我这样做,我会更新这篇文章。与此同时,似乎最好的解决方案是使用代码自动调整到监视器/屏幕空间 - davidethell提供了这样的代码的一个很好的例子。

感谢大家的帮助!

2 个答案:

答案 0 :(得分:1)

您可以收听JavaScript resize event,然后使用ExternalInterface调用flex resize函数。如果您想了解您的显示器尺寸,您可以在Capabilities课程中找到它。另请考虑在空间可选比例属性中阅读有关Flash属性的this文章。

希望这有所帮助。祝你好运。

答案 1 :(得分:1)

在这种情况下我们必须做的是,如果可用的浏览器宽度或高度低于某个阈值,则缩小整个应用程序。该应用并不总是看起来很好缩小,但如果要求避免滚动条你没有太多选择。这是我们目前使用的代码:

if ( stage.stageWidth < this.minWidth || stage.stageHeight < this.minHeight ) {
    var widthDiff : Number = stage.stageWidth / this.minWidth;
    var heightDiff : Number = stage.stageHeight / this.minHeight;
    var rescalePercent : Number = ( heightDiff < widthDiff ) ? heightDiff : widthDiff;
    this.scaleX = rescalePercent * 0.8;
    this.scaleY = rescalePercent * 0.8;
}

此代码位于主应用程序mxml文件中的函数中,并在应用程序完整处理程序中调用。我们只需将应用程序minWidth和minHeight设置为我们的最低要求,并检查阶段尺寸。然后我们根据更合适的比例(高度或宽度)重新缩放。

希望有所帮助。