Flash:同一页面上的许多相同的SWF

时间:2011-06-07 19:58:37

标签: flash actionscript-3 internet-explorer firefox

摘要

我正在尝试制作一个网页上有多个相同的SWF。我有一个问题,它是愚蠢的慢加载(虽然下载时间很好)。我在每个单元格中有一个4x4表格,在iframe中嵌入了一个swf文件。 (注:4 X 4 table => 16 SWFS)

我的AS3代码非常简单:

package
{
    import flash.display.Sprite;
    import flash.system.System;
    import flash.text.TextField;

    public class ActionscriptProject extends Sprite
    {
        public function ActionscriptProject()
        {
            var txt:TextField = new TextField();
            txt.x=0;
            txt.y=0;
            txt.width=5000;
            txt.height=5000;
            addChild(txt);
            txt.htmlText+="<font size='45'>"+System.totalMemory/1048576 + " MB"+"</font>";
        }
    }
}

我使用这个html在iframe中加载它:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Flash Testing</title>
</head>
<body>

<table border="1">
    <tr>
        <td>
            <iframe allowtransparency='true' scrolling='no' src='Flash/ActionscriptProject.html'></iframe>
        </td>
        <td>
            <iframe allowtransparency='true' scrolling='no' src='Flash/ActionscriptProject.html'></iframe>
        </td>
        <td>
            <iframe allowtransparency='true' scrolling='no' src='Flash/ActionscriptProject.html'></iframe>
        </td>
        <td>
            <iframe allowtransparency='true' scrolling='no' src='Flash/ActionscriptProject.html'></iframe>
        </td>
    </tr>
    <tr>
        ...
    </tr>
    <tr>
        ...
    </tr>
    <tr>
        ...
    </tr>
</table>    

</body>
</html>

注意:ActionscriptProject.html只是Flash Builder使用该应用程序创建的标准html。但在The_asMan的要求下,我将其包括在内:

<!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: #ffffff; }   
            #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.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 = "#ffffff";
            params.allowscriptaccess = "sameDomain";
            params.allowfullscreen = "true";
            var attributes = {};
            attributes.id = "ActionscriptProject";
            attributes.name = "ActionscriptProject";
            attributes.align = "middle";
            swfobject.embedSWF(
                "ActionscriptProject.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 
                10.0.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="ActionscriptProject">
                <param name="movie" value="ActionscriptProject.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#ffffff" />
                <param name="allowScriptAccess" value="sameDomain" />
                <param name="allowFullScreen" value="true" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="ActionscriptProject.swf" width="100%" height="100%">
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="#ffffff" />
                    <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.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>     
   </body>
</html>

浏览器

在Chrome中没有任何问题。所有应用程序加载速度非常快(我估计会在3秒内完成)。

在IE 8中,问题很少。

在IE 7和Firefox 3.6.17中,页面需要很长时间才能加载。我还没有在其他浏览器中测试过 在Firefox中,页面加载大约需要34秒。

调试信息(Firefox)

总共System.totalMemory报告swfs使用了大约42 MB的组合内存。

以下是Firebug中网络标签的屏幕截图:

Full Size Image enter image description here

问题

  1. 有没有一种方法可以将多个相同的swfs嵌入到网页中?
  2. 为什么IE和Firefox难以挣扎?我怀疑它与IE和Firefox每个只有一个线程来运行插件(Flash)的事实有关。
  3. 我有一个用AS2编写的类似应用程序(不是我写的,我只有swf文件)。它要复杂得多,但它在IE和FF中加载的速度要快几个数量级。当AS2没有时,AS3是否有理由将浏览器固定?
  4. 如何将多个AS3 swfs嵌入FF&amp; IE 7没有固定浏览器?
  5. 有没有办法让应用程序更轻量化?

5 个答案:

答案 0 :(得分:1)

您是否尝试构建自己加载其他swfs的容器swf?这可能会更快,因为Firefox不必处理一遍又一遍地初始化swf的开销。创建一个空白电影可以非常简单地加载一堆其他电影并将它们放置在网格排列中。

答案 1 :(得分:0)

探索空白swf x 16的加载时间。这是如何比较的?如果它与你的swf中的16个明显不同,那么你的swf必须进行一些繁重的初始化,如果是这样的话,试着避免这种情况。

Flash播放器确实需要花费一些时间来加载,其中16个比一个花费更长的时间;如果你需要多个玩家,你可以通过在页面加载后将它们加载到DOM中来获得更好的用户体验。

正如其他人所说,Flash播放器并没有真正考虑到这种用途,最好避免这种情况。

答案 2 :(得分:0)

也许你可以错开使用JavaScript加载SWF。让JavaScript一次构建您的HTML,一个或两个SWF / TD,中间有少量时间。这可能会让浏览器有机会思考。

答案 3 :(得分:0)

你能改变你的框架的CSS吗?那么15个容器有一个“display:none”设置,另一个容器手动设置高度和宽度来填充它们的空间?你破解了在不需要的部分上有一些jquery调用* .hide()。

这样你的第一个td是唯一一个带flash的,并包含一些隐藏其他tds的代码。

答案 4 :(得分:0)

您是否尝试将Flash / ActionscriptProject.html放置在子域中? (要使其正常工作,您需要修改主机文件)。这通常有助于异步加载操作。

如果您将脚本标记放在正文底部加载的html中,或者在非常短暂的延迟后调用它,该怎么办?这样,HTML将加载,它将被FF和IE7视为“加载”。