swfaddress

Article écrit le 05/04/2007 11:24.
Par k-ny ( blog ).

Ceci n'est pas une traduction de la documentation officielle, car elle n'existe pas ! Documentation crée d'après mes diverses experimentations.

SwfAddress et une sorte de plugin pour SwfObject, qui va permettre de rendre utilisable les boutons de votre navigateur pour se deplacer a l'interieur d'un swf.
Mais ce n'est pas tout, il permet egalement d'acceder aux differentes parties du swf via de simples url, ce qui est très pratique pour donner le lien direct d'une section de votre swf.


Donc en gros:

• Les boutons “suivant”, “precedant” et “rafraichir” deviennent operationnels
• Vous avez des accès direct aux différentes parties de votre swf, avec une url du type http://monserveur.com/ma_page.html#/section1/
• Vous pouvez egalement controler ce qui va s'afficher dans la barre de status en bas du navigateur
• Vous pouvez ré-écrire le titre de votre page directement depuis votre swf, en fonction de la section où vous vous trouvez

Voir une demo online ...

/!\ RAPPEL: Il vous faudra obligatoirement integrer votre swf avec la methode SwfObject pour que celà fonctionne. Et evidement integrer swfaddress.js dans votre page !

• Description des commandes et actions disponibles
• Exemple simple et complet d'une navigation (+ sources .zip)
• Bugs connus
• En savoir plus

Lecture seule

Description
Dans le navigateur: renvoie le paramètre situé dans la barre d'adresse du navigateur.
Ce paramètre correspond au contenu placé après le symbole #
Swf seul: renvoie la dernière valeur donnée par SWFAddress.setValue(param:String).

Valeur renvoyée
String - Chaine contenant le paramètre de l'url actuelle.

Exemple
L'exemple suivant crée un simple champs de texte qui va afficher le paramètre d'url.
Tester ce code sur un swf en ligne, et ajouter a la fin de l'url de la page ”#exemple”.

//Inclure SWFAddress.as
#include "includes/SWFAddress.as"
//Creation de la zone de texte
var txt_debug:TextField = this.createTextField("txt_debug", 10, 0, Stage.height/2, Stage.width, Stage.height);
//On "ecoute les changement de l'url, et on affiche le paramètre #
SWFAddress.onChange = function():Void  {
	var adrr:String = SWFAddress.getValue();
	txt_debug.text = "Le paramètre est : "+adrr;
};

Ecriture seule

Description
Change le paramètre de l'url actuelle par param:String, si l'url ne contient pas de paramètre, il sera rajouté automatiquement.
A noter que cette fonction stock egalement une reférence dans le swf, qui pourrat ètre recupéré via SWFAddress.getValue() mème si le swf n'est pas affiché dans un navigateur.

Paramètre(s)
param:String - Chaine contenant le nouveau paramètre de l'url.

Exemple
L'exemple suivant crée 3 boutons, et affecte a chancun de ces boutons une action qui réecrit le paramètre de l'url.
Tester ce code sur un swf en ligne, et regarder ce qui se passe dans la barre d'adresse.

//Inclure SWFAddress.as
#include "includes/SWFAddress.as"
//Creation des boutons
for (var i:Number = 0; i<3; i++) {
	this["btn"+i] = this.createEmptyMovieClip("newmc", this.getNextHighestDepth());
	this["txt"+i] = this.createTextField("txt_chargement", this.getNextHighestDepth(), 110*(1+i), 10, 100, 20);
	with (this["btn"+i]) {
		beginFill("0xFF0000", 100);
		moveTo(0, 0);
		lineTo(100, 0);
		lineTo(100, 20);
		lineTo(0, 20);
		lineTo(0, 0);
		endFill();
	}
	this["btn"+i]._x = 110*(1+i);
	this["btn"+i]._y = 10;
	this["txt"+i].selectable = false;
	this["txt"+i].html = true;
	this["txt"+i].htmlText = "<p align='center'><font face='Verdana'><b>Bouton "+i+"</b></font></p>";
 
}
 
//Actions SWFAddress.setValue sur les boutons
this.btn0.onRelease = function() {
	SWFAddress.setValue('/page1/');
};
 
this.btn1.onRelease = function() {
	SWFAddress.setValue('Coucou');
};
 
this.btn2.onRelease = function() {
	SWFAddress.setValue('/etc/');
};

