Flash intégré dans asp.net accordian fonctionne mal

Question

J'utilise l'extension d'accordion ajax et je remarque qu'elle fonctionne un peu "funky". lorsque j'essaie d'intégrer du flash dans les sections de contenu.

Vous pouvez voir ce que je travaille actuellement à l'adresse: http://kristinsconfections.com/gallery.aspx. Comme vous pouvez le constater lorsque vous basculez l'accordéon, c'est un peu agité. Je tire le diaporama flash de flickr afin que je ne puisse pas le contrôler du tout. Le site est seulement pour un ami qui essaie de devenir un boulanger, ce n'est donc pas une priorité, c'est très frustrant !! Tout ce que je peux faire avec javascript, .net ou même jquery?

Voici le code exact que j'utilise sur cette 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"> 
                    <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

Je trouve la boîte à outils Ajax trop maladroite en général. JQuery est si facile à utiliser, possède une bonne prise en charge et une extensibilité inter-navigateurs que nous l’utilisons de préférence, et je vous recommande de faire de même. Il existe un widget accordéon dans la suite JQuery UI qui convient à la facture.

Si le fait de charger toutes les animations Flash dans les div masqués vous donne de piètres performances, vous pouvez vous connecter à une modification en cas de modification dans laquelle vous pourriez être chargé dans Flash. Ceci est documenté sur la page accordéon (et peut facilement être fait avec JQuery).

Answer 2

Cela semble être un bug de longue date dans Firefox non spécifique à un widget particulier. Mes meilleures tentatives:

<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. Cacher la visibilité de l'objet pour que les animations de l'accordéon soient lues par
2. Attendez 1 seconde - assez longtemps pour que les animations se terminent, mais pas trop longtemps pour qu'il y ait un retard notable
3. Afficher l'objet caché

Ceci corrige le scintillement, mais l'objet flash disparaîtra pendant la lecture des animations

.

Answer 3

Je l'ai testé sous FireFox3, IE8 et Chrome, et il semble en fait que cela fonctionne bien dans IE (version 8) et moins agréable dans FF3 et Chrome.

J'ai trouvé cet article quelque part qui a rencontré le même problème, et il semble que définir la propriété FadeTransitions sur "False" le corrige, bien que je parie que ce n’est pas la solution que vous espériez.

Answer 4

Avez-vous essayé de placer une image d'aperçu dans l'accordéon pour le moment? Ensuite, lorsque l'utilisateur clique sur l'image à l'aide de javascript pour la remplacer par le flash? Je pense que cela aurait l'air beaucoup mieux.

Lorsque quelqu'un sélectionne un volet différent dans l'accordéon (vous n'êtes pas sûr de l'événement à surveiller - regardez dans AccordionBehavior.js), vous pouvez alors supprimer le flash, le remplacer par une image et continuer.

Je pense que vous n'auriez pas à vous soucier de l'interaction flash / navigateur qui vous pose problème.

Answer 5

Je recommanderais également d'utiliser le widget accordéon jQuery . J'ai travaillé avec et il est très facile à utiliser, léger, fonctionne sur tous les navigateurs et je n'ai trouvé aucun bogue. Vous pouvez choisir un grand nombre de peaux et, si vous le voulez bien, ce n'est pas si pénible de créer votre propre peau.

Par ailleurs, observez la manière dont vous intégrez vos fichiers SWF, en particulier l'attribut wmode . Il existe un bon article explicatif écrit ici , vous pourriez commencer avec ça. Vous pouvez ignorer les modes GPU et direct , car je pense que vous n'utilisez pas de fichier SWF compilé pour Flash Player 10.

Et bien sûr, vous devez décharger les animations flash qui ne sont pas visibles.