eclaireur.net

WebDesign & Entrepreneur 2.0

"La connaissance s'acquiert par l'expérience, tout le reste n'est que de l'information." - Albert Einstein
  • Webapps - Annuaires des applications et sites web 2.0
  • Discussions - Forums de discussions, de débats et d'entraide
  • Liste des modules netvibes
  • Les billet autour du navigateur Mozilla Firefox

le 16.04.2007 à 7:12

5423 lectures

Ajouter un commentaire

Solution pour insérer une animation Flash dans une page HTML

Actuellement la technologie Flash d' (promue par feu Macromedia), est devenue quasi incontournable. Elle se met dans tout les sites, surtout pour les publicités et certains éléments avec des effets visuels. Je ne vais pas vous parler de l'ergonomie et de l'usabilité de (je vous conseillerai cet excellent article d'ergolab sur l'ergonomie flash). En revanche je vais vous présenter la meilleur façon de rendre les animations accessibles pour les internautes et leur navigateurs.

Pour commencer

L'insertion d'un document au sein d'une page web passe par l'utilisation de balises spécifiques. Voici un exemple de ce que vous pouvez retrouver :

HTML:
  1.    classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="980" height="550"
  2.    codebase="http://download.macromedia.com/.../swflash.cab#version=8,0,0,0">
  3.    <param name="movie" value="document.swf" />
  4.    <embed
  5.       src="document.swf" width="280" height="250" type="application/x-shockwave-"
  6.       pluginspage="http://www.macromedia.com/go/getflashplayer" />
  7. </object>

La balise <object> et la balise <embed> jouent le même rôle : insérer l'animation au sein de la page. Et pourquoi 2 balises? Ses 2 balises servaient pour que l'insertion du se fasse dans tous les navigateurs... Malheureusement si l'on considère la norme XHTML, ce code n'est pas valide :

  • la balise <embed> n'a plus lieu d'être
  • l'attribut codebase ne doit pas référencer une url externe
  • il manque certains attributs pour que les navigateurs puissent charger le document

Voici à quoi devraient ressembler ces lignes afin d'être plus proches de la norme.

HTML:
  1. <object type="application/x-shockwave-" data="document.swf" width="980" height="550">
  2.    <param name="movie" value="document.swf" />
  3. </object>

Et puisque le sujet est l', il serait bien vu d'insérer entre la ligne 2 et 3 une alternative visuelle ou textuelle, qui permettrait de rendre l'information plus lisible, et donc plus accessible.

HTML:
  1. <object type="application/x-shockwave-" data="document.swf" width="980" height="550">
  2.    <param name="movie" value="document.swf" />
  3.    <p>Présentation de mon document</p>
  4. </object>

Internet Explorer 7 et son blocage des contenus actifs

Vous le savez peut-être déjà, mais lorsque vous affichez une page qui contient une animation , l'interactivité avec celle-ci ne fonctionne qu'après un clic de votre souris sur le document.

L'effet peut-être assez gênant, et bien entendu il existe une parade. Le d' apporte une solution aves 2 scripts, mais il en existe bien d'autre. Personnellement je préfère SWFObject, il suffit d'inclure le script dans le header de votre page. Il faudra également modifier légèrement la balise d'appel du script dans l'emplacement du dans le body.

HTML:
  1. <!-- Dans le header de la la page-->
  2.    <script type="text/" src="swfobject.js"></script>
  3.  
  4. <!-- Dans le body de la page-->
  5. <div id="flashcontenu">
  6.   <p>Présentation du document</p>
  7. </div>
  8. <script type="text/">
  9.    var so = new SWFObject("document.swf", "document", "280", "250", "8", "#336699");
  10.    so.write("flashcontenu");
  11. </script>

Des améliorations pourraient être apportées à cette méthode, afin par exemple de n'utiliser la partie script que pour le cas du navigateur Internet Explorer.

Pour ceux qui veulent aller plus loin avec le code de ce script SWFObject, je vous conseille cette traduction du site officiel de SWFObject réalisé par media-box.net.

Firefox (Mozilla) pose également des problèmes

Firefox peut également poser quelques problèmes dans un cas bien particulier...

Si votre animation contient un formulaire de saisie, il est déconseillé d'utiliser la propriété wmode dans le paramétrage de l'objet . En effet cela provoque un problème d'interprétation de certain des caractères saisis, comme par exemple l'@ qui devient un à.

L'attribut wmode permet notamment de rendre le fond de l'animation transparent, afin de faire ressortir le fond de la page web.

Si vous avez trouvé cet article intéressant, abonnez-vous gratuitement au flux RSS d'eclaireur ou bien par email.

Auteur

David Marchesson est freelance développeur web & webdesigner. Il va bientôt se lancer dans l'univers des entrepreneurs Web 2.0. Il adore le net, les bonnes idées et parler de lui à la 3eme personne. Ce site sera sa balise dans cette vie digitale. Ziki Consulter le profil de David Marchesson sur Ziki Technorati Consulter le profil de David Marchesson sur Technorati

Suivez ce blog

Si ce blog vous plait, abonnez-vous. Ce flux RSS permet de recevoir en utilisant un lecteur les dernières nouvelles de ce site.

Recevez les billets par email

Derniers commentaires

  • Tek: Merci pour cet article, ça m’a permis de prouver à quelqu’un qu’on pouvait à la fois...
  • jeanne: J’aime beaucoup votre site et je vous remercie de vos bons conseils. Il y a une seule petite erreur....
  • aSKer: Je me pernet un petit déterrage pour signaler la galerie: http://css.wearethebuzz.com C’est...
  • Kim Auclair: À mon avis, personne n’est ““pro” de l’entrepreneuriat “. On a et on aura...
  • Jay: cool j’avais pas vu, merci beaucoup !!!
  • Scienceo: Quelle liste intéressante !…et bien hiérarchisée ! Que du bon !

Partenaires

Ziki Text Link Ads Developpeur Freelance web developpement webdesigner

Activité

Aucun commentaire, laissez un message. Utilisez ce lien pour faire un trackback sur ce billet :
http://www.eclaireur.net/technique/solution-pour-inserer-une-animation-flash-dans-une-page-html/trackback/

Ajouter un commentaire

N'hésitez pas à discuter de votre point de vue. Les informations obligatoires sont indiquées par une *.

HTML accepté :
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

Recherche

Chercher dans les archives à l'aide des catégories ou directement en tapant un mot ci dessous.

Liens delicious

Lecteurs récents

Flickr stream

ClemJulietteDaveClem & Juliette
Fermer
E-mail It

Haut de page