Embeded Flash in asp.net accordian performs poorly

Question

I'm using the ajax toolkit accordion extender and I notice it performs a little "funky" when I try to embed some flash in the content sections.

You can see what I have working now at : http://kristinsconfections.com/gallery.aspx. As you can see when you toggle the accordion it's a little choppy. I'm pulling the flash slideshow from flickr so I can't control that at all. The site is only for a friend who is trying to become a baker so it's not high priority just highly frustrating!! Anything I can do using javascript, .net or even jquery??

Here is the exact code I am using on that page:

<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"&gt; 
                    <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"&gt; 
                <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"&gt; 
                <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

I tested it under FireFox3, IE8 and Chrome, and it actually does seem to work nicely in IE (version 8), and not so nice in FF3 and Chrome.

I did find this post of somewhere who ran into the same problem, and it seems that settings the FadeTransitions property to 'False' fixes it, though I bet it is not the solution you were hoping for.

Answer 2

Have you tried putting a preview image in the accordian for the time being? Then when the user clicks on the image using javascript to replace it with the flash? I think that would look a lot better.

When somebody selects a different pane in the accordian (not sure of the event to monitor--look in AccordionBehavior.js), then you could remove the flash, replace it with an image and proceed.

I think then you wouldn't have to worry about the flash / browser interaction that is causing you problems.

Answer 3

I find the Ajax toolkit stuff too clunky in general. JQuery is so easy to use, has good cross browser support and extensibility that we use it in preference, and I would recommend you to do the same. There is an accordian widget in the JQuery UI suite that should fit the bill.

If having all of the Flash movies loading into the hidden divs gives you poor performance there is an event that you can hook into on change where you could load in the Flash. This is documented on the accordian page (and can easily be done with JQuery).

Answer 4

I would recommend using the jQuery accordion widget, also. I've worked with it and it very easy to use, light weight, works on all browsers and I've found no bugs whatsoever. There are a lot of skins you can choose for and, if push comes to shove, it's not really that much of a pain in the ass to build your own skin.

Besides that, take a look at the way you're embedding your SWFs, especially the wmode attribute. There's a good explanatory article written here, you could start with that. You can ignore the GPU and direct modes, because I think you're not using a SWF compiled for Flash Player 10.

And of course, you should unload the flash movies that are not visible.

Answer 5

It appears to be a long standing bug in firefox not specific to any particular widget. My best attempts:

<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. Hide the object visibility so the accordion animations play through
2. Wait 1 sec - hopefully long enough for the animations to finish, but not too long so that theres noticeable lag
3. Show the hidden object

This fixes the flickering, but the flash object will disappear while the animations play through