Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

XML : menu dynamique avec arborescence

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

Article écrit le 29/08/2002 22:54.
Par damien.
Compatibilité AS2 le 05/04/2007 Par mim

Dans ce tutorial, on va créer pas à pas une animation qui va chercher l'arborescence d'un menu dans un fichier xml et qui l'affiche, avec autant de niveau que l'on veut.
Bref, un script qui marche dans 100% des cas, facilement personnalisable.

Objectifs:
charger les infos du fichier XML
(ça vous devriez commencer à avoir l'habitude, maintenant ;-) sinon, lire les autres tutos)
construire le menu d'après l'arborescence du xml.
Plus dur, il faudra construire une fonction recursive, vu qu'on ne sait pas à priori combien de niveaux il y aura.

Voici la structure du menu qu'on veut avoir:

Racine
--Archives
----Par date
------ 10juillet *
------ 25juillet *
------ 25 aout *
---- Par sujet
------ location *
------ vente *
--Liens
---- Ciseaux
------ English
--------mysite *
------Francophone
--------mysite1 *
--------mysite2 *
--------mysite3 *
--------mysite4 *
--------mysite5 *
----Telescopique
------Labozone *
------Blitzds *

Les astérisques veulent dire que c'est le dernier niveau et que donc l'élement n'est plus une catégorie mais un lien cliquable (avec des infos comme l'url et le target)

voici le fichier xml:

<?xml version="1.0" encoding="iso-8859-1"?>
 
<items name="racine" >
 
<item name="Archives" >
 
 <item name="par date" >
 
  <item name="10 Juillet 02" adr="page1.htm" targ="_blank"/>
 
  <item name="25 Juillet 02" adr="page2.htm" targ="_blank"/>
 
  <item name="25 Aout 02" adr="page1.htm" targ="_blank"/>
 
 </item>
 
 <item name="par sujet" >
 
  <item name="Location" adr="page1.htm" targ="_blank"/>
 
  <item name="Vente" adr="page1.htm" targ="_blank"/>
 
 </item>
 
</item>
 
<item name="Liens" >
 
 <item name="Ciseaux" >
 
  <item name="English" >
 
   <item name="mysite" adr="mysite.htm" targ="_blank"/>
 
  </item>
 
  <item name="Francophone" >
 
   <item name="mysite1" adr="mysite1.htm" targ="_blank"/>
 
   <item name="mysite2" adr="mysite2.htm" targ="_blank"/>
 
   <item name="mysite3" adr="mysite3.htm" targ="_blank"/>
 
   <item name="mysite4" adr="mysite4.htm" targ="_blank"/>
 
   <item name="mysite5" adr="mysite5.htm" targ="_blank"/>
 
  </item>
 
 </item>
 
 <item name="telescopique" >
 
  <item name="Labozone" adr="http://www.lab.danceallstar.com/" targ="_blank"/>
 
  <item name="Blitz DS" adr="http://www.blitzds.com/" targ="_blank"/>
 
 </item>
 
</item>
 
</items>

Vous voyez que les possibilités sont infinies :-)

Il est essentiel pour ce tutorial de bien comprendre comment on 'navigue' dans un XML à l'aide des 'childNodes' et autres 'firstChild' et 'attributes'.

Il est aussi recommandé d'avoir été en contact au moins une fois dans sa vie smile.gif avec les fonctions récursives, auxquelles on met parfois un peu de temps à s'habituer.

On commence par le plus simple, bien sûr, le chargement du XML:

image 1:

var XMLmenu:XML = new XML();
XMLmenu.ignoreWhite = true;
 
//création du clip, par programmation dans cet exemple, 
//on peut bien sûr prendre un clip dessiné, pour des raisons esthétiques
//Dans ce cas, il faut le placer sur la scene et lui donner le nom "modele"
 
var modele:MovieClip = this.createEmptyMovieClip("modele", 0);
this.modele.lineStyle(1, 0x000000, 100);
this.modele.beginFill(0xcccccc, 100);
this.modele.moveTo(0, 0);
this.modele.lineTo(0, 20);
this.modele.lineTo(150, 20);
this.modele.lineTo(150, 0);
this.modele.lineTo(0, 0);
this.modele.endFill();
 
XMLmenu.onLoad = function(success) {
	play();
};
 
XMLmenu.load("menuXml.xml");
 
stop();

image 2:
les choses sérieuses commencent !!

var count:Number = 0;
// compteur pour le nombre de clips
/* ci-dessous la fonction recursive
 
** elle prend en paramêtres le niveau
 
** de l'arborescence à laquelle se trouve l'élément
 
** et bien sur le noeud XML d'où est
 
** tiré l'élément */
function constructLevel(XMLnode:XMLNode, parentLevel:Number) {
	count++;
	//incrémentation du compteur
	if (XMLnode.attributes.adr == undefined) {
		// si ce n'est pas le dernier niveau:
		var duplicate:MovieClip = this.modele.duplicateMovieClip("item"+count, count);
		// on duplique le modele
		// on le place en le décalant vers la droite
		// selon son niveau dans l'arborescence:
		duplicate._x = parentLevel*20;
		// on le place verticalement d'après le nombre
		// de clips déjà présents avant lui:
		duplicate._y = count*22;
		// on crée un champ de texte dedans:
		duplicate.createTextField("name", 1, 20, 0, 130, 20);
		// et on écrit son nom dedans:
		duplicate.name.text = XMLnode.attributes.name;
		// on a vu que ce n'était pas le dernier élément
		// donc  on réapplique la même fonction sur
		// chacun de ses 'fils'
		// On utilise une variable pour le nombre de fils
		var nbChild:Number = XMLnode.childNodes.length;
		for (var i = 0; i<nbChild; i++) {
			constructLevel(XMLnode.childNodes[i], parentLevel+1);
		}
	} else {
		// il s'agit du dernier élément dans
		// l'arborescence, c'est-à-dire
		//  d'un lien cliquable :
		var duplicate:MovieClip = this.modele.duplicateMovieClip("item"+count, count);
		duplicate._x = parentLevel*20;
		duplicate._y = count*22;
		duplicate.createTextField("name", 1, 20, 0, 130, 20);
		duplicate.name.text = XMLnode.attributes.name;
		// jusqu'ici, rien n'a changé, mais
		// maintenant on utilise le clip en bouton:
		duplicate.enabled = true;
		duplicate.useHandCursor = true;
		// puis on lui dit où il doit nous mener
		// lorsqu'on clique:
		duplicate.onRelease = function() {
			getURL(XMLnode.attributes.adr, XMLnode.attributes.targ);
		};
	}
}
// la fonction est prête, il ne reste plus qu'à la lancer,
// avec en noeud XML le XML tout entier, et en niveau: '0'
constructLevel(XMLmenu.firstChild, 0);
stop();

Fini !
Comme toujours, une anim 100% code, “nette et propre” :-) mais vous pouvez evidemment remplacer l'affreux rectangle gris par un élément graphique en accord avec votre charte graphique, il suffit de le placer sur la scène et de lui donner le nom “modele”.

(Pour ceux qui aiment un peu bidouiller (tout le monde ici, j'espère! ;-) ) dans ce cas il est peut-être préférable d'utiliser des 'attachMovie', vous n'aurez pas à mettre votre clip sur la scène dans ce cas.)

En préparation, un menu du même genre mais animé, mais pas pour tout de suite ;-)

Et voici le dossier contenant tout ce qu'il faut, zippé :-)
(et à dezipper pour que le xml marche, comme toujours, n'essayez pas de voir ce que ça donne en ouvrant sous winzip ;-) )