Ecriture seule

Description
Change le titre de la page actuelle par param:String
Par contre cette fonction est un peu capricieuse selon l'endroit d'où elle est definie.

Paramètre(s)
param:String - Chaine contenant le nouveau nom de la page.

Exemple
L'exemple suivant capture les changement de paramètre dans l'url, et change le nom de la page par le nom du paramètre.
Tester ce code sur un swf en ligne, et tester different paramètres d'url (#test1).

//Inclure SWFAddress.as
#include "includes/SWFAddress.as"
//Evenement de capture du changement d'url
SWFAddress.onChange = function():Void  {
	var adrr:String = SWFAddress.getValue();
	SWFAddress.setTitle(adrr);
};

Ecriture seule

Description
Change le texte qui apparait dans la barre de statut du navigateur.
Le Resultat affichera l'url de la page + param:String

Paramètre(s)
param:String - Chaine contenant le nouveau texte de statut.

Exemple
L'exemple suivant crée 3 boutons, et affecte a chancun de ces boutons une action au survol qui change le texte de status. Et une action au non-survol qui efface le texte de status.
Tester ce code sur un swf en ligne, et regarder ce qui se passe dans la barre de status.

//Inclure SWFAddress.as
#include "includes/SWFAddress.as"
//Creation des boutons
for (var i:Number = 0; i<3; i++) {
	this["btn"+i] = this.createEmptyMovieClip("newmc", this.getNextHighestDepth());
	this["txt"+i] = this.createTextField("txt_chargement", this.getNextHighestDepth(), 110*(1+i), 10, 100, 20);
	with (this["btn"+i]) {
		beginFill("0xFF0000", 100);
		moveTo(0, 0);
		lineTo(100, 0);
		lineTo(100, 20);
		lineTo(0, 20);
		lineTo(0, 0);
		endFill();
	}
	this["btn"+i]._x = 110*(1+i);
	this["btn"+i]._y = 10;
	this["txt"+i].selectable = false;
	this["txt"+i].html = true;
	this["txt"+i].htmlText = "<p align='center'><font face='Verdana'><b>Bouton "+i+"</b></font></p>";
 
}
 
//Actions SWFAddress.setStatus sur les boutons
this.btn0.onRollOver = function() {
	SWFAddress.setStatus('/acceuil/');
};
 
this.btn0.onRollOut = function() {
	SWFAddress.resetStatus();
};
 
this.btn1.onRollOver = function() {
	SWFAddress.setStatus('Coucou');
};
 
this.btn1.onRollOut = function() {
	SWFAddress.resetStatus();
};
 
this.btn2.onRollOver = function() {
	SWFAddress.setStatus('/etc/');
};
 
this.btn2.onRollOut = function() {
	SWFAddress.resetStatus();
};

Description
Efface simplement le texte qui apparait dans la barre de statut du navigateur.

Exemple
Voir SWFAddress.setStatus(param:String)

Ecouteur

Description
Cette methode “écoute” les changements des paramètres de l'url. Elle est donc invoqué lors du chargement de la page, et egalement lors de l'appel de SWFAddress.setValue(param:String)

Exemple
Voir l'exemple de SWFAddress.setTitle(param:String)

Voici un exemple de navigation, je fourni les fichiers sources juste en dessous.
Naviguez et regardez la barre d'adresse, de statut et le titre de la page.
Essayez aussi taper cette url http://blog.webinventif.fr/tuto/swfaddress/#/page2/

La demo:
swfaddress_sample

Bon je sais, c'est moche mais c'est juste pour bien illustrer.
Dans mon test j'ai choisi un paramètre de type /page3/ pour raison esthetique, et pour eviter les conflits avec les ancres, mais libre a vous de les nommer differement.

Dans le zip je fourni tout ce qu'il faut, les sources sont commentées au maximum.

• swfaddress.zip

• Ne fonctionne pas sur ie6 et ie7 en local
• Si l'on passe en paramètre un mot qui porte le mème nom qu'une etiquète de frame dans le swf, la navigation plante !
• Pas un vrai bug, mais il faut se mefier du type de paramètre que l'on fait passer, car la syntaxe est identique pour des “ancres” (id) de la page

• swfaddress (site officiel)
• swfaddress (sur mon blog)
• swfobject (site officiel)
• swfobject (sur le wiki)