Aller au menu - Aller au contenu

Icône Faire un site valide xHTML Strict 1.0 pour Mozilla et IE avec du Flash

Par Avatar Severance
Mise à jour : 22/08/2008
44 visites depuis 7 jours, classé 689/786
J'ai réalisé un site web et j'ai tout de suite voulu y intégrer du Flash. Cependant, j'ai eu quelques problèmes pour qu'il soit valide avec W3C xHTML Strict 1.0 et qu'il fonctionne parfaitement à la fois sous Mozilla et sous IE (et éventuellement les autres navigateurs mais pour ce principe-là, ils ne sont pas différents de Mozilla).

Alors autant que les « expériences » que j'ai faites servent au plus grand nombre. :)

Pour que vous compreniez ce tutoriel, il faut d'abord avoir suivi celui de M@teo21 sur la création d'un site web. En effet, je ne reviendrai ni sur la signification des balises xHTML, ni sur le CSS.
Retour en haut
Sommaire du tutoriel :
Icône du chapitre
Retour en haut

La balise object

À quoi sert-elle ?

Cette balise sert à insérer un objet qui peut être de différentes natures :
  • Image ;
  • Fichier audio ;
  • Applet java ;
  • Animation Flash.


C'est à ce dernier point que nous allons nous intéresser.

Sa syntaxe


C'est une balise inline avec une syntaxe classique :
Code : Autre
1

<object>...</object>


Ses attributs


Ils sont nombreux mais voici les principaux que nous allons utiliser :
  • data="..." : l'URL des données de l'objet ;
  • type="..." : type de contenu Internet des données ;
  • height="..." : hauteur de l'objet ;
  • width="..." : largeur de l'objet.


Si vous voulez les autres :
http://pagesperso-orange.fr/bernard.qu [...] ew/object.htm

Ses paramètres


À l'intérieur de cette balise, on peut également ajouter des paramètres qui modifient certaines propriétés de l'objet inséré. Nous allons le voir, ils sont très importants dans notre cas.
Voici la syntaxe d'un paramètre :
Code : Autre
1

<param name="mon_paramètre" value="valeur_du_paramètre" />
Retour en haut

En pratique

Passons directement à la pratique sur une animation Flash.

Dans cette partie, nous verrons la mise en place d'une bannière en Flash. Les autres insertions Flash (pour les menus, animations indépendantes, etc.) se font sur le même modèle.

Préparation



Imaginons que l'on veuille insérer une bannière Flash nommée entete.swf, qui a une largeur de 660 pixels et une hauteur de 150 pixels. On définit donc avec le CSS un bloc de 660 x 150 comme dans le tutoriel de M@teo21, et qui se nomme en_tete.

On met ce code xHTML pour que l'on écrive dans ce bloc :
Code : Autre
1
2
3

<div id="en_tete">

</div>


Jusque-là, ce n'est pas trop dur, si ? :p

La mauvaise méthode



Maintenant, la chose à ne pas faire, c'est utiliser l'insertion automatique que propose le logiciel avec lequel vous faites votre site. Exemples : Dreamweaver, Frontpage, etc.

En effet cela va vous mettre quelque chose comme cela :
Code : Autre
1
2
3
4
5
6
7

<div id="en_tete">
  <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="660" height="150" title="entete">
    <param name="movie" value="entete.swf" />
    <param name="quality" value="high" />
    <embed src="entete.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="660" height="150"></embed>
  </object>
</div>


Et alors ? Chez moi, ça marche sous Firefox et sous IE !

Ça, pour marcher, ça marche… mais essayez donc le validator w3c : http://validator.w3.org/
Boom ! Un gros : « This page is not Valid XHTML 1.0 Strict! », avec plein d'erreurs. Bref, ce n'est pas ce que l'on veut.

La bonne méthode



Insérez ce code et essayez :
Code : Autre
1
2
3

<object type="application/x-shockwave-flash" data="entete.swf" width="660" height="150">
        <param name="movie" value="entetePlanete.swf" />
</object>


Voilà, on a enfin un beau : « This Page Is Valid XHTML 1.0 Strict! ».
Ah... ça fait du bien :) . Surtout que ça marche impeccablement sous Firefox et sous IE. :p
En plus, c'est un code plus léger et assez compréhensible (regardez les définitions des attributs dans le chapitre précédent).

D'autres bonnes choses



On va rajouter deux autres paramètres :

− celui-ci pour dire au navigateur de lire l'animation avec la meilleure qualité :
Code : Autre
1

<param name="quality" value="high" />

− celui-ci pour ne pas avoir un fond blanc flashy lors du chargement de l'animation et pour que le fond de l'animation soit le fond de votre site :
Code : Autre
1

<param name="wmode" value="transparent" />

Essayez ce paramètre même si vous voulez garder le fond de votre animation : en effet, cela enlève le chargement à fond blanc pas très esthétique. Ainsi, si vous souhaitez garder le fond de votre animation, dans Flash, mettez celui-ci dans un graphique rectangle, il sera affiché normalement.


Ensuite, il faut penser à ceux qui n'ont pas le plugin Flash.
Ainsi l'on pourra rajouter un message indiquant qu'il faut télécharger le plugin :
Code : Autre
1

<p>Installez le plugin Flash pour voir l'animation</p>

Rappelez-vous : mettez le texte entre les balises de paragraphe p, sinon votre page ne passera pas le validator.

