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. :)
À 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 :
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 :
<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 :
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.
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é :
<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 :
<param name="wmode" value="transparent" />
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 :
<p>Installez le plugin Flash pour voir l'animation</p>
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 :
<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.
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).