![[Fléche]](../images/defaut/icones/puce_navig.gif)
Article Divers : Intégration valide de média Flash
Article sur l'intégration de média Flash respectant les recommandation du W3C
1. Média Flash et W3C
Peut-être avez vous envie d'intégrer un peu de Flash sur votre site ?
C'est tout à fait possible bien sur mais cela ne se fait pas n'importe comment !!
Hé bien justement c'est peut-être ça le problème.
Car à force de nous simplifier la vie avec genre d'outil on ne cherche pas forcément à comprendre le code source ainsi généré...
De plus ce code source généré par Dreamweaver est erroné !!
Mais je vous propose de voir tout cela en détail ci-dessous.
Nous allons suivre le plan suivant :
C'est tout à fait possible bien sur mais cela ne se fait pas n'importe comment !!
Citation
Il sert à rien ton article !! Avec Dreamweaver il suffit d'appuyer sur un bouton pour intégrer du Flash...
Hé bien justement c'est peut-être ça le problème.
Car à force de nous simplifier la vie avec genre d'outil on ne cherche pas forcément à comprendre le code source ainsi généré...
De plus ce code source généré par Dreamweaver est erroné !!
Mais je vous propose de voir tout cela en détail ci-dessous.
Nous allons suivre le plan suivant :
- Flash et les recommandations du W3C
- Intégration de Flash avec la méthode Satay
- Limites de la méthode Satay
2. Flash et les recommandations du W3C
Comme je le disais un peu plus haut, le code source généré par Dreamweaver et d'autres éditeurs est invalide d'après les recommandations du W3C.
Non pas que cela ne fonctionne pas, votre animation s'affichera sans problème, mais vous aurez des erreurs lors de l'utilisation du validateur du W3C.
Ces erreurs apparaissent car Dreamweaver (comme beaucoup d'autres éditeurs) utilise la balise <embed>... </embed> qui n'est pas valide.
Voici un exemple de code invalide que l'on retrouve sur la majorité des sites Web affichant une animation Flash :
Et bien en fait ce code possède 2 parties bien distinctes : vous pouvez remarquer que plusieurs valeurs apparaissent en double !!
Cela s'appelle la méthode " Twice Cooked ".
Elle consiste à utiliser la balise <object>... </object> pour charger l'animation dans Internet Explorer et la balise <embed>... </embed> pour les navigateurs type Netscape.
Le problème c'est que cette balise <embed>... </embed> ne fait pas partie des spécifications du XHTML...
Heureusement il est possible d'intégrer une animation Flash dans une page Web tout en conservant la validité du document aux yeux du W3C.
C'est ce que je vous propose de découvrir ci-dessous.
Non pas que cela ne fonctionne pas, votre animation s'affichera sans problème, mais vous aurez des erreurs lors de l'utilisation du validateur du W3C.
Ces erreurs apparaissent car Dreamweaver (comme beaucoup d'autres éditeurs) utilise la balise <embed>... </embed> qui n'est pas valide.
Voici un exemple de code invalide que l'on retrouve sur la majorité des sites Web affichant une animation Flash :
Code-source : XHTML
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab
#version=7,0,19,0" width="88" height="31">
<param name="movie" value="http://www.netgerdesign.com/bannieres/ban88x31_2.swf" />
<param name="quality" value="high" />
<embed src="http://www.netgerdesign.com/bannieres/ban88x31_2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="88" height="31"></embed>
</object>
Citation
D'ailleurs que fait ce code ?
Et bien en fait ce code possède 2 parties bien distinctes : vous pouvez remarquer que plusieurs valeurs apparaissent en double !!
Cela s'appelle la méthode " Twice Cooked ".
Elle consiste à utiliser la balise <object>... </object> pour charger l'animation dans Internet Explorer et la balise <embed>... </embed> pour les navigateurs type Netscape.
Le problème c'est que cette balise <embed>... </embed> ne fait pas partie des spécifications du XHTML...
Heureusement il est possible d'intégrer une animation Flash dans une page Web tout en conservant la validité du document aux yeux du W3C.
C'est ce que je vous propose de découvrir ci-dessous.
3. Intégration de Flash avec la méthode Satay
La méthode Satay a été mise en avant par Drew McLellan le 9 Novembre 2002.
Suivez ce lien pour consulter l'article de Drew McLellan sur la méthode Satay :
" Flash Satay: Embedding Flash While Supporting Standards by Drew McLellan "
Bon je vous laisserai bien juste lire cet article mais comme c'est en anglais j'en entends déjà dire : "je ne le lis pas... de toutes façons j'y comprend rien"
Je vais donc vous faire ici un résumé de ce texte comme ça vous n'aurez plus d'excuse pour ne pas suivre les recommandations du W3C ^^
La méthode Satay consiste à créer une animation servant de contenant à l'animation que vous souhaitez afficher puis d'appeler ce contenant uniquement grâce à la balise <object>... </object> (ce qui permet d'obtenir un code source aux normes).
Nous devons cela à Internet Explorer (et oui encore lui...).
En effet celui-ci n'affiche une page que lorsque tout les composants de celle-ci ont été téléchargés... donc si votre page contient une animation assez lourde la page restera blanche pendant plusieurs secondes.
Il y a donc de forte chance que l'internaute en question aille visiter d'autres pages...
Vous l'aurez compris si votre animation ne fait que quelques kilo-octets ce n'est pas la peine de lui créer un contenant et vous pouvez vous contenter d'utiliser le code source valide.
Dans le cas contraire il est vivement conseillé de créer une animation légère servant de contenant.
Je vais donc commencer par vous montrer un code d'intégration valide en reprenant l'exemple de la partie précédente :
Un point positif de cette méthode réside dans le fait qu'un élément alternatif (texte ou image) peut très facilement être affiché à la place de l'animation si celle-ci ne peut pas être chargée.
En effet si le browser ne parvient pas à utiliser l'objet avec le type MIME "application/x-shockwave-flash" celui-ci utilisera l'autre type d'élément enfant.
Voici un exemple :
Venons en maintenant à ce fameux contenant.
Pour commencer notez que celui-ci doit faire la même taille que l'animation qu'il doit contenir.
Créez donc un nouveau document Flash (par exemple " conteneur.swf ") aux bonnes dimensions puis notez le code ActionScript suivant sur la première frame :
Ce code permet d'appeler l'animation dont le chemin sera indiqué par la variable " path ".
Cela sera très simple à réaliser en utilisant la méthode GET, c'est à dire que l'information sera indiquée dans les deux url de notre code valide, comme dans cet exemple :
Ainsi l'animation " movie.swf " est appelée dans le conteneur " conteneur.swf ".
Ce qui résout le problème de chargement avec Internet Explorer.
Seulement il faut savoir que cette méthode possède aussi ses limites, c'est ce que nous allons voir dans le chapitre suivant.
Suivez ce lien pour consulter l'article de Drew McLellan sur la méthode Satay :
" Flash Satay: Embedding Flash While Supporting Standards by Drew McLellan "
Bon je vous laisserai bien juste lire cet article mais comme c'est en anglais j'en entends déjà dire : "je ne le lis pas... de toutes façons j'y comprend rien"
Je vais donc vous faire ici un résumé de ce texte comme ça vous n'aurez plus d'excuse pour ne pas suivre les recommandations du W3C ^^
La méthode Satay consiste à créer une animation servant de contenant à l'animation que vous souhaitez afficher puis d'appeler ce contenant uniquement grâce à la balise <object>... </object> (ce qui permet d'obtenir un code source aux normes).
Citation
Heu je crois que j'ai pas suivi là... c'est quoi l'intérêt !?
Nous devons cela à Internet Explorer (et oui encore lui...).
En effet celui-ci n'affiche une page que lorsque tout les composants de celle-ci ont été téléchargés... donc si votre page contient une animation assez lourde la page restera blanche pendant plusieurs secondes.
Il y a donc de forte chance que l'internaute en question aille visiter d'autres pages...
Vous l'aurez compris si votre animation ne fait que quelques kilo-octets ce n'est pas la peine de lui créer un contenant et vous pouvez vous contenter d'utiliser le code source valide.
Dans le cas contraire il est vivement conseillé de créer une animation légère servant de contenant.
Je vais donc commencer par vous montrer un code d'intégration valide en reprenant l'exemple de la partie précédente :
Code-source : XHTML
<object type="application/x-shockwave-flash" data="http://www.netgerdesign.com/bannieres/ban88x31_2.swf" width="88" height="31">
<param name="movie" value="http://www.netgerdesign.com/bannieres/ban88x31_2.swf" />
</object>
Un point positif de cette méthode réside dans le fait qu'un élément alternatif (texte ou image) peut très facilement être affiché à la place de l'animation si celle-ci ne peut pas être chargée.
En effet si le browser ne parvient pas à utiliser l'objet avec le type MIME "application/x-shockwave-flash" celui-ci utilisera l'autre type d'élément enfant.
Voici un exemple :
Code-source : XHTML
<object type="application/x-shockwave-flash" data="http://www.netgerdesign.com/bannieres/ban88x31_2.swf" width="88" height="31">
<param name="movie" value="http://www.netgerdesign.com/bannieres/ban88x31_2.swf" />
texte alternatif
</object>
Venons en maintenant à ce fameux contenant.
Pour commencer notez que celui-ci doit faire la même taille que l'animation qu'il doit contenir.
Créez donc un nouveau document Flash (par exemple " conteneur.swf ") aux bonnes dimensions puis notez le code ActionScript suivant sur la première frame :
Code-source : AS
this.loadMovie(_root.path,0);
Ce code permet d'appeler l'animation dont le chemin sera indiqué par la variable " path ".
Cela sera très simple à réaliser en utilisant la méthode GET, c'est à dire que l'information sera indiquée dans les deux url de notre code valide, comme dans cet exemple :
Code-source : XHTML
<object type="application/x-shockwave-flash" data="conteneur.swf?path=movie.swf" width="88" height="31">
<param name="movie" value="conteneur.swf?path=movie.swf" />
texte alternatif
</object>
Ainsi l'animation " movie.swf " est appelée dans le conteneur " conteneur.swf ".
Ce qui résout le problème de chargement avec Internet Explorer.
Seulement il faut savoir que cette méthode possède aussi ses limites, c'est ce que nous allons voir dans le chapitre suivant.
4. Limites de la méthode Satay
Dans cette dernière partie nous allons nous intéresser au revers de la médaille de l'utilisation de la méthode Satay.
Le premier point négatif concerne l'installation et la mise à jour du plug-in Flash.
L'attribut " codebase " étant absent ces opérations ne sont plus effectuées par les navigateurs qui les réalisaient avec la méthode " Twice Cooked ".
Sachant que c'est la seule méthode qu'emploie la grande majorité des internautes pour mettre à jour le plug-in Flash, cela se révèle assez problématique...
La seule solution consiste à créer une animation factice dont la seule utilité sera l'installation et la mise à jour du FlashPlayer.
Il suffit donc de créer une animation vide de 1 pixel de côté et de l'intégrer à votre page Web avec un code contenant l'attribut " codebase ".
Comme le souligne Drew McLellan dans son article, ce n'est pas la méthode la plus propre mais elle est fonctionnelle.
Le second point négatif porte sur certaines versions d'Internet Explorer 5.5 où le FlashPlayer affiche une boite de texte à la place de l'animation...
Et la seule façon de résoudre ce problème consiste à désinstaller le FlashPlayer puis de réinstaller la dernière version (une simple mise à jour ne suffit pas).
Et peu d'utilisateurs réaliseront cette manipulation...
Pour voir cela en détails je vous invite à consulter l'article suivant publié sur le site stilldreamer.com :
A List Apart's Flash Satay method improved
Et pour ceux qui ont un peu de mal avec l'anglais je vais faire un petit résumé
La méthode pour résoudre le problème d'affichage d'une animation Flash avec certaines versions d'Internet Explorer 5.5 consiste à ajouter l'attribut " classid " aux balises <object>...</object> présents dans le code XHTML.
Si votre site web est dynamique (PHP, ASP, ...) vous pouvez réaliser cette opération côté serveur.
Dans le cas d'un site statique (HTML, XHTML) il faudra agir côté client et donc employer Javascript.
Pour ce qui concerne cette dernière méthode le site stilldreamer.com vous propose le script suivant (à placer dans un fichier .js) :
Ainsi il vous suffit ensuite d'appeler ce fichier entre les balises <head>... </head> de votre document XHTML
Par exemple si votre document Javascript se nomme "flash_fix.js" :
Ce sont pour le moment les seuls points d'ombres qu'a laissé transparaitre la méthode Satay mais si je trouve de nouvelles informations sur le sujet je complèterai cet article en conséquence.
Le premier point négatif concerne l'installation et la mise à jour du plug-in Flash.
L'attribut " codebase " étant absent ces opérations ne sont plus effectuées par les navigateurs qui les réalisaient avec la méthode " Twice Cooked ".
Sachant que c'est la seule méthode qu'emploie la grande majorité des internautes pour mettre à jour le plug-in Flash, cela se révèle assez problématique...
La seule solution consiste à créer une animation factice dont la seule utilité sera l'installation et la mise à jour du FlashPlayer.
Il suffit donc de créer une animation vide de 1 pixel de côté et de l'intégrer à votre page Web avec un code contenant l'attribut " codebase ".
Comme le souligne Drew McLellan dans son article, ce n'est pas la méthode la plus propre mais elle est fonctionnelle.
Le second point négatif porte sur certaines versions d'Internet Explorer 5.5 où le FlashPlayer affiche une boite de texte à la place de l'animation...
Et la seule façon de résoudre ce problème consiste à désinstaller le FlashPlayer puis de réinstaller la dernière version (une simple mise à jour ne suffit pas).
Et peu d'utilisateurs réaliseront cette manipulation...
Pour voir cela en détails je vous invite à consulter l'article suivant publié sur le site stilldreamer.com :
A List Apart's Flash Satay method improved
Et pour ceux qui ont un peu de mal avec l'anglais je vais faire un petit résumé
La méthode pour résoudre le problème d'affichage d'une animation Flash avec certaines versions d'Internet Explorer 5.5 consiste à ajouter l'attribut " classid " aux balises <object>...</object> présents dans le code XHTML.
Si votre site web est dynamique (PHP, ASP, ...) vous pouvez réaliser cette opération côté serveur.
Dans le cas d'un site statique (HTML, XHTML) il faudra agir côté client et donc employer Javascript.
Pour ce qui concerne cette dernière méthode le site stilldreamer.com vous propose le script suivant (à placer dans un fichier .js) :
Code-source : JS
function flashFix()
{
if(navigator.appVersion.indexOf("MSIE 5.5")!=-1)
{
for(i=0;a=document.getElementsByTagName("object")[ i ];i++)
{
if(a.getAttribute("type") && a.getAttribute("type").indexOf("application/x-shockwave-flash")!=-1
&& !a.getAttribute("classid"))
{
a.outerHTML=a.outerHTML.slice(0,a.outerHTML.indexOf(">"))
+ " classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' "
+ "><param name='movie' value='" + a.getAttribute("data")+ "' />"
+ a.outerHTML.slice(a.outerHTML.indexOf(">") + 1,a.outerHTML.length);
}
}
}
}
window.onload=function(){ flashFix(); };
Ainsi il vous suffit ensuite d'appeler ce fichier entre les balises <head>... </head> de votre document XHTML
Par exemple si votre document Javascript se nomme "flash_fix.js" :
Code-source : JS
<script type="text/javascript" src="flash_fix.js"></script>
Ce sont pour le moment les seuls points d'ombres qu'a laissé transparaitre la méthode Satay mais si je trouve de nouvelles informations sur le sujet je complèterai cet article en conséquence.