On pourra également mettre un lien vers le téléchargement du plugin, toujours à l'intérieur des balises de paragraphe.
Ainsi, au final, on obtient quelque chose du genre :
Code : Autre
1
2
3
4
5
6

<object type="application/x-shockwave-flash" data="entete.swf" width="660" height="150">
        <param name="movie" value="entete.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="transparent" />
        <p>Installez le plugin Flash pour voir l'animation : <a href="http://www.adobe.com/go/gntray_dl_getflashplayer_fr" title="LienPlugin">Cliquez ici pour le télécharger</a></p>
  </object>


Voilà. :)
Et si vous intégrez un menu en Flash, avec cette méthode, vous pouvez mettre des liens vers les pages de votre site. Comme ça, le visiteur ne possédant pas le plugin Flash peut quand même surfer sur votre site.
Retour en haut
Un petit conseil : ne faites pas un site complètement en Flash.
En effet, même si c'est très attrayant au premier abord, le problème est que les moteurs de recherche ne peuvent pas lire les mots dans des animations Flash. Donc pas de référencement. :colere: De plus, les mises à jour sont plus compliquées car il faut régénérer une animation à chaque fois.

Si toutefois vous voulez créer un site totalement en Flash, faites également une version HTML/PHP : ainsi, les personnes n'ayant pas Flash et les personnes malvoyantes pourront tout de même profiter du contenu de votre site (et n'iront pas à la concurrence :p ).

Voilà, j'espère que ce tutoriel vous a aidé, et si vous voulez voir ce que l'on peut faire avec cette méthode, allez voir cette page de démonstration. Notez que le fond étoilé est celui de la page, pas celui de la bannière Flash qui, lui, est simplement noir (c'est grâce au paramètre wmode vu plus haut).
Retour en haut

Partager

Retour en haut
31 commentaires pour "Faire un site valide xHTML Strict 1.0 pour Mozilla et IE avec du Flash"
Note moyenne : 0.00 / 4 (0 votes)
Pseudo Commentaire
Hors ligne Anonyme # Posté le 11/03/2009 à 13:16:44

Très bon tuto, l'épuration du code est stupéfiante ! :D

Par contre, j'ai utilisé le paramètre que tu as indiqué :
<param name="wmode" value="transparent" />

Mais ce n'était pas une bonne chose ! Ok ça vire le fond transparent, mais ça fait boguer le Flash ! Dans les TextInput et les TextArea, les "@" ne marchaient pas, le "." affichait un ":", pleins d'erreurs de saisies de clavier comme çà étaient dû à ce paramètre.

Maintenant que j'ai découvert çà, je l'ai enlevé, mais tu ferais bien de le préciser dans ton tuto ! ;)

J'ai trouvé la réponse ici : http://flash.mediabox.fr/index.php?showtopic=94168 et là http://flash.mediabox.fr/index.php?showtopic=93100
Hors ligne Claymore # Posté le 05/04/2010 à 12:39:14
Avatar

 YATAAAAAAAA ! \o/
Après une matinée de galère tu viens de me sauver la life. Love u ! ;o)
Hors ligne pierremusic31 # Posté le 23/12/2010 à 12:18:27

Le tuto est très sympa, j'ai peut-être pas tout capté parce que je suis débutant, mais sous mozilla mon <Object> marche pas. Sous IE niquel !
Et vu le titre du tuto, c'est assez marrant de tester la validation de cette page au W3C =)
Hors ligne pierremusic31 # Posté le 23/12/2010 à 13:13:50

Petite astuce que j'ai trouvé, je sais plus où...
Si votre object Flash ne s'affiche pas sous Mozilla, Google Chrome ou Safari, mais s'affiche sous IE.
Citation : Voila un exemple
<!--[if! IE]>Standard XHTML object instanciation <!-->
<object data="web-menu.swf" type="application/x-shockwave-flash" width="614" height="160">
<param name="movie" value="web-menu.swf" /> /* inutile de mettre ce param pour les autres navigateurs */
<param name="FlashVars" value="xmlvar=..." />
<p>Installez le plugin Flash pour voir le menu : <a href="http://www.adobe.com/go/gntray_dl_getflashplayer_fr" title="LienPlugin">Cliquez ici pour le télécharger</a></p>
</object>
<!--><![endif]-->
<!--[if IE]>
<object data="web-menu.swf" type="application/x-shockwave-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=" http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="614" height="160">
<param name="movie" value="web-menu.swf" />
<param name="FlashVars" value="xmlvar=..." />
<p>Installez le plugin Flash pour voir le menu : <a href="http://www.adobe.com/go/gntray_dl_getflashplayer_fr" title="LienPlugin">Cliquez ici pour le télécharger</a></p>
</object>
<![endif]-->

Attention à ne pas mettre d'espaces dans les endif

Voila, c'est la seule solution que j'ai trouvé pour que mon menu apparaisse correctement sur mon site et que ca soit validé par le W3C validator !!!
Hors ligne mariso # Posté le 09/06/2011 à 21:40:40
Avatar

 encore un très bon tuto, comme d' habitude. Cependant j' aimerais savoir comment adapter automatiquement à la dimension d'une page

<object type="application/x-shockwave-flash" data="entete.swf" width="660" height="150">
<param name="movie" value="entetePlanete.swf" />
</object>

Voir tous les commentaires
Ce tutoriel a été corrigé par les zCorrecteurs.