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

Le 16 avril 2007

Actuellement la technologie Flash d’Adobe (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 Flash (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 Flash accessibles pour les internautes et leur navigateurs.

Pour commencer

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

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 flash 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]
[/html]

Et puisque le sujet est l’accessibilité, 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]

Présentation de mon document


[/html]

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 flash, 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 site d’Adobe 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 Flash dans le body.
[html]

Présentation du document


[/html] 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 flash contient un formulaire de saisie, il est déconseillé d’utiliser la propriété wmode dans le paramétrage de l’objet flash. 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.


Envie de discuter de cet article ? Envoyer un message sur Twitter ou envoyez-moi un e-mail. Si cet article vous a plu, n'hésitez pas à le partager sur Twitter ou Facebook.

1 commentaire sur "Solution pour insérer une animation Flash dans une page HTML"

  • myshock
    8 novembre 2010 (9:35)

    Attention toutefois à l’utilisation de wmode quii rend l’animation indetectable par les technologies d’assistance.