Flash : Charger et exploiter un fichier XML externe

le 9 mars 2011 • Flash • par Dawlin

Salut les enfants ! On avait vu récemment dans ce tutoriel sur le XML ce qu'est un XML, comment on s'en sert, le rapport avec les Arrays et les doubles Arrays, et tout ça.

Donc aurjoud'hui, le but va être de charger un fichier XML et l'exploiter, alors qu'avant on n'avait fait qu'exploiter une variable XML.

Je vous conseille vivement avant de continuer de lire le premier tutoriel sur le XML, parce que ça me permettra de sauter des étapes, gros feignant que je suis

Ce qu'on veut faire

Bon notre but va être de commander à distance (par le XML) l'affichage de joulies boules rouges.

Le XML définira le nombre de boules rouges, ainsi que la position de chacune. Au final ça ressemblera à ça :

Écriture du XML

Bon en gros, je résume ce qu'on veut en mode "penser code" : on veut une grande racine root, comme d'habitude, et à l'intérieur on veut des boules rouges, qui ont chacune une position à l'intérieur...

Je vous laisse écrire ça, et je vous donne la réponse juste maintenant :

Clique pour afficher le code

Fermer ce cadre

<root>
    <boule>
         <x>100</x>
         <y>200</y>
    </boule>
    <boule>
         <x>350</x>
         <y>100</y>
    </boule>
    <boule>
         <x>0</x>
         <y>300</y>
    </boule>
</root>

Bon, c'est sur cette base de trois boules qu'on va travailler. On peux enregistrer le XML à côté de notre animation sous le nom de "monXML.xml"

Préparation de l'animation

Ba oui, les boules vont pas se dessiner toutes seules, donc on va créer une jolie boule rouge comme ceci :

Puis, on la convertit en un clip appelé "boule" (F8), on se rend dans la bibliothèque, clic-droit sur le clip, "liaisons", puis on coche "Exporter pour ActionScript" et on vérifie bien au passage que le nom de l'occurrence bibliothèque du clip est bien "boule".

Cela fait, il ne nous reste plus qu'à coder !

Charger, exploiter, et tout le tralala

On va faire un truc : je vais vous balancer le code tout fait, avec des commentaires, et comme soit vous le copiez bêtement, soit vous essayez de le comprendre C'est partit !


// Charger et exploiter un fichier XML dans flash
// Dawlin pour Kommunauty.fr

// Crée une variable XML
var xml:XML = new XML();
// J'efface les blancs qui vont géner flash
xml.ignoreWhite = true;

// Quand c'est chargé, on fait ... Attention ça ne se lancera que si le XML est fini de charger !
xml.onLoad = function(success) {
//tracer tout, mais c'est pas obligé
//trace(xml);
//Tracer si ya une erreur, les types d'erreurs sont dans l'aide de Flash (F1)
//trace(xml.status);

/* On met en place une boucle qui parcourt la balise root et qui 
à chaque fois attache un clip sur la scène.
elle va donc de i=0 à i=xml.firstChild.childNodes.length
*/
for(i=0; i<xml.firstChild.childNodes.length;i++){
	/*
	A chaque fois on attache un clip. Mais puisque son nom change tout le temps
	(il est fonction de i) on va le stocker dans une variable (c'est possible !)
	pour s'en servir sans connaître son nom !
	*/
	/* on va chercher "boule" dans la bibliothèque, on le nomme "b"+i et on le place sur le
	 le calque le prochain calque vide.
	 NB : on doit utiliser _root pour revenir au niveau normal, puisque this désigne le XML ;)
	 */
	var boule:MovieClip = _root.attachMovie("boule","b"+i,_root.getNextHighestDepth());
	// puis on va prendre les x et y dans le XML, en les convertissant en nombres avec ParseInt
	boule._x = xml.firstChild.childNodes[i].childNodes[0].firstChild.nodeValue;
	boule._y = xml.firstChild.childNodes[i].childNodes[1].firstChild.nodeValue;

// Et on recommence la boucle si c'est pas fini.
}

};
// Seulement quand on a défini ce qu'on faisait du XML une fois chargé, on le charge
xml.load("monXML.xml");

Note : Dans le tutoriel précédent, il fallait regroupper tout en une ligne dans le code XML. Maintenant, on peut laisser les blancs qu'on veut, puisqu'il s'agit d'un fichier exerne !

Alors bien sûr, on peut mettre un texte qui s'affiche dans la boule, faire varier la taille, mais ça, c'est à vous de le faire ;-)

En cadeau bonus:

Le XML : ici
La source .fla : ici

Merci d'avoir suivi ce tutoriel,

Dawlin

Flash : Charger et exploiter un fichier XML externe

Ce qu'on veut faire

Écriture du XML

Préparation de l'animation

Charger, exploiter, et tout le tralala

Lisez aussi...

Flash : Le principe d'une Map

Créer un jeu de parachute en FLASH