ASP.NET Accordian 中的嵌入式 Flash 表现不佳

Question

我正在使用 ajax 工具包折叠扩展器，当我尝试在内容部分嵌入一些 Flash 时，我注意到它的表现有点“时髦”。

您可以在以下位置查看我现在的工作：http://kristinsconfections.com/gallery.aspx。 正如您所看到的，当您切换手风琴时，它有点不稳定。 我正在从 flickr 中提取 Flash 幻灯片，所以我根本无法控制它。 该网站仅供想要成为面包师的朋友使用，因此它不是高优先级，只是非常令人沮丧！ 我可以使用 javascript、.net 甚至 jquery 做任何事情？

这是我在该页面上使用的确切代码：

<cc1:Accordion ID="MyAccordion" runat="server" SelectedIndex="0"
        HeaderCssClass="accordionHeader" ContentCssClass="accordionContent"
        FadeTransitions="true" FramesPerSecond="40" TransitionDuration="250" AutoSize="None">
        <Panes>
            <cc1:AccordionPane ID="pnlCakes" runat="server">
                <Header><div ><span style="float:left;">Cakes</span></div></Header>
                <Content>
                    <object width="572" height="429" type="application/x-shockwave-flash"
                     data="http://www.flickr.com/apps/slideshow/show.swf?v=67089"> 
                    <param name="flashvars" value="&offsite=true&amp;lang=en-us&page_show_url=%2Fphotos%2F28792515%40N08%2Fsets%2F72157612640424865%2Fshow%2F&page_show_back_url=%2Fphotos%2F28792515%40N08%2Fsets%2F72157612640424865%2F&set_id=72157612640424865&jump_to=" />
                    <param name="allowFullScreen" value="true" />
                    <param name="movie" value="http://www.flickr.com/apps/slideshow/show.swf?v=67089" />
                    </object>
                </Content>
            </cc1:AccordionPane>
             <cc1:AccordionPane ID="pnlCookies" runat="server">
                <Header><div ><span style="float:left;">Cookies</span></div></Header>
                <Content>
                 <object width="572" height="429"  type="application/x-shockwave-flash"
                 data="http://www.flickr.com/apps/slideshow/show.swf?v=67089"> 
                <param name="flashvars" value="&offsite=true&amp;lang=en-us&page_show_url=%2Fphotos%2F28792515%40N08%2Fsets%2F72157612640405779%2Fshow%2F&page_show_back_url=%2Fphotos%2F28792515%40N08%2Fsets%2F72157612640405779%2F&set_id=72157612640405779&jump_to=" />
                <param name="allowFullScreen" value="true" />
                <param name="movie" value="http://www.flickr.com/apps/slideshow/show.swf?v=67089" />
                </object>
                </Content>
            </cc1:AccordionPane>
            <cc1:AccordionPane ID="pnlCupcakes" runat="server">
                <Header><div ><span style="float:left;">Cupcakes</span></div></Header>
                <Content>
                <object width="572" height="429"  type="application/x-shockwave-flash"
                 data="http://www.flickr.com/apps/slideshow/show.swf?v=67089"> 
                <param name="flashvars" value="&offsite=true&amp;lang=en-us&page_show_url=%2Fphotos%2F28792515%40N08%2Fsets%2F72157612589253131%2Fshow%2F&page_show_back_url=%2Fphotos%2F28792515%40N08%2Fsets%2F72157612589253131%2F&set_id=72157612589253131&jump_to=" />
                <param name="allowFullScreen" value="true" />
                <param name="movie" value="http://www.flickr.com/apps/slideshow/show.swf?v=67089" />
                </object>
                </Content>
            </cc1:AccordionPane>
        </Panes>
</cc1:Accordion>

Answer 1

我发现 Ajax 工具包的东西总的来说太笨重了。 JQuery 非常易于使用，具有良好的跨浏览器支持和可扩展性，因此我们优先使用它，我建议您也这样做。 JQuery UI 套件中有一个 accordian 小部件 应该符合要求。

如果将所有 Flash 影片加载到隐藏的 div 中会导致性能不佳，那么您可以挂钩一个事件来更改可以在 Flash 中加载的位置。 这在手风琴页面上有记录（并且可以使用 JQuery 轻松完成）。

Answer 2

这似乎是 Firefox 中长期存在的bug，不特定于任何特定小部件。 我最好的尝试：

<script type="text/javascript">
    function pageLoad() {
        var acc = $find('<%= MyAccordion.ClientID %>_AccordionExtender');
        acc.add_selectedIndexChanged(MyAccordion_SelectedIndexChanged);
    }
    function MyAccordion_SelectedIndexChanged(sender) {
        $("object").css("visibility", "hidden");
        setTimeout(
            function() { 
                $("object").eq(sender.get_SelectedIndex()).css("visibility", "visible"); 
            }, 1000);
    }
</script>

1. 隐藏对象可见性，以便手风琴动画播放
2. 等待 1 秒 - 希望足够长的时间让动画完成，但不要太长，以免出现明显的滞后
3. 显示隐藏的对象

这修复了闪烁，但闪光对象将动画播放时消失

Answer 3

我在 FireFox3、IE8 和 Chrome 下测试了它，实际上它在 IE（版本 8）中似乎运行得很好，而在 FF3 和 Chrome 中则不太好。

我确实找到了这篇文章在某个地方遇到了同样的问题，似乎将 FadeTransitions 属性设置为“False”可以修复它，尽管我打赌这不是您所希望的解决方案。

Answer 4

您是否尝试过暂时将预览图像放入手风琴中？ 那么当用户点击图像时使用javascript将其替换为flash呢？ 我认为那看起来会好很多。

当有人在手风琴中选择不同的窗格时（不确定要监视的事件 - 查看 AccordionBehavior.js），那么您可以删除闪存，用图像替换它并继续。

我认为这样您就不必担心导致您出现问题的 Flash/浏览器交互。

Answer 5

我还建议使用 jQuery 手风琴小部件。 我使用过它，它非常易于使用，重量轻，适用于所有浏览器，而且我没有发现任何错误。 有很多皮肤可供选择，如果到了紧要关头，构建自己的皮肤并不是那么痛苦。

除此之外，请查看嵌入 SWF 的方式，尤其是 wmode 属性。 这里写了一篇很好的解释性文章，你可以从那开始。 您可以忽略 GPU 和 direct 模式，因为我认为您没有使用为 Flash Player 10 编译的 SWF。

当然，您应该卸载那些不可见。