Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Comment intégrer une animation Flash à une page web ?

Compatible HTML. Cliquer pour en savoir plus sur les compatibilités.

Cet article peut être obselète. Nous vous recommandons de consulter de préférence cette page à la place: SWFObject: Script Javascript d'auto-détection du Player Flash

Méthode universelle

Lorsque vous utilisez Dreamweaver pour ajouter un SWF à vos pages ou que vous publiez vos animations depuis Flash en HTML, vous obtenez toujours le même code, lourd :

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="550" height="400" id="titre" align="middle">
  <param name="allowScriptAccess" value="sameDomain" />
  <param name="movie" value="anim.swf" />
  <param name="quality" value="high" />
  <param name="bgcolor" value="#ffffff" />
  <embed src="anim.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="titre" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

Il faut avouer qu'avec un code aussi lourd et sourd (il faut répèter deux fois les mêmes paramètres), on a vite préféré les images.

Méthode conforme au XHTML

Il existe néanmoins une méthode beaucoups plus simple à utiliser et qui respecte les recommandations pour le XHTML. La balise <embed>, qui n'existe pas dans le XHTML, ne doit pas y être utilisée.

<object type="application/x-shockwave-flash" data="anim.swf" width="550" height="400">
  <param name="play" value="true" />
  <param name="movie" value="anim.swf" />
  <param name="menu" value="false" />
  <param name="quality" value="high" />
  <param name="scalemode" value="noborder" />
  <p> Texte de remplacement </p>
</object>

Cette méthode fonctionne parfaitement avec IE6 et Gecko, mais il semble qu'il y ai des problèmes sous Safari … à confirmer.

Paramètres et attributs

Au risque de répéter ce qui est écrit dans l'aide de Flash MX 2004, voici la liste des paramètres/attributs que vous pouvez ajouter :

Nom Valeur Description
play true | false Indique si l'animation doit être lue dès qu'elle est chargée.
loop true | false Indique si l'animation se lit en boucle ou s'arrête.
quality low | medium | high | autolow | autohigh | best Qualité de l'affichage.
bgcolor #RRGGBB couleur de l'arrière-plan.
wmode transparent Arrière-plan transparent.
scalemode showall | noborder | exactfit type d'affichage.
align C | L | R | T | B
salign L | R | T | B | TL | TR | BL | BR Identique à Stage.align.
base url Dossier par défaut pour charger toutes les instructions de chemin relatif.
menu true | false Indique si le menu doit être affiché. Equivalent à Stage.showMenu.
allowscriptaccess always | never | samedomain
swliveconnect true | false Indique si Java doit être lancé. (requis pour utiliser fscommand)
flashvars nom=valeur Transmettre une variable à l'animation. Pour en transmettre plusieurs,, utilisez un & intermerdiaire. Le & ne semble pas passer aux validateur du w3c, utilisez plutôt &amp;.

Pour l'utilisation des flashvars, consultez la classe FlashVars

Centrer l'animation sur la page

La méthode la plus courante pour centrer une animation Flash sur une page est d'utiliser un tableau avec une seule cellule de hauteur 100% et de largeur 100%. L'attribut HTML align=“center” et valign=“middle” permettent alors l'alignement.

Une technique plus légère utilisant uniquement du CSS est possible. L'idée est simple : définir une marge supérieure de 50%.

  body {
	margin-top: -400px 0 0 -550px;
	padding: 0;
	}
  #anim-flash {
	margin-top: 50%;
	margin-left: 50%;
	}

On obtient le code HTML suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
 
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Animation Flash Centrée</title>
  <style>
  body {
	margin-top: -400px 0 0 -550px;
	padding: 0;
	}
  #anim-flash {
	margin-top: 50%;
	margin-left: 50%;
	}
  </style>
</head>
 
<body>
  <div id="anim-flash">
	<object type="application/x-shockwave-flash" data="anim.swf" width="550" height="400">
	  <param name="play" value="true" />
	  <param name="movie" value="anim.swf" />
	  <param name="menu" value="false" />
	  <param name="quality" value="high" />
	  <param name="scalemode" value="noborder" />
	  <p> Texte de remplacement </p>
	</object>
  </div>
</body>
 
</html>

Plus d'information