Développement web indépendant à Montpellier

Publié le dimanche 22 mars 2009 08:35:43

Intégration d'animations flash : SwfObjet, Embed, Object

Quelle méthode d'intégration choisir : en effet, il existe diverses méthodes pour intégrer du contenu flash dans les pages , elles ont toutes leurs avantages et leurs inconvénients : cet article se propose d'en fait la synthèse.

La méthode classique, utilisant la balise

L'intégration préconisée par le est simple, la balise object est recommandée. Je précise que la balise embed est dépréciée.

<!--début de l'animation Flash-->
<object type="application/x-shockwave-flash" data="animation.swf" width="200" height="200">
        <param name="movie" value="animation.swf" />
        <!--début de l'alternative-->
        <p>Alternative de l'animation</p>
        <!-- fin de l'alternative-->
</object>
<!--fin de l'animation Flash-->


C'est très simple, et cela permet de rester valide aux normes . Le code généré par certains logiciel est très verbeux, et à plus de la moitié inutile.

Une méthode alternative : SwfObject

C'est la méthode que nous avons choisi pour afficher le bandeau Flash de notre page d'accueil. Elle inclue un petit script Javascript à télécharger sur la page de l'éditeur : voir le site du projet SwfObject.

L'intégration se fait de la manière suivante avec la dernière version de SwfObject :

Inclusion du script :

<script type="text/javascript" src="swfobject.js"></script>

On place un calque qui va accueillir l'animation :

<div id="animation"></div>

Ensuite on fait l'appel au script SwfObject, il faut que le calque "animation" soit chargé, c'est à dire que :

  • soit il faut placer le code Javascript en dessous de l'élément dans lequel on va charger le flash,
  • soit on fait cet appel dans le body.onload.

(Les 2 façons de faire trouvent leur justification au niveau de l'architecture globale de l'application web).

Appel de SWFObject

 //les variables à passer à l'animation   
var flashvars={url:"datas/datas.xml"};
//ici la liste des paramètres
var params={menu:"false"};
//ici l'identifiant de l'élément Object
var attributes={id:"swf_banniere",name:"swf_banniere"};
  swfobject.embedSWF("animation.swf","animation","200","200","9.0.0","expressInstall.swf",flashvars,params,attributes); 

Il est à noter que si vous utilisez l'ancienne version d'SwfObject, le code généré contient la balise embed dépréciée. Que le soit généré ou non par Javascript, votre code n'est donc dans ce cas plus valide, même s'il passe au validateur. (c'est un peu tatillon cela dit, puisque d'un point de vue utilisateur, rien ne change ).

Quelle est la meilleur méthode ?

Les deux mon colonel ! disons plutôt que je n'ai pas d'opinion à ce sujet, voici les avantages et inconvénients de chacune :

Avantages/Inconvénients de la classique :

  • plus légère, pas d'inclusion de Javascript (pas besoin non plus de support Javascript),
  • pas du gestion du Flash, en cas d'absence, l'alternative s'affiche, et c'est tout.

Avantages et inconvénients de l'inclusion SwfObject :

  • Gestion du
  • on affiche pas l'animation sans Javascript.

Notez cet article !

  • Actuellement 0 sur 5 étoiles
  • 1
  • 2
  • 3
  • 4
  • 5

Note : 0/5 (0 notes attribuées)

Merci d'avoir participé !

Vous avez déjà noté cette page, vous ne pouvez la noter qu'une fois !

Votre note a été changée, merci de votre participation !

Bonne résolution ! j'arrête d'alourdir mes pages avec des boutons de partage, mais vous pouvez continuer de partager :-)

Commentaires

  1. moos | comaptibilité swf avec IE8 |


    Bonjour,

    Très intéressant comme sujet, j'ai un swf qui ne fonctionne pas avec IE8 quelle est d'après vous la bonne méthode d'intégration ?

    voici le code ça fonctionne avec FF12,Safari 5 mais pas avec IE8

    <!-- MODULE Home Featured Carousel Products -->
    {if isset($products) AND $products}
    <embed src="modules/homefeaturedcarousel/3DCarouselDev.swf" flashvars="xmlprovider=modules/homefeaturedcarousel/files/urunxml.php" quality="high" pluginspage="http://...ayer" play="true" loop="true" scale="noscale" wmode="opaque" devicefont="false" bgcolor="#ffffff" name="3DCarouselDev" menu="False" allowfullscreen="false" allowscriptaccess="sameDomain" salign="lt" type="application/x-shockwave-flash" align="lt" height="230" width="750";>
    {/if}
    <!-- /MODULE Home Featured Carousel Products -->

  2. Contrairement, à ce qui est indiqué en haut de cette page, il n'y a plus de Swfobject utilisé en page d'accueil.
    C'est en lisant cette autre page ( http://...vec-jQuery ) que j'ai compris que Swfobject avait été remplacé par un slideshow développé avec jquery.
    Merci pour votre site qui explique très simplement certaines choses qui m'intriguaient.

  3. Creation... | swfobject / indexation des pages |

    Le swfobject permet de donner un Title et description à toutes les pages ?
    Merci !

  4. Stéphane | Re : et le référencement |

    Bonjour,

    J'ai fait quelques tests à ce sujet, je n'en suis pas si sur que vous à dire vrai, les contenus semblent s'indexer de manière tout aussi honorable lorsqu'il sont placés dans la balise object.
    Je n'ai toujours pas réellement de préférence, sauf dans le cas d'un site full flash ou il est sans doute préférable d'utiliser un framework comme Gaia qui prend en compte les contraintes SEO.

  5. julien Tr... | Et le référencement? |

    Il ne faut pas oublier que le référencement se fera correctement en utilisant le swfobject et pas la méthode traditionnelle...