Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

ceci viens de ce que j'ai appris et de mon expereience donc c'est a prendre au conditionnel, c'est pas parfait et améliorable ;-)

1. Le format XML

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

1.1 les nodes

le format xml est un format basée sur des balises (comme le html)

une balise s'ouvre <nom de la balise> et se ferme </nom de la balise> donc pour fermer on rajoute juste / devant le nom de la balise a noter que s'il n'y a rien entre la balise ouvrante et la balise fermante on peut directement fermer la balise ouvrante

<nom de la balise />

donc en mettant un / a la fin du nom de la balise

en xml l'ensemble <nom de la balise>contenue</nom de la balise> est appelé un node, ou nœud en français mais comme dans flash le mot utiliser est node j'utiliserai node pour la suite de ce tuto

1.2 nom de node

un node a un nom de node (nodeName) qui correspond en faite au nom de la balise donc dans

<image/>

le nom du node est image

1.3 attributs

un node peut avoir 0 ou plusieurs attribut

<image url="image1.jpg" nom="mes vacances"/>

le node image a 2 attributs: url et nom url a pour valeur “image1.jpg” et nom “mes vacances”

1.4 contenue de node

un node peut avoir du contenue au format texte

<image url="image1.jpg">mes vacances</image>

le node image a un attribut url et a pour contenue “mes vacances”

un node peut contenir d'autre node

<image >
	<url lien="image1.jpg"/>
	<texte>mes vacances</texte>
</image>

le node image contient 2 nodes: url et texte le node texte a un attribut lien et pas de contenue le node texte n'a pas d'attribut et a pour contenue “mes vacances”

donc au final un node peut avoir 2 types de contenues: texte ou nodes il me semble qu'il est mieux d'éviter de mélanger les deux ainsi plutôt que d'avoir

<image >
	<url lien="image1.jpg"/>
        mes vacances
</image>

il est mieux de faire

<image >
	<url lien="image1.jpg"/>
	<texte>mes vacances</texte>
</image>

1.5 la balise CDATA

on peut mettre du texte au format html dans contenue d'un node cependant le format html étant aussi un format a base de balise il pourrait y avoir des conflits

<texte>
	<b>mes vacances</b>
</texte>

ici on veut que mes vacances soit en gras, hors le xml va interpréter la balise <b> comme étant une balise xml donc ici on a le node <texte> qui contient le node <b> qui a pour contenue mes vacances

pour palier a cela il existe la balises CDATA au seins de cette balises le texte n'est pas interpréter comme étant du xml la balise CDATA fonctionne ainsi <![CDATA[contenue]]> donc

<texte><![CDATA[<b>mes vacances</b>]]></texte>

ici le node texte contient le texte ”<b>mes vacances</b>”, la balise <b> n'est pas interprété

1.6 parent et enfant

les nodes contenues dans un node sont appelé les enfants de ce node

<image >
	<url lien="image1.jpg"/>
	<texte>mes vacances</texte>
</image>

le node <image> a 2 enfants: <url> et <texte> cependant dans

<texte>mes vacances</texte>

“vacances” n'est pas un enfant du node <texte> ce n'est que le contenue de ce node

comme un node peut avoir des enfants il est logique que ce node soit le parent de ces enfant

<image >
	<url lien="image1.jpg"/>
	<texte>mes vacances</texte>
</image>

les node <url> et <texte> ont pour node parent <image> un node peut être a la fois enfant (s'il est contenue dans un node) et parent (s'il contient des nodes)

1.7 la racine

comme des nodes peuvent avoir des enfants et que les enfants peuvent avoir des enfants on va parler d'arborescence

en xml il doit n'exister qu'un seul node tout en haut de l'arborescence ainsi on aura pas

<image url="image1.jpg" />
<image url="image2.jpg" />

mais plutôt

<data>
	<image url="image1.jpg" />
	<image url="image2.jpg" />
</data>

2 le xml dans flash

