如何在 Flash SWF 加载时显示预览图像？

Posted 2023-02-16

【中文标题】如何在 Flash SWF 加载时显示预览图像？

【英文标题】：How to show a preview image while Flash SWF is loading?

【发布时间】：2011-10-25 20:05:10

【问题描述】：

我的网站上有一些最大为 100KB 的第 3 方 Flash SWF。例如Flash 视频播放器“JWPlayer”SWF 为 98KB。

这对于使用宽带的人来说很好，但对于拨号速度较慢的访问者来说就不那么好了。例如，在 40 kbits/s 下，我们说 20 秒下载。

问题在于，在连接速度较慢时，所有访问者看到的都是静态的白屏，因此可能会认为页面已死机而关闭。如果我右击SWF要去的区域，Adobe Flash Player Object正在占用空间，但是第3方SWF还没有加载完。

我希望网站访问者看到加载微调器 GIF 或类似的东西。

很遗憾，第 3 方 SWF 都没有“预加载器”元素。而且它们不是开源的，所以我不能给它们添加预加载器。

所以，我的问题是……

有没有办法在 SWF 加载时显示加载图像，最好是 GIF 动画？

例如，有什么方法可以强制 Adob​​e Flash Player 在 SWF 中加载图像时显示它？

我没有任何 Flash 编码技能，因此不包括在 SWF 中创建额外 SWF 或 SWF 的解决方案可能不适合我，但可能值得添加到万一其他人也有类似的问题。

我正在使用 swfobject 2.2 嵌入 SWF，因此考虑到这一点或至少不会破坏的解决方案会有所帮助。

非常感谢您花时间阅读我的帖子，即使您帮不上忙。

戴夫

【问题讨论】：

我考虑过使用 jquery 在 Flash 对象前面使用 CSS z-index 添加图像，然后在 SWF 加载后使用 swfobject 回调函数将其删除。我过去这样做是为了在 SWF 前面放一个徽标。但这涉及到玩弄 flash 对象的“wmode”参数，并且有一些问题可能与 Flash 和 wmode 参数有关，也可能没有解决。我不记得问题是否与 Flash 版本或浏览器有关，但足以阻止我使用这种方法。

【参考方案1】：

最后我们决定采用混合设置：

对于低带宽的用户，我们将 flash 参数 wmode 设置为“透明”，并将 gif 设置为背景图片（没有加载微调器，这些低带宽用户认为页面什么都不做）。

但是，使用 wmode = transparent 有一个负面影响，即 Flash 不会使用硬件加速。但是对于我们的低带宽用户来说，例如我们的视频足够低，在大多数情况下它们并不需要硬件加速。

对于高带宽用户，我们提供例如更高比特率的视频，因此硬件加速变得更加重要。对于这些用户，我们使用 wmode = direct，并且无需加载微调器 GIF，因为无论如何 SWF 加载速度都足够快。

由于我们的 SWF 文件及其还必须加载的 XML 文件的大小，我们已经达到了 1 兆位带宽的限制，如果用户有更高的带宽，我们不使用加载图形，反之亦然.其他人可能会发现其他级别更合适。

如果可能，我们希望能够将带宽限制设置得更低，就像在旧 PC 上，我们可以使用 384 kbit/s 的一些 Harware 视频加速，但删除用户的加载微调器像这样的低带宽意味着他们等待太久而屏幕上什么也没有发生，这似乎比在视频播放期间丢失几帧更糟糕。

这是 Adob​​e 对各种 wmode 以及不同浏览器如何处理它们的描述的链接。

http://kb2.adobe.com/cps/127/tn_12701.html#main_BrowserSupportForWmodes

希望有一天这对其他人有所帮助。

戴夫

【参考方案2】：

在不知道您使用的是哪个 3rd 方 swf 的情况下，这可能会很困难，但这里有一些事情需要考虑：

一种方法是在加载之前隐藏 swf（或 swf 所在的 div），然后在加载完成后将其显示出来。同时，您可以将微调器/加载图像放在它的位置。也就是说，您真正需要的是加载完成后调用的 javascript 函数。一旦发生这种情况，您可以使用 jQuery 分别对您的微调器和 swf 使用 .show() 或 .hide()。

JWPlayer 有一些events that you can make use of。看起来onReady 可以为您解决问题。

至于其他 3rd 方 swfs，我会在他们的文档中查找类似的 javascript 回调。我知道swfobject has an onLoad callback，以及其他一些嵌入解决方案，例如Swiff，假设您可以使用它们。

祝你好运！

编辑：当 swf 已成功嵌入时可能会调用 swfobject 的回调，而不必加载。最好的办法是尝试一下，看看它是否有效 - 或尽可能使用 3rd 方 swf 的回调函数。

编辑 2：这是一个闪存加载程序示例。

import flash.net.URLRequest;
import flash.display.Loader;
import flash.events.Event;

function startLoad() 
    var mLoader:Loader = new Loader();
    var mRequest:URLRequest = new URLRequest("url-to-your-swf.swf");
    mLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onCompleteHandler);
    mLoader.load(mRequest);


function onCompleteHandler(loadEvent:Event)
    addChild(loadEvent.currentTarget.content);
    //Here's where you specify your js function
    ExternalInterface.call("flashLoaded"); // <-- where 'flashloaded' is a js function



startLoad();

【讨论】：

嗨 Chazbot。我已经同意你的建议了。首先，您的 EDIT 似乎是正确的。似乎只要在页面（包含 Adob​​e Flash Player）上创建了 OBJECT，swfobject 就会触发它的 callbackFunction。即它在 swf 加载之前触发，所以我不能使用这个回调函数。所以，我设法为每个 3rd 方 swf 找到了 onReady 事件，并尝试了这些。

不幸的是，似乎使用 jquery 的 hide() 函数，本质上做了一个 CSS display:none，结果证明这会停止或阻止 flash 对象。 onReady 事件永远不会触发。在网上阅读似乎这甚至可能是设计使然。以下帖子建议您可以将包含 flash 对象的 div 设置为 CSS width:1px; 而不是使用 display:none；高度 1px; overflow:hidden .... stoimen.com/blog/2009/04/14/load-flash-swf-in-hidden-div .... 然后当 onReady 事件触发时，将大小设置回完整大小。

虽然，这种方法成功地允许我在加载 swf 时显示加载图像，但对于使用 Firefox Flashblock 插件的用户（它会停止任何 Flash 播放，直到您按下 Flashblock 播放按钮），他们看不到 Flashblock 播放按钮，因为它位于 1px x 1px 的 div 内。这意味着对于这些用户来说，页面看起来像是损坏了。

嗯...很抱歉，这种解决方法不符合您的需求。我能想到的唯一其他解决方案是研究创建一个容器 swf 来加载后续 swf，并在其中显示一个预加载器图形。我知道您正试图避免 AS3 工作，但在这些独特的情况下，它似乎是最好的选择，前提是您可以将您的 3rd 方 swfs 加载到父 swf 中。

已编辑帖子以显示上述闪存加载程序 - 希望这对老兄有帮助！