SWFObject 2 : documentation française

SWFObject est une méthode simple à utiliser et respectueuse des normes permettant d'intégrer du contenu Flash dans une page, en utilisant un minuscule fichier JavaScript. Cette page vous présente comment utiliser SWFObject 2.

Sommaire

Avant-propos

Qu'est-ce que SWFObject?

SWFObject 2 :

Haut de page

Pourquoi devriez-vous utiliser SWFObject ?

SWFObject 2 :

L'article de "A List Apart" à propos de l'insertion de contenu Flash Flash [ http://www.alistapart.com/articles/flashembedcagematch/ ] décrit toute la rationalité mise en place dans SWFObject 2.

Haut de page

Pourquoi SWFObject utilise JavaScript ?

SWFObject 2 utilise de manière simple JavaScript pour passer outre les problèmes qui ne peuvent pas être résolus uniquement avec des balises. Cette méthode :

Dois-je utiliser la méthode de publication statique ou dynamique ?

SWFObject 2 offre deux méthodes différentes pour insérer un contenu Flash :

Les avantages de la méthode de publication statique sont :

  1. la diffusion de contenu standardisé et respectueux des normes est favorisé
  2. le mécanisme d'insertion du contenu Flash ne repose pas sur un langage de script, et permet donc à votre contenu Flash de cibler une plus grande audience :
    • Si le plug-in Flash est installé, mais que JavaScript est désactivé ou que vous utilisez un navigateur qui ne supporte pas JavaScript, vous pourrez tout de même visionner le contenu Flash.
    • Flash fonctionne à présent également sur des périphériques tels que la PSP de Sony®, qui utilise un JavaScript très pauvre.
    • Les outils automatisés tels que les lecteurs RSS sont capable de repérer votre contenu Flash.

Les avantages de la méthode de publication dynamique sont :

  1. la possibilité d'éviter les mécanismes de "cliquez-pour-activer" pour activer le contenu actif dans Internet Explorer 6/7 et Opera 9+. Veuillez noter que Microsoft élimine actuellement tout le contenu actif de ses navigateurs Internet Explorer [ Voyez : http://blogs.msdn.com/ie/archive/2007/11/08/ie-automatic-component-activation-changes-to-ie-activex-update.aspx ].
  2. la très bonne intégration avec les applications en scripts .

Haut de page

Comment intégrer un contenu Flash en utilisant la méthode de publication statique de SWFObject

ÉTAPE 1 : Insérer votre contenu Flash ainsi que le contenu alternatif utilisant les balises

Les balises de base de SWFObject utilise la méthode d'objets imbriqués (avec les commentaires conditionnels propriétaires d'Internet Explorer) [ http://www.alistapart.com/articles/flashembedcagematch/ ] pour garantir un support optimal sur un grand nombre de navigateurs en utilisant exclusivement des balises, tout en restant conforme aux normes et standards web, et en utilisant un contenu alternatif [ http://www.bobbyvandersluis.com/flashembed/testsuite/ ]: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

 <head>
  <title>SWFObject - étape 1</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 </head>

 <body>
  <div>
   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
    <param name="movie" value="myContent.swf" />
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
    <!--<![endif]-->
     <p>Alternative content</p>
    <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
   </object>
  </div>
 </body>

</html>

NOTE : La méthode des objets imbriqués requiert une double definition d'object (l'object extérieur cible Internet Explorer, tandis que l'object intérieur vise tous les autres navigateurs). Vous devrez donc définir deux fois les attributs des object et les éléments imbriqués param.

Attributs requis :

Élément param requis :

NOTE : Nous vous conseillons de ne pas utiliser l'attribut codebase pour pointer vers l'URL de l'installation du plug-in Flash sur les serveurs d'Adobe, car c'est illégal d'après les spécifications, qui restreignent son accès au domaine courant du document. Nous vous recommandons en revanche d'utiliser à la place un contenu alternatif avec un message subtile et réfléchi, invitant l'utilisateur à participer à une expérience plus riche en téléchargeant le plug-in Flash.

Comment utiliser HTML pour configurer votre contenu Flash ?

Vous pouvez ajouter des attributs optionnels souvent utilisés [ http://www.w3schools.com/tags/tag_object.asp ] à l'élément object:

Vous pouvez aussi utiliser les éléments param optionnels spécifiques à Flash [ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_12701 ] :

Pourquoi devriez-vous utiliser un contenu alternatif ?

L'élémentobject vous permet d'imbriquer un contenu alternative à l'intérieur même de celui-ci, qui peut être affiché lorsque Flash n'est pas installé ou pas supporté. Ce contenu sera par ailleurs référencé par les moteurs de recherche, en faisant un outil idéal pour créer du contenu adapté à ces moteurs de recherche. En résumé, vous devez utiliser du contenu alternatif lorsque vous aimez créer un contenu accessible aux personnes surfant sur le Web sans plug-in [ http://www.adobe.com/devnet/flash/articles/progressive_enhancement_03.html ], lorsque vous souhaitez créer du contenu adapté aux moteurs de recherche [ http://www.adobe.com/devnet/flash/articles/progressive_enhancement_04.html ] ou lorsque vous souhaitez prévenir vos visiteurs qu'ils peuvent bénéficier d'une riche expérience utilisateur en téléchargeant le plug-in Flash.

Haut de page

ÉTAPE 2 : Inclure la bibliothèque JavaScript SWFObject en tête de votre page HTML

La bibliothèque SWFObject est un fichier JavaScript externe. SWFObject sera execute dès que le fichier sera lu et appliquera toutes les manipulations au DOM dès que celui sera chargé — pour tous les navigateurs qui le supporte, tels que Internet Explorer, Firefox, Safari et Opera 9+ — ou dans d'autres cas lorsque l'évènement onload survient :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>SWFObject - step 2</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript" src="swfobject.js"></script>
  </head>

  <body>
    <div>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
        <param name="movie" value="myContent.swf" />
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
        <!--<![endif]-->
          <p>Alternative content</p>
        <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object>
    </div>
  </body>
</html>

Haut de page

ÉTAPE 3 : Référencer votre contenu Flash avec la bibliothèque SWFObject et indiquer à SWFObject qu'en faire

D'abord, ajoutez un id unique au tag de l'object extérieur. Celui-ci définit votre contenu Flash. Ensuite, ajoutez la méthode swfobject.registerObject :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>SWFObject - step 3</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript" src="swfobject.js"></script>

    <script type="text/javascript">
    swfobject.registerObject("myId", "9.0.0", "expressInstall.swf");
    </script>

  </head>
  <body>
    <div>

      <object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">

        <param name="movie" value="myContent.swf" />
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
        <!--<![endif]-->
          <p>Alternative content</p>
        <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object>
    </div>
  </body>
</html>

Haut de page

ASTUCES

Haut de page

Comment intégrer un contenu Flash en utilisant la méthode de publication dynamique de SWFObject

ÉTAPE 1 : Créer un contenu alternatif respectant les balises standards

La méthode d'insertion dynamique de SWFObject suit un processus d'amélioration progressif [ http://www.adobe.com/devnet/flash/articles/progressive_enhancement.html ] et remplace du contenu alternatif HTML par du contenu Flash lorsque le support du Flash et du JavaScript est suffisant. Définissez d'abord votre contenu alternatif, et nommez-le en lui attribuant un identifiant id : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>SWFObject dynamic embed - step 1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  </head>
  <body>
    
    <div id="myContent">
      <p>Alternative content</p>
    </div>
    
  </body>
</html>

Haut de page

ÉTAPE 2 : Inclure la bibliothèque JavaScript SWFObject en tête de votre page HTML

La bibliothèque SWFObject est un fichier JavaScript externe. SWFObject sera execute dès que le fichier sera lu et appliquera toutes les manipulations au DOM dès que celui sera chargé – pour tous les navigateurs qui le supporte, tells que Internet Explorer, Firefox, Safari et Opera 9+ – ou dans d'autres cas lorsque l'évènement onload survient :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>SWFObject dynamic embed - step 2</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  
    <script type="text/javascript" src="swfobject.js"></script>

  </head>
  <body>
    <div id="myContent">
      <p>Alternative content</p>
    </div>
  </body>
</html>

Haut de page

ÉTAPE 3: Intégrer votre SWF avec JavaScript

swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes) possède cinq arguments obligatoires, et quatre optionnels:

  1. swfUrl (Chaîne, obligatoire) spécifie l'URL de votre SWF
  2. id (Chaîne, obligatoire) spécifie l'id de l'élément HTML (où se trouve le contenu alternatif) que vous souhaitez remplacer par votre contenu Flash
  3. width (Chaîne, obligatoire) spécifie la largeur de votre SWF
  4. height (Chaîne, obligatoire) spécifie la hauteur de votre SWF
  5. version (Chaîne, obligatoire) spécifie la version du lecteur Flash pour laquelle votre SWF a été publié (le format est: "majeur.mineur.distribution")
  6. expressInstallSwfurl (Chaîne, optionnel) spécifie l'URL du fichier SWF de l'installation expresse et active l'Adobe express install [ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b75 ]. Veuillez noter que l'installation express ne se produira qu'une fois (la première fois où elle est invoquée), et qu'elle n'est supportée que par les versions 6.0.65 et du lecteur Flash sur les plateformes Window ou Mac, et qu'elle requiert un fichier SWF d'une taille minimale de 310 x 137 px.
  7. flashvars (Objet, optionnel) spécifie les flashvars avec les paires name:value
  8. params (Objet, optionnel) spécifie les params de l'élément object element avec les paires name:value
  9. attributes (Objet, optionnel) spécifie les attributs de object avec les paires name:value

NOTE : Vous pouvez omettre les paramètres optionnels, aussi longtemps que vous respectez l'ordre de ces paramètres. Si vous ne souhaitez pas utiliser un paramètre optionnel, mais que voulez utilisez les paramètres optionnels suivants, vous pouvez simplement lui appliquer la false. Pour les flashvars, params et attributes des objets JavaScript, vous pouvez également leur passer une valeur vide : {}. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>SWFObject dynamic embed - step 3</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript" src="swfobject.js"></script>
    
    <script type="text/javascript">
    swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0");
    </script>

  </head>
  <body>
    <div id="myContent">
      <p>Alternative content</p>
    </div>
  </body>
</html>

Comment configurer le contenu Flash ?

Vous pouvez ajouter les attributs optionnels souvent utilisés [ http://www.w3schools.com/tags/tag_object.asp ] à l'élément object:

Vous pouvez aussi utiliser les éléments param optionnels spécifiques à Flash [ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_12701 ] :

Comment utiliser les objets JavaScript pour définir mes propres flashvars, params et attributes d'objets ?

La meilleure façon de définir des objets JavaScript en utilisant la notation d'objet littéral ressemble à ceci : 

<script type="text/javascript">
 var flashvars = {};
 var params = {};
 var attributes = {};

 swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0",
 "expressInstall.swf", flashvars, params, attributes);
</script>

Vous pouvez ajouter votre paires name:value quand vous définissez l'objet (NOTE : vérifiez que vous n'utilisez pas une virgule devant la dernière paire name:value paire à l'intérieur d'un objet) 

<script type="text/javascript">
 var flashvars = {
  name1: "hello";
  name2: "world";
  name3: "foobar";
 };

 var params = {
  menu: "false";
 };

 var attributes = {
  id: "myDynamicContent"
  name: "myDynamicContent"
 };

 swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0",
 "expressInstall.swf", flashvars, params, attributes);
</script>

Ou ajouter des propriétés et valeurs après la création en ajoutant une notation concaténée par point : 

<script type="text/javascript">
 var flashvars = {};
 flashvars.name1 = "hello";
 flashvars.name2 = "world";
 flashvars.name3 = "foobar";

 var params = {};
 params.menu = "false";

 var attributes = {
  id: "myDynamicContent"
  name: "myDynamicContent"
 };

 swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0",
 "expressInstall.swf", flashvars, params, attributes);
