Ajouter du flash en respectant les standards

Par Nicolas, . Lien permanent Général


Le but de cet article est de montrer comment intégrer une animation flash dans une page tout en gardant cette page valide; c'est-à-dire qu'elle respecte la DTD HTML 4.01 stricte. Il serait d'ailleurs simple de faire la même chose pour du XHTML 1.0

Si on regarde comment intégrer une animation flash, on trouve généralement ce genre de code:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="100" height="100" id="movie">
<param name="movie" value="movie.swf">
<embed src="movie.swf" quality="high"
width="100" height="100" name="movie"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>

Et ça donne cela

Si on regarde la DTD HTML 4.01, la balise <embed> n'est pas valide. Mais à quoi sert-elle et pourquoi la mettre alors ? C'est une balise créee par netscape. Malheureusement elle est aussi utilisée par les navigateurs se basant sur ce même modèle. On va malgré tout l'enlever.

La balise <object> est en revanche bien supportée par les différents navigateurs. Aucun attribut n'est obligatoire mais voici les plus utilisés:

  • classid: c'est une URI composé d'un identifiant unique d'un contrôle Active X. C'est en fait un identifiant unique permettant d'identifier le plugin flash de macromedia. Cela permet d'invoquer le contrôle active X approprié.
  • codebase:URL où se trouve le fichier CAB contenant le plugin.
  • data:nom de l'animation chargée par le plugin.
  • type:type de contenu (content type) des données de l'attribut data.

Le fait de mettre l'attribut codebase semble bloquer les navigateurs basé sur gecko. Hop à la trappe. Nous verrons un peu plus bas à quoi peut servir cet attribut.

Le fait de mettre m'attribut classid invoque le contrôle active X et bien sûr ça ne fonctionne pas avec autre chose que Internet Explorer! On va donc enlever cet attribut et préciser le type de données (data): application/x-shockwave-flash

On obtient alors quelque chose comme cela:

<object type="application/x-shockwave-flash" data="animation.swf" width="100" height="100">
<param name="movie" value="animation.swf">
</object>

Cette fois, ça fonctionne partout et surtout c'est valide!

Reparlons de l'attribut codebase. Il permet au navigateur de retrouver le plugin. Mais il sert aussi à Internet Explorer pour déterminer si la version de flash installée est suffisante pour lire l'animation. C'est une façon de pouvoir mettre simplement son plugin à jour. On va donc rajouter cet attribut. Mais du coup cela ne va plus fonctionner sur les autres navigateurs. La parade: mettre des URL absolues pour les animations.

Un exemple d'animation

Et le code associé est:

<object type="application/x-shockwave-flash"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
data="http://www.nikrou.net/flash/animation.swf" width="100" height="100">
<param name="movie" value="http://www.nikrou.net/flash/animation.swf">
Contenu par défaut
</object>

Cette article est en partie basé sur Flash Satay d'Alistapart

Haut de page