je vais parler de classes, il est mieux de savoir ce que c'est mais ce n'est pas indispensable dite vous qu'une classe donne acces a des fonctions (chose qui font des calcul) et des proprietes (choses qui contiennet des valeurs)

dans flash il existe 2 classes pour gerer le xml la classe XML f1→Guide de référence du langage ActionScript 2.0 →Classes ActionScript > XML et la classe XMLNode f1→Guide de référence du langage ActionScript 2.0 →Classes ActionScript > XMLNode

2.1 un xml depuis une chaine de caractere

Apparté je vas utiliser le typage fort (c'est plus propre) mais dans flash c'est pas indispensable (mais c'est mieux de la faire) ainsi si vous voyez des truc du genre var toto:Number = 5 cela veux dire que je créer une variable qui s'appelle toto qui va contenir un nombre et que sa valeur est 5 mais on peut tres bien faire toto=5 la fonction trace dans flash appelle la fonction toString de l'objet passé en parametre, c'est a dire qu'il transforme en texte l'objet passé en parametre, la fonction trace est utile pour voir ce qu'il y a dans un node, mais elle ne sert pas a les manipuler

pour creer un xml on utilise donc la classe XML

var x:XML = new XML()

la on créer un objet de type XML nommé x qui est vide

var x:XML = new XML("<image url='image1.jpg'/>")
trace(x)

on créer un objet xml qui a un node <image> qui a un attribut url

var x:XML = new XML("<image url='image1.jpg'>mes vacances</image>")
trace(x)

l'objet x (de type XML) a un node image qui a un attribut url et a pour contenue “mes vacances”

2.1 ajouter des enfants dans un objet XML vide

pour ajouter des enfants on utilise la classe XMLNode

var enfant1:XMLNode = new XMLNode(1,"data")

ici on créer un node qui a pour nom “data” (on verra ce que veux dire le 1 plus tard)

cependant ce node n'est pour le moment attacher a aucun objet xml pour cela il y a la fonction appendChild

//on créer un objet xml vide
var x:XML = new XML()
//on creer un node
var enfant1:XMLNode = new XMLNode(1,"data")
//on ajoute ce node a l'objet xml
x.appendChild(enfant1)
trace(x)

pour ajouter un enfant au node data

var x:XML = new XML()
var enfant1:XMLNode = new XMLNode(1,"data")
var image1:XMLNode = new XMLNode(1,"image")
enfant1.appendChild(image1)
x.appendChild(enfant1)
trace(x)

on peut ajouter plusieur enfant

var x:XML = new XML();
var enfant1:XMLNode = new XMLNode(1, "image");
var image1:XMLNode = new XMLNode(1, "url");
enfant1.appendChild(image1);
var image2:XMLNode = new XMLNode(1, "texte");
enfant1.appendChild(image2);
x.appendChild(enfant1);
trace(x);

dans flash la classe XML herite de XMLNode, ce qui veux dire qu'un objet XML est aussi un objet XMLNode ainsi tout ce que l'on peut faire avec un objet XMLNode et vrai avec un objet XML (mais pas le contraire ;-) )

2.2 definnir les attributs

dans la classe XMLNode il existe l'objet “attributes”, cette objet contient les attributs d'un node il peut etre modifer

var x:XML = new XML();
var enfant1:XMLNode = new XMLNode(1, "image");
var image1:XMLNode = new XMLNode(1, "url");
image1.attributes.lien = "image1.jpg"
enfant1.appendChild(image1);
var image2:XMLNode = new XMLNode(1, "texte");
enfant1.appendChild(image2);
x.appendChild(enfant1);
trace(x);

ici on defiini l'attribu lien du node image1 qui est aussi le node <url> (qui est referencé dans la variable image1

pour acceder a un attribut on utilise aussi “attributes”

var image1:XMLNode = new XMLNode(1, "url"); 
image1.attributes.lien = "image1.jpg" 
trace(image1.attributes.lien)

2.3 definnir le contenue texte d'un node

pour definnir le contenue node d'un texte il faut ajouter un node de type texte

var image1:XMLNode = new XMLNode(1, "url"); 
var texteNode:XMLNode = new XMLNode(3,"image1.jpg")
image1.appendChild(texteNode)
trace(image1)

quand on créer un node avec new XMLNode on passe en parametre le type de node que l'on veux créer 1 signifie un element de type ELEMENT_NODE 3 signifie un element de type TEXT_NODE pour plus d'information f1→Guide de référence du langage ActionScript 2.0 →Classes ActionScript > XMLNode > XMLNode(), constructeur

2.4 recuperer le contenue texte d'un node

pour recuperer le contenue texte d'un node il faut utiliser la propriete nodeValue de la classe XMLNode

on viens de voir que le contenue texte d'un node etait en faite contenue dans un node de type texte pour pointer vers le contenue il faut donc pointer vers ce node puis vers le nodeValue

var image1:XMLNode = new XMLNode(1, "url"); 
var texteNode:XMLNode = new XMLNode(3,"image1.jpg")
image1.appendChild(texteNode)
trace(image1.firstChild.nodeValue)

firstChild equivaut a childNodes[0]

xml = new XML("<data>coucou</data>")
trace(xml.childNodes[0].firstChild.nodeValue)

xml.childNodes[0] pointe vers le node data xml.childNodes[0].firstChild pointe vers le node texte du node data xml.childNodes[0].firstChild.nodeValue pointe vers le texte contenue dans le node data

3 charger un fichier xml

ouvrez le blocnote creez un nouveau fichier enregistrer le sous le nom “xml.xml” en choisissant le codage UTF8 copier le texte

<data>
	<image url="imgage1.jpg">mes vacances</image>
</data>

le chargement d'un fichier xml est assynchrone, c'est a dire que le chargement n'est pas instanné il faut donc attendre que le fichier soit chargé avant d'essayer de le lire pour cela il y a la fonction onLoad

de plus flash a tendance a ajouter des nodes vides quand il interprete un fichier xml pour eviter cela il y a la prorprietes ignoreWhite

//on crée un objet xml
xml = new XML()
//on dis de ne pas tenir compte des nodes vides créer par flash
xml.ignoreWhite = true
//on definni l'action a faire une fois le fichier loadé
xml.onLoad = function(){
	trace(this)
}
//on load le fichier
xml.load("xml.xml")

au seins de la fonction onLoad , this renvoie a l'objet xml, il faut donc bien a faire attention a ne pas l'utiliser pour cibler un objet sur la scene

pour pointer vers le contenue du node image

xml = new XML()
xml.ignoreWhite = true
xml.onLoad = function(){
	trace(this.firstChild.firstChild.firstChild.nodeValue)
}
xml.load("xml.xml")

this.firstChild → node <data> this.firstChild.firstChild → node <image> this.firstChild.firstChild.firstChild → node texte du node image this.firstChild.firstChild.firstChild.nodeValue → contenue texte du node image

3.1 connaitre l'avancement du chargement d'un fichier xml

un objet xml a 2 functions, getBytesLoaded() et getBytesTotal()

on peut s'en servir dans nu enterFrame par exemple

var xml:XML = new XML();
xml.ignoreWhite = true;
xml.onLoad = function() {
	trace(this.firstChild.firstChild.firstChild.nodeValue);
};
xml.load("xml.xml");
onEnterFrame = function () {
	//on calcul le pourcentage de chargement du fichier
	p = Math.round(100*xml.getBytesLoaded()/xml.getBytesTotal());
	trace(p);
	//on oublie pas de supprimer le onEnterFrame une fois le chargement fini
	if(xml.getBytesLoaded()==xml.getBytesTotal())delete onEnterFrame
};

4 exemple: lire un flux RSS

dans cette exemple on va charger un flux rss du net on affiche les titres des articles dans un liste quand on selectionne un titre on affiche l'article dans une zone de texte

pour cela il faut donc un champs de texte de saisi pour entrer l'url du flux un bouton pour lancer le chargement du flux une liste pour afficher les titres des articles une zone de texte pour afficher l'article

voir le fichier xml.fla

a+