</script>

Qui peut aussi être écrit ainsi (la version raccourcie la moins lisible, pour les hard-programmers qui adore le codage en une ligne...) : 

<script type="text/javascript">
 swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", 
 {name1:"hello",name2:"world",name3:"foobar"}, {menu:"false"}, {id:"myDynamicContent",name:"myDynamicContent"});
</script>

Si vous ne souhaitez pas utiliser un argument optionnel, vous pouvez définir cette option avec false ou en tant qu'object vide (NOTE : depuis SWFObject 2.1, vous pouvez également le définir avec null ou 0) : 

<script type="text/javascript">
 var flashvars = false;
 var params = {};

 var attributes = {
  id: "myDynamicContent"
  name: "myDynamicContent"
 };

 swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0",
 "expressInstall.swf", flashvars, params, attributes);
</script>

L'objet flashvars est une manière raccourcie utilisée ici pour des raisons de facilité d'utilisation. Vous pouvez potentiellement l'ignorer et spécifier flashvars via l'objet params :

<script type="text/javascript">
 var flashvars = false;
 var params = {
  menu: "false",
  flashvars: "name1=hello&name2=world&name3=foobar"
 };

 var attributes = {
  id: "myDynamicContent"
  name: "myDynamicContent"
 };

 swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0",
 "expressInstall.swf", flashvars, params, attributes);
