Insérer une animation Flash

Les animations de type Flash deviennent de plus en plus présentes sur le web. Elles apportent du mouvement, des couleurs et peuvent très facilement égayer vos contenus. Mais, une fois que vous avez créer votre animation avec Adobe Flash Professional ou avec un autre logiciel, comment l'insérer dans une page Html ? Ci-dessous, je vous propose deux variantes.

La solution courante

Voici la manière la plus courante d'insérer, dans une page Html, quelques lignes de code vous permettant d'utiliser un fichier contenant une animation Flash. Ce n'est pas la plus commode, mais c'est celle qui est la plus souvent conseillée dans les livres que j'ai consulté.

Dans cet exemple, nous supposons que votre fichier flash s'appelle "fichier.swf", qu'il est situé dans le répertoire flash/ et que sa taille est de 150 pixels de large (width="150px") et de 200 pixels de hauteur (height="200px"). Cet exemple fait également référence à une "Id" que nous intitulerons "idflash".

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="http://download.macromedia.com
  /pub/shockwave/cabs/flash/swflash.cab#version=8,0,23,0"
  width="150" height="200" id="idflash">
  <param name="movie" value="http://domain.com/flash/fichier.swf" />
  <param name="quality" value="high" />
  <param name="bgcolor" value="#ffffff" />
  <embed src="http://domain.com/flash/fichier.swf"
    quality="high" bgcolor="#ffffff"
    width="150" height="200" name="idflash"
    type="application/x-shockwave-flash"
    pluginspace="http://www.macromedia.com/go/getflashplayer">
  </embed>
</object>

Une fois que vous avez inséré et adapté ce code dans votre page Html, il vous suffira de la charger dans votre navigateur et d'admirer le fonctionnement de votre animation Flash. C'est tout !

Les inconvénients de la solution courante

Le problème avec la solution courante que nous venons d'évoquer, c'est que si vous utilisez le doctype Xhtml (Strict), votre page ne passera pas la validation W3C. En effet, le Xhtml est allergique à la balise <embed>.

Dans ce cas, si vous souhaitez rester conforme aux normes Xhtml tout en ne boudant pas votre envie d'utiliser la balise <embed>, il vous reste la bidouille. Ici, comme souvent, la bidouille passera par Javascript. L'avantage d'utiliser ce langage, c'est qu'il permet de tromper le validateur W3C.

Voici ce que cela donne :

<script type="text/javascript">
  // <![CDATA[
    document.write("<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\""); 
    document.write(" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,23,0\"");
    document.write(" width=\"150\" height=\"200\"");
    document.write(" id=\"idflash\">");
    document.write("<param name=\"movie\"");
    document.write(" value=\"http://domain.com/flash/fichier.swf\" />");
    document.write("<param name=\"quality\"");
    document.write(" value=\"high\" />");
    document.write("<param name=\"bgcolor\"");
    document.write(" value=\"#ffffff\" />");
    document.write("<embed src=\"http://domain.com/flash/fichier.swf\"");
    document.write(" quality=\"high\" bgcolor=\"#ffffff\"");
    document.write(" width\"150\" height=\"200\"");
    document.write(" name=\"idflash\"");
    document.write(" type=\"application/x-shockwave-flash\"");
    document.write(" pluginspace=\"http://www.macromedia.com/go/getflashplayer\">");
    document.write("</embed>");
    document.write("</object>");
  // ]]>
</script>

Bien entendu, ce n'est pas une solution très “élégante”, mais elle fonctionne !

Ceci dit, ce recours à Javascript comporte un avantage non-négligeable. En effet, rien ne vous interdit d'utiliser des variables et d'inclure ce code dans une fonction.

Voici un petit exemple de fonction Javascript dans laquelle nous avons utilisé quatre variables: varFichier (variable contenant le fichier .swf et son chemin), varId (dans laquelle vous spécifier l'id utilisé dans la balise <object> et <embed>), varWidth (qui contient la largeur en pixel de votre animation flash) et varHeight (qui contient la hauteur en pixel de votre animation flash).

Voici le code :

<script type="text/javascript">
  // <![CDATA[
  function ecrireFlash(varFichier, varId, varWidth, varHeight) {
    document.write("<object classid=\"clsid:D27CDB6E-AE6D-11cf96B8-444553540000\"");
    document.write(" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,23,0\"");
    document.write(" width=\"" + varWidth + "\" height=\"" + varHeight + "\"");
    document.write(" id=\"" + varId + "\">");
    document.write("<param name=\"movie\"");
    document.write(" value=\"" + varFichier + "\"/>");
    document.write("<param name=\"quality\"");
    document.write(" value=\"high\" />");
    document.write("<param name=\"bgcolor\"");
    document.write(" value=\"#ffffff\" />");
    document.write("<embed src=\"" + varFichier + "\"");
    document.write(" quality=\"high\" bgcolor=\"#ffffff\"");
    document.write(" width\"" + varWidth + "\" height=\""+ varHeight + "\"");
    document.write(" name=\"" + varId + "\"");
    document.write(" type=\"application/x-shockwave-flash\"");
    document.write(" pluginspace=\"http://www.macromedia.com/go/getflashplayer\">");
    document.write("</embed>");
    document.write("</object>");
  }
  // ]]>
</script>

Pour couronner le tout, vous pouvez également mettre cette fonction dans un fichier externe. Il vous suffira, ensuite, d'inclure un lien vers ce fichier Javascript entre les balises <head> et </head> de votre page. Voici comment vous pouvez écrire ce "lien" :

<script type="text/javascript" src="http://domain.com/fichier.js"></script>

Une autre manière d'inclure une animation flash

Soyons clair, la solution dite "courante" que je viens d'exposer est, à la fois, lourde et bancale. Elle nous oblige surtout à trafiquer notre code et ce n'est jamais très honorable.

Heureusement, quelque part sur le net, j'ai dégoté une autre manière d'écrire un code permettant d'utiliser une animation Flash. L'avantage de ce code, c'est qu'il n'utilise plus la balise <embed>. Ce code réussit brillamment la validation W3C  et, en plus, il est plus simple :

<object type="application/x-shockwave-flash" data="http://domain.com/flash/fichier.swf" width="150"height="200">
  <param name="movie" value="http://domain.com/flash/fichier.swf" />
  <param name="wmode" value="transparent" />
  <!-- Ecrire ici un texte alternatif ! -->
</object>

De plus — cerise sur le gâteau — ce code vous permet d'ajouter un texte alternatif. Celui-ci s'affichera à la place de l'animation flash si celle-ci ne fonctionne pas.

Écrire une fonction en PHP

Pour terminer, je voudrais proposer une fonction écrite en Php et qui permet d'appeler une animation Flash.

Dans cette fonction, j'utilise quatre variables : $fichier (nom du fichier swf et de son chemin d'accès), $width (largeur en pixels de l'animation Flash), $height (hauteur en pixels de l'animation Flash) et $alternative (texte alternatif qui sera affiché si l'exécution de l'application Flash échoue).

Notez que le texte alternatif est facultatif.

Voici le code :

function ecrireflash($fichier, $width, $height, $alternative = "") {
  echo '<object type="application/x-shockwave-flash"';
  echo ' data="' . $fichier . '"';
  echo ' width="' . $width . '"height="' . $height . '">' . "\r\n";
  echo '<param name="movie" value="' . $fichier . '" />' . "\r\n";
  echo '<param name="wmode" value="transparent" />' . "\r\n";
  echo ($alternative != '') ? $alternative . "\r\n" : '';
  echo '</object>' . "\r\n";
}

Ici aussi, cette fonction peut être intégrée dans un fichier externe que vous appelez à l'aide des fonctions include(), include_once(), require() ou require_once().

Bon amusement !