Afficher du contenu Flash avec swfobject

SWFObject est un petit script Javascript utilisé pour inclure un contenu swf dans une page HTML. Le script peut détecter le plug-in Flash dans tous les principaux navigateurs (sur MAC et PC).

Il est conçu pour rendre l’intégration des swf aussi simple que possible. L’intégration dans la page est très propre il peut être employé dans les documents valides HTML et XHTML 1.0, et est compatible avec les spécifications futur, ainsi vous pourais continuer a l’utiliser pendant les prochaines années a venir.

Fonctionnalités

Les caractéristiques de SWFObject :

• Test de la version du Player Flash, auto update du Player Flash si la version est incorrecte (le numéro de la version minimum du Player Flash est fourni par le javascript.
• Si le Player Flash n’est pas installé, redirection sur une page proposant son téléchargement.
• Utilisation du javascript pour l’intégration dans une page web (valide HTML and XHTML).
• Compatible avec la majorité des navigateurs. Nécessite l’activation du javascript.
• Swfobject intègre une solution sans javascript et valide HTML and XHTML.

SWFObject fonctionne tranquillement en tache de fond de votre document HTML.

SWFObject fonctionne dans tous les principaux navigateurs, incluant, sur PC: IE5/5.5/6, Netscape 7/8, Firefox, Mozilla, et Opéra. Sur MAC: IE5.2, Safari, Firefox, Netscape 6/7, Mozilla, et Opéra 7,5+…

SWFObject détecte les version du Player Flash dans ces navigateurs de la version 3 et +, et permettra aux utilisateurs d’agir sur le swf sans devoir ‘l’activer’ d’abord.

SWFObject peut détecter les versions mineures et les versions de révision du Player Flash, simplement en passant le string de la version que vous voulez (pour exiger le player v.9.0 r65 avec la chaine “9.0.65.0″).

Utilisation

Employer SWFObject est simple. Ajouter simplement le fichier Javascript swfobject.js, puis ajouter un peu de Javascript dans votre page pour inclure votre swf. Voici un exemple montrant la quantité minimum de code requise pour inclure un swf :

<script type="text/javascript" src="swfobject.js"></script>
 
<div id="flashcontent">
N'oubliez pas d'activer le Javascript.
</div>
 
<script type="text/javascript">
swfobject.embedSWF("http://www.musicotest.com/widget/swf/widget_v3.swf", "flashcontent", "234", "382", "9" );
</script>

Explication du code

Inclure le fichier swfobject.js via

<script type="text/javascript" src="swfobject.js"></script>

Créer une balise div dans laquelle sera inclus votre swf :

<div id="flashcontent">N'oubliez pas d'activer le Javascript.</div>

Prévoyez cet élément HTML qui contiendra votre swf. Le contenu placé a l’intérieur sera remplacé par le swf, ainsi les utilisateurs possédant la bonne version du Flash Player ne verront jamais le contenu à l’intérieur de cet élément. Ce dispositif permet en plus de laisser les moteurs de recherche référencer un contenu alternatif.

Créez un nouveau SWFObject et passez lui les paramètres requis :

• swf – le chemin vers votre swf.
• width – la largeur de votre swf.
• height – la hauteur de votre swf.
• version – la version de player requise pour votre swf. Ceci peut être un string du type ‘majorVersion.minorVersion.revision ‘. Exemple : “6.0.65” . ou vous pouvez seulement spécifier la majorVersion, telle que “6” .
• couleur de fond – La couleur de fond de votre swf en hexadécimal. Exemple : “#00ff00”

Les paramètres facultatifs sont :

• expressInstall.swf – si vous voulez proposer a vos internautes la dernière version du Player Flash utilisez expressInstall.swf. SWFObject supporte pleinement l’installation Express de Flash (Macromedia Flash Player Express Install). Inclus avec SWFObject sous la forme d’un fichier swf externe, il travaille avec SWFObject pour commencer une mise à jour dans votre Flash. Vos utilisateurs n’ont jamais à quitter votre site pour mettre à jour leur Player, et quand la mise à jour est terminée, il retourne automatiquement à la page depuis laquelle la mise à jour a été lancé.
• qualité – la qualité que vous souhaitez pour votre swf. Si aucune qualité n’est indiquée, Par défaut “high” .
• flashvars – passage de variables dans vos swf. Toutes les variables passer avec cette balise sont accessibles dans votre swf par l’intermédiaire de _root.
• param – permet de configurer tous les paramètres de l’animation flash (play, loop, menu, quality, scale, salign, wmode, bgcolor, base, swliveconnect, devicefont, allowscriptaccess, seamlesstabbing, allowfullscreen, allownetworking).
• attributes – permet de configurer les attributs de l’animation flash (id, name, class, align).

Exemple complet

Voici un exemple complet utilisant une grande partie des possiblités de SWFObject.

<script type="text/javascript" src="swfobject.js"></script>
 
<div id="flashcontent">
N'oubliez pas d'activer le Javascript.
</div>
<script language="JavaScript" type="text/javascript">
 
	var flashvars = 
	{
		contextFile: "application_default.eden",
		contextPath: "http://www.musicotest.com/widget/eden/context/",
		type_quizz: "http://www.musicotest.com/widget/eden/quizz/variete_internationale.eden",
		lang : "fr",
		progressColor: "0x2d2d2d",
		progressMessage: "Chargement en cours..."
	};
 
	var params = 
	{
		allowScriptAccess : "always"  ,
		bgcolor           : "#ffffff"  ,
		quality           : "best"
	} ;
 
	var attributes = 
	{
		align : "middle",
		name: "widget_v3_musicotest"
	} ;
 
	swfobject.embedSWF("http://www.musicotest.com/widget/swf/widget_v3.swf", "flashcontent", "234", "382", "9.0.124", "expressInstall.swf", flashvars, params, attributes );
</script>

Exemple sans utiliser le javacsript

Avec le générateur de code fournis par SWFObject, il est possible d’intégrer un swf sans utiliser le javascript : Outil SWFObject

Et voici l’exemple :

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="234" height="382" id="flashcontent_other" name="widget_v3_musicotest" align="middle">
	<param name="movie" value="http://www.musicotest.com/widget/swf/widget_v3.swf" />
	<param name="menu" value="false" />
	<param name="quality" value="best" />
	<param name="bgcolor" value="#ffffff" />
	<param name="allowscriptaccess" value="always" />
	<param name="flashvars" value="contextFile=application_default.eden&amp;contextPath=http://www.musicotest.com/widget/eden/context/&amp;type_quizz=http://www.musicotest.com/widget/eden/quizz/variete_internationale.eden&amp;debug=true&amp;lang=fr&amp;progressColor=0x2d2d2d&amp;progressMessage=Chargement en cours..." />
	<!--[if !IE]>-->
	</object><object type="application/x-shockwave-flash" data="http://www.musicotest.com/widget/swf/widget_v3.swf" width="234" height="382" align="middle">
		<param name="menu" value="false" />
		<param name="quality" value="best" />
		<param name="bgcolor" value="#ffffff" />
		<param name="allowscriptaccess" value="always" />
		<param name="flashvars" value="contextFile=application_default.eden&amp;lang=fr&amp;contextPath=http://www.musicotest.com/widget/eden/context/&amp;type_quizz=http://www.musicotest.com/widget/eden/quizz/variete_internationale.eden&amp;debug=true&amp;progressColor=0x2d2d2d&amp;progressMessage=Chargement en cours..." />
	<!--<![endif]-->
		<a href="http://www.adobe.com/go/getflashplayer">
			<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
		</a>
	<!--[if !IE]>-->
	</object>
	<!--<![endif]-->

Compléments d’information

• Pour plus de détails et des exemples complémentaires, ej vous invite à consulter cette page : Documentation SWFObject
• Un tutoriel plus complet en français : swfobject-francais
• SWFObject a également développer un outil très pratique qui permet de créer le code à insérer dans votre page HTML : Outil SWFObject
• Il y a également Adobe qui a publié un tutoriel en anglais : SWFObject par Adobe

Articles sur le même sujet :

1. Problème caractères accentués dans les champs textes input avec Flash
2. Référencer un site flash