</script>

Haut de page

ASTUCES

Haut de page

Astuces pour migrer de SWFObject 1.5 à SWFObject 2

  1. SWFObject 2 N'EST PAS retro-compatible avec SWFObject 1.5
  2. Il est préférable désormais d'insérer tous les blocs de scripts en tête de la page HTML. Ajoutez vos scripts dans le corps de la page peut avoir un impacte visuel (par exemple des flashs du contenu alternatif remplacé), parce que votre code JavaScript sera exécuté plus tard dans la page (l'impacte précise dépend de votre implémentation).
  3. La bibliothèque elle-même est maintenant écrite en bas de casse : swfobject au lieu de SWFObject.
  4. Les méthodes ne sont accessibles que via la bibliothèque (au lieu d'être accessible via une instance SWFObject avec SWFObject 1.5).
  5. L'API est totalement différente et plus élaborée : [ http://code.google.com/p/swfobject/wiki/api ].
  6. SWFObject 2 remplace entièrement le bloc de contenu alternatif HTML, notamment l'élément conteneur HTML, par le contenu flash lorsque le support du Flash et du JavaScript est suffisant, tandis que SWFObject 1.5 ne remplace que ce qui se trouve à l'intérieur du conteneur HTML référencé. Si vous ne spécifiez pas l'attribut id, object sera automatiquement hérité de l'id de l'élément conteneur HTML de votre contenu alternatif.

Haut de page

Astuces pour migrer de UFO à SWFObject

Haut de page

Est-ce que SWFObject 2 supporte le type MIME application/xhtml+xml ?

SWFObject 2 NE supporte PAS les types XML MIME, par choix de conception.
Nous avons de nombreuses raisons de ne pas le :

Haut de page

Tutoriels (en anglais, niveau débutant)

Haut de page

Petit glossaire

Flashvars
Adobe Flash permet l'échange de données, dynamiques ou statiques, entre différents langages de programmation (HTML, PHP, etc.) et l'ActionScript. Dans la page incorporant le fichier SWF, on peut donc spécifier des flashvars (« variables Flash »).
Params
Abréviation de l'anglais « parameters » : paramètres.
W3C
Pour « World Wide Web Consortium ». Organisme visant au développement de techniques et technologies standardisées en veillant à l'application de normes.

Haut de page

Commentaires

La function de commentaries de ce wiki a été désactivée pour éviter les spasm et les abus.
Si vous avez des questions/commentaires à propos de SWFObject ou de sa documentation, ou si vous recontrez des problèmes avec l'implémentation :

  1. Vérifiez d'abord que vous avez bien lu la FAQ [ http://code.google.com/p/swfobject/wiki/faq ]
  2. Utilisez le groupe de discussion de SWFObject [ http://groups.google.com/group/swfobject ]

Si vous trouver des bugs ou souhaitez proposer de futures améliorations, vous pouvez remplir une demande sur la page « Issues » de SWFObject [ http://code.google.com/p/swfobject/issues/list ].

 

Haut de page

Cette page a été rédigée dans le but de fournir aux Internautes francophones une document technique dans leur langue pour SWFObject. Vous pouvez donc consulter la page officiel sur Google Code, retrouver le code source original du projet SWFObject sur Google Code ou encore consulter le Wiki original de la documentation.

Version actuelle de SWFObject : 2.1

Cette page est hébergée par le site Égypte. Voyez aussi ce lien