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

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

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 `&`.

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

Flash et XHTML chez Animatlantique.net : explication de la technique
Flash Satay
Embedding Macromedia Flash in XHTML : une peu de philosophie autour du sujet.
Liste des propriétés mises à disposition par l'ActiveX Shockwave.Flash.
Dans l'aide de Flash !

Forums Développement Multimédia