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 HTML , 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 object

L'intégration préconisée par le W3C 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 HTML . 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 HTML 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 plugin Flash, en cas d'absence, l'alternative s'affiche, et c'est tout.

Avantages et inconvénients de l'inclusion SwfObject :

• Gestion du plugin Flash et du versionnage de celui-ci,
• On propose l'installation du plugin s'il est absent ou périmé par rapport à l'animation,
• Si l'utilisateur n'a pas Internet Explorer à jour, il a tout de même accès directement à l'animation sans avoir à cliquer dessus d'abord (avantage peu intéressant du fait de la disparition de ce problème).
• on affiche pas l'animation sans Javascript.