Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Utilisation de SWFObject dans un projet Flex

Compatible Flex 2. Cliquer pour en savoir plus sur les compatibilités.Par Klee (Kévin Lepeltier), le 19 août 2006

Une chose que l'on peut affirmer sans trop ce tromper, c'est que adobe/macromédia n'est pas doué pour nous fournir des templates HTML de qualités.
Qui utilise encore le template HTML de flash 8 ?

“_Toi !
et bien va au coin ! Dépêche toi !”

Pour Flex 2, il y a eu un effort de fait, il faut l'admettre, le template est fourni avec une détéction du flash player, et la possibiliter d'utiliser les fonctions “suivant” et “précédent” du navigateur :-)
Mais évidemment la page générée n'est pas valide pour le W3C, il ne faut pas trop en demander quand même !

Comme j'aime avoir des pages xHTML valide, je me suis décidé a adapter SWFObject sur le template, et a corriger toutes les erreurs de validation.

SWFObject

Je ne vais pas expliquer comment utiliser SWFObject 1) 2), ce n'est pas le sujet, vous trouverais toutes les explications sur le site de l'auteur, Geoff Stearns.
SWFObject: Script Javascript d'auto-détection du Player Flash

Le dossier html-template

Chaque projet Flex possède un dossier html-template,
ce dossier contient une série de fichier, qui seront dupliquer dans le dossier bin,
entre temps les chaînes de caractère du type ${width} seront remplacer par les valeurs du projet.

C'est dans ce dossier que l'on va travailler.

Avant

Voici sont contenu par défaut :

  • html-template
    • AC_OETags.js
    • history.htm
    • history.js
    • history.swf
    • index.template.html
    • playerProductInstall.swf

Après

voici sont contenu après les modifications :

  • html-template
    • history.htm
    • history.js
    • history.swf
    • index.template.html
    • swfObject.js

history.htm

history.htm, est chargé dans une iframe, c'est par cette frame que flex enregistre les changements de page, pour que l'on puisse ensuite utiliser “suivant” et “précédent”. Cette page contient un swf, on va donc l'intégrer via swfObject.

<!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=iso-8859-1" />
		<title></title>
 
		<script src="swfObject.js" type="text/javascript"></script>
 
	</head>
 
	<body >
 
		<div id="swf"/>
 
		<script type="text/javascript">
			var soh = new SWFObject("history.swf", "utility", "0", "0", "7.0.14", "#FFFFFF");
 
			soh.addParam("quality", "high");
			soh.addParam("profile", "false");			
			soh.addParam("src", "history.swf");
			soh.addParam("type", "application/x-shockwave-flash");
			soh.addParam("pluginspage", "http://www.adobe.com/go/getflashplayer");
 
			var v = new top.Vars(top.getSearch(window));
			var pre = '$_';
			for(var i in v) {
				if(v[i] != null && typeof(v[i]) != 'object' && typeof(v[i]) != 'function' && i != 'numVars') {
					soh.addVariable(pre + i, v[i]);
				}
			}
 
			soh.addVariable("$_lconid", top.lc_id);
 
			soh.write("swf");
		</script>
 
	</body>
 
</html>



history.js

Le fichier d'origine conviendras parfaitement, si vous voulez économiser du poid vous pouvez enlevez de ce fichiers le prototype de Vars, ce code est maintenant intégré dans la page history.htm, dans le script swfObject.

Vars.prototype.toString = function(pre) {
	var result = '';
	if(pre == null) { pre = ''; }
	for(var i in this) {
		if(this[i] != null && typeof(this[i]) != 'object' && typeof(this[i]) != 'function' && i != 'numVars') {
			result += pre + i + '=' + this[i] + '&';
		}
	}
	if(result.length > 0) result = result.substr(0, result.length-1);
	return result;
}



index.template.html

Dans ce fichier on change tous, on laisse juste iframe.

Important : il faut spécifier dans les styles css : html, body, #swf { height: 100%; }

Le div #swf fait 100% de haut, ok mais 100% de quoi. Il faut donc spécifier que
body fait 100% de haut, ok mais 100% de quoi ? Il faut donc spécifier que
html fait 100%, 100% de l'affichage disponible dans le navigateur.

Cette précaution doit être prise a cause du doctype, qui fait basculer le navigateur en mode strict.

<!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>${title}</title>
 
		<script src="swfObject.js" type="text/javascript"></script>
 
		<style type="text/css">
			html, body, #swf { height: 100%; margin: 0; overflow:hidden; }
			iframe { width: 0; height: 0; }
		</style>
 
	</head>
	<body>
 
		<script type="text/javascript" src="history.js"></script>
 
		<div id="swf">
			Alternate HTML content should be placed here
			This content requires the Adobe Flash Player
			<a href="http://www.adobe.com/go/getflash/">Get Flash</a>
		</div>
 
		<script type="text/javascript">
			var so = new SWFObject("${swf}.swf", "${application}", "${width}", "${height}", "${version_major}.${version_minor}.${version_revision}", "${bgcolor}", true);
 
			so.addParam("quality", "high");
			so.addParam("allowScriptAccess", "sameDomain");
			so.addParam("align", "middle");
			so.addParam("play", "true");
			so.addParam("loop", "false");
			so.addParam("type", "application/x-shockwave-flash");
			so.addParam("pluginspage", "http://www.adobe.com/go/getflashplayer");
 
			so.addVariable("historyUrl", "history.htm");
			so.addVariable("lconid", lc_id);
 
			so.write("swf");
		</script>
 
		<iframe name="_history" src="history.htm" frameborder="0" scrolling="no"></iframe>
 
	</body>
</html>



swfObject.js

Ce fichier est disponible sur le site de Geoff Stearns, ainsi que dans le zip, suivant.

Les sources

Et voici donc les sources, a mettre dans votre projet Flex 2 template_swfobject.zip

About

Par Lepeltier Kévin alias Klee (2006). Vous pouvez consulter ce tutorial et des commentaires (Si vous en écrivez ^^) sur interlud'.

1) Pour les retardataires, FlashObject a était renommé SWFObject , parce-que adobe n'était pas content que l'on utilise le mot flash.
2) Historique : flash Gordon s'appelle dorénavant swf Gordon. Si si !