Kommunauty
Connexion
Inscription

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

  
3 commentaires

bonjour et merci pour votre tuto qui est excellent!

je souhaite que les boules soient cliclables pour afficher du texte dans un texte dynamique;

je m'explique j'ai rajouté :

boule.onMouseDown = function() {nom=xml.firstChild.childNodes[i].childNodes[2].firstChild.nodeValue; }

nom est le nom de mon texte dynamique dans la scène et j'ai rajouté :

150

50

blabla

]]>

dans le xml mais à la sortie j ai un non défini dan sma zone de texte dynamique pouvez vous m'éclairer?

je souhaite queand cliquant sur une des boules générée il s affiche le texte associé qui figure dans le xml dans mon texte dynamique sur la scène !

merci d'avance pour les conseils

};

le 20 janvier 2012

bonjour,

en fait j'ai rajouté cette ligne dans votre as:

boule.onMouseDown = function() {

info.text=xml.firstChild.childNodes[i].childNodes[2].firstChild.nodeValue;}

en fait je souhaitait cliquer sur les boules pour leur faire afficher dans une zone de texte dynamique appelé "info" des valeurs associées à chaque coordonnées dans le xml :

blabla

50

50

taratata

mais je ne vois pas comment le faire, pouvez vous m'aiguiller?

le 23 janvier 2012

Alors d'une part je crois que c'est onPress et pas onMouseDown

Ensuite le code m'a l'air bon, donc essaie avec onPress et recontacte moi ...

le 19 avril 2012



Ajoute un commentaire !

Ajouter une image... Trouvée sur internet » De mon PC »
Adresse URL :
Adresse de la page de la vidéo :
Taille du texte :
Couleur du texte :

Article lu 6595 fois.