Interpretare i dati di un file XML esterno con Flash CS3

[Flep]

Salve a tutti !

Quando si tratta di Flash CS3 e XML, ho notato frequenti difficoltà da parte di una percentuale degli utenti di FlepStudio con l' interpretare i dati XML.
Questo tutorial vuole essere un aiuto per chi ancora non ha ben chiaro come caricare, leggere ed interpretare i dati di un file XML esterno.
Vedremo come caricare un file XML e come ' navigarlo ' con Flash CS3 fino ad ottenere i valori dei suoi nodi e attributi.
Utilizzo le classi URLLoader e URLRequest per caricare il file XML.
Infine con le classi XML, XMLDocument e XMLNode interpreto i dati guidando Flash tra i nodi del file.
In questo caso specifico vedremo come leggere un XML che ospita dei dati riguardanti alcune immagini che volessimo caricare.

Prima di iniziare, per chi non avesse ben chiaro il concetto di XML, che tipo di linguaggio � ed i suoi standards, cosa � un nodo o un attributo, consiglio di dare uno sguardo a questo articolo:
linguaggio XML.

Chiaramente, non serve conoscere a livello molto avanzato il linguaggio XML per poter lavorare con Flash e creare qualche cosa di carino. Basta essere a conoscenza delle basi ed eventualmente per chi volesse creare delle applicazioni importanti con Flash e XML il consiglio � quello di approfondirne appunto la conoscenza ad un livello avanzato.

Creo un FLA che salvo con nome ' main.fla ' .
Creo un nuovo file XML che salvo con nome ' images.xml ', sviluppato in questo modo:

<?xml version="1.0" encoding="UTF-8"?>
<images>
	<item id="0" url="images/pic_0.jpg">ImageName 0</item>
	<item id="1" url="images/pic_1.jpg">ImageName 1</item>
	<item id="2" url="images/pic_2.jpg">ImageName 2</item>
	<item id="3" url="images/pic_3.jpg">ImageName 3</item>
	<item id="4" url="images/pic_4.jpg">ImageName 4</item>
	<item id="5" url="images/pic_5.jpg">ImageName 5</item>
	<item id="6" url="images/pic_6.jpg">ImageName 6</item>
	<item id="7" url="images/pic_7.jpg">ImageName 7</item>
	<item id="8" url="images/pic_8.jpg">ImageName 8</item>
	<item id="9" url="images/pic_9.jpg">ImageName 9</item>
</images>

La prima riga indica la versione di XML in uso e specifica la codifica ISO per la corretta interpretazione dei dati. ( ci interessa poco... basta sapere che deve esserci altrimenti Flash non riesce a fare il parse dei dati ).
La riga seguente apre il tag che non � altro che il nodo principale del file.
Ogni file XML deve avere un solo unico nodo principale che racchiude tutti gli altri nodi e attributi ( in questo caso appunto ).

All' interno del nodo abbiamo altri 10 nodi, detti figli di , con tag .
Ogni figlio di , quindi ogni nodo , ha un proprio valore che � quello che noi vogliamo recuperare.
In questo caso, ad esempio, il primo nodo ha il valore: ImageName 0.
Inoltre, ogni nodo ha 2 attributi ( id e url ) che a loro volta contengono dei valori che a noi serve recuperare.
In questo caso, ad esempio, il valore dell' attributo id del primo nodo � 0 ed il valore dell' attributo url � images/pic_0.jpg.

Detto questo, apriamo il pannello azioni di main.fla e scriviamo:

var my_xml:XMLDocument=new XMLDocument();
var loader:URLLoader=new URLLoader();
var request:URLRequest=new URLRequest('images.xml');

loader.addEventListener(Event.COMPLETE,onComplete);
loader.load(request);

function onComplete(evt:Event):void
{
	var result:XML=new XML(evt.target.data);
	my_xml.ignoreWhite=true;
	my_xml.parseXML(result.toXMLString());
	trace(my_xml);
	
	var node:XMLNode=my_xml;
	var totalNodes:int=node.firstChild.childNodes.length;
	trace('numero totale di nodi: '+totalNodes);
	
	for(var i:int=0;i < totalNodes;i++)
	{
		var nodeValue:String=node.firstChild.childNodes[i].firstChild.nodeValue;
		var idAttribute:int=int(node.firstChild.childNodes[i].attributes['id']);
		var imageURL:String=node.firstChild.childNodes[i].attributes['url'];
		
		trace('--------------------------------------------------------------------------------------------');
		trace('il valore del nodo n° '+i+' è '+nodeValue);
		trace("il valore dell' attributo id del nodo n° "+i+' è '+idAttribute);
		trace("il valore dell' attributo url del nodo n° "+i+' è '+imageURL);
	}
}

Analizziamo il codice Actionscript:
Creo una nuova istanza della classe XMLDocument:
var my_xml:XMLDocument=new XMLDocument();
creo una istanza di URLLoader ed una di URLRequest
var loader:URLLoader=new URLLoader();
var request:URLRequest=new URLRequest('images.xml');
aggingo un listener in ascolto a loader che intercetterà l' evento Event.COMPLETE quando il file XML sarà stato caricato completamente e solo in quel momento chiemerà la funzione onComplete.
loader.addEventListener(Event.COMPLETE,onComplete) ;
dico al loader di caricare la richiesta url ( la variabile request che è una istanza della clase URLRequest )
loader.load(request);

Nella funzione onComplete ho la certezza che il file XML è stato interamente caricato e quindi posso iniziare a leggere i dati che mi interessano, però prima devo fare un parse dei dati che ancora sono contenuti nel loader
creo una nuova istanza della classe XML ( una variabile di tipo XML ) e gli assegno il valore dei dati contenuti nel loader
var result:XML=new XML(evt.target.data);
gli dico di ignorare ogni spazio bianco all' interno del file XML ( significa ignorare gli spazi bianchi del codice ma non quelli dei valori dei nodi o degli attributi )
my_xml.ignoreWhite=true;
faccio un parse della istanza XML ( result )
my_xml.parseXML(result.toXMLString());
e faccio un trace di my_xml ottenendo il seguente output:

<images><item id="0" url="images/pic_0.jpg">ImageName 0</item><item id="1" url="images/pic_1.jpg">ImageName 1</item><item id="2" url="images/pic_2.jpg">ImageName 2</item><item id="3" url="images/pic_3.jpg">ImageName 3</item><item id="4" url="images/pic_4.jpg">ImageName 4</item><item id="5" url="images/pic_5.jpg">ImageName 5</item><item id="6" url="images/pic_6.jpg">ImageName 6</item><item id="7" url="images/pic_7.jpg">ImageName 7</item><item id="8" url="images/pic_8.jpg">ImageName 8</item><item id="9" url="images/pic_9.jpg">ImageName 9</item></images>

Come si può ben notare, adesso i dati del file XML sono disposti tutti su un' unica riga e senza spazi bianchi ( a parte quelli dei valori dei nodi e dei valori degli attributi chiaramente ) ed è sempre il tag che contiene tutto.
Questo trace è solo una funzione dimostrativa per questo tutorial, non consiglio di tenerlo presente per interpretare i dati in quanto essendo su una sola riga non sono facili da leggere per cui la miglior cosa da fare quando si cerca di interpretare un file XML con Actionscript è sempre bene dare uno sguardo al file XML originale che terremo aperto con qualsiasi editor XML.


Adesso, per semplificarmi la vita, uso la classe XMLNode di Actionscript e cioè creo una nuova variabile di tipo XMLNode alla quale assegno il valore del nodo
var node:XMLNode=my_xml;
La classe XMLNode ha diversi metodi che ci permettono di navigare il file XML fino a raggiungere ogni valore che vogliamo recuperare.
In questo caso utilizzo il metodo firstChild che non fa altro ( lo dice la parola stessa ) che portarmi all' interno del nodo seguito da childNodes.length che mi restituisce il numero di figli che sono contenuti dentro al nodo .
Infatti asegno questo valore ad una variabile di tipo numerico
var totalNodes:int=node.firstChild.childNodes.length;
e facendo il trace
trace('numero totale di nodi: '+totalNodes);
ottengo il seguente output:
numero totale di nodi: 10

Effettivamente, se andassimo a contare quanti nodi abbiamo dentro a verificheremmo che sono proprio 10.

A questo punto sono al corrente che le immagini che dovrò caricare sono 10 e quindi mi basta creare un ciclo for con massima iterazione il valore della variabile totalNodes per navigare all' interno di ogni nodo e recuperare ogni valore dei nodi così come ogni valore degli attributi.
for(var i:int=0;i < totalNodes;i++)
creo una variabile di tipo String e gli assengo il valore di:
node, che è il nodo principale - .firstChild che è l' insieme dei nodi contenuti in node - .childNodes[i] che è il nodo in base al valore della i - .firstChild che è il contenuto del nodo - .nodevalue che è il valore del nodo che voglio prendere, che voglio recuperare.
var nodeValue:String=node.firstChild.childNodes[i].firstChild.nodeValue;
Poi creo un' altra variabile di tipo int ( numerica ) e gli assegno il valore di:
node, che è il nodo principale - .firstChild che è l' insieme dei nodi contenuti in node - .childNodes[i] che è il nodo in base al valore della i - .attributes['id'] che è il valore dell' attributo id del nodo
PS: questo valore lo forzo ad essere numerico in quanto Flash considera una stringa ogni valore recuperato da un file XML e se non lo forzassi a numero ( dato che di numero si tratta ) potrei trovarmi con grossi problemi nel susseguirsi della mia applicazione.
var idAttribute:int=int(node.firstChild.childNodes[i].attributes['id']);
Adesso faccio la stessa cosa per l' attributo url
var imageURL:String=node.firstChild.childNodes[i].attributes['url'];

Ho aggiunto dei trace per facilitare la comprensione di questo script che mi danno questo output:
--------------------------------------------------------------------------------------------
il valore del nodo n° 0 è ImageName 0
il valore dell' attributo id del nodo n° 0 è 0
il valore dell' attributo url del nodo n° 0 è images/pic_0.jpg
--------------------------------------------------------------------------------------------
il valore del nodo n° 1 è ImageName 1
il valore dell' attributo id del nodo n° 1 è 1
il valore dell' attributo url del nodo n° 1 è images/pic_1.jpg
--------------------------------------------------------------------------------------------
il valore del nodo n° 2 è ImageName 2
il valore dell' attributo id del nodo n° 2 è 2
il valore dell' attributo url del nodo n° 2 è images/pic_2.jpg
--------------------------------------------------------------------------------------------
il valore del nodo n° 3 è ImageName 3
il valore dell' attributo id del nodo n° 3 è 3
il valore dell' attributo url del nodo n° 3 è images/pic_3.jpg
--------------------------------------------------------------------------------------------
il valore del nodo n° 4 è ImageName 4
il valore dell' attributo id del nodo n° 4 è 4
il valore dell' attributo url del nodo n° 4 è images/pic_4.jpg
--------------------------------------------------------------------------------------------
il valore del nodo n° 5 è ImageName 5
il valore dell' attributo id del nodo n° 5 è 5
il valore dell' attributo url del nodo n° 5 è images/pic_5.jpg
--------------------------------------------------------------------------------------------
il valore del nodo n° 6 è ImageName 6
il valore dell' attributo id del nodo n° 6 è 6
il valore dell' attributo url del nodo n° 6 è images/pic_6.jpg
--------------------------------------------------------------------------------------------
il valore del nodo n° 7 è ImageName 7
il valore dell' attributo id del nodo n° 7 è 7
il valore dell' attributo url del nodo n° 7 è images/pic_7.jpg
--------------------------------------------------------------------------------------------
il valore del nodo n° 8 è ImageName 8
il valore dell' attributo id del nodo n° 8 è 8
il valore dell' attributo url del nodo n° 8 è images/pic_8.jpg
--------------------------------------------------------------------------------------------
il valore del nodo n° 9 è ImageName 9
il valore dell' attributo id del nodo n° 9 è 9
il valore dell' attributo url del nodo n° 9 è images/pic_9.jpg

A questo punto ho tutto il necessario per popolare un Array in modo da tenere traccia dei dati che ho caricato in modo da poterli recuperare al momento opportuno.

Saty tuned !!!

[Giò]

Ciao Flep,

comincio direttamente con il ringraziarti per tutto quello che fai. Mi sono avvicnata da poco a Flash e a Sandy per il 3D e sono una assidua frequentatrice del tuo sito. ho provato a leggere i dati da un fil XML, legge il valore, ma all'uscita dalla funzione onComplete la variabile su cui è registrato il valore viene azzzerata. Ti posto il codice per farti capire meglio.

package
{
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.display.Sprite;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
import flash.xml.*;
public class MyClip extends MovieClip
{
private var clip_mc1:Clip;
private var my_xml:XMLDocument=new XMLDocument();
private var loader:URLLoader=new URLLoader();
private var request:URLRequest=new URLRequest('images.xml');
public var numClips:int;
private var clips_array:Array;
public function MyClip()
{
 
loader.addEventListener(Event.COMPLETE,onComplete);
loader.load(request);
clips_array=new Array();
this.attachClips();
this.go();
}
 
private function onComplete(evt:Event):void
{
var result:XML=new XML(evt.target.data);
my_xml.ignoreWhite=true;
my_xml.parseXML(result.toXMLString());
trace(my_xml);
 
var node:XMLNode=my_xml;
var totalNodes:int=node.firstChild.childNodes.length;
 
for(var i:int=0;i < totalNodes;i++)
{
numClips=int(node.firstChild.childNodes[i].firstChild.nodeValue);
}
}
private function attachClips():void
{
for(var i:int=0;i < numClips;i++)
{
var clip_mc:Clip=new Clip();
this.addChild(clip_mc);
clips_array.push(clip_mc);
clip_mc.x=20*i;
clip_mc.y=20*i;
}
clips_array.reverse();
}
 
private function go():void
{
for(var j:int=0;j < numClips;j++)
{
clips_array[j].buttonMode=true;
clips_array[j].addEventListener(MouseEvent.MOUSE_DOWN,moveMe);
clips_array[j].addEventListener(MouseEvent.MOUSE_UP,dropMe);
}
 
}
private function moveMe(m:MouseEvent):void
{
m.target.startDrag();
}
 
private function dropMe(m:MouseEvent):void
{
m.target.stopDrag();
}
 
}
}

PLEASE HELP ME

[Flep]

Ciao Giò e benvenuta

Scusa ma non ho capito, a quale variabile ti riferisci ?

[Giò]

La variabile in questione è numClips. Dovrebbe essere una variabile globale che stabilisce il numero di clip che l'utente vuole aggiungere al filmato. Su ognuna delle clip costruite poi posso fare il drag and drop e posizionarle dove voglio.


Grazie Mille, è bello e confortante avere qualcuno che ti ascolta

[Flep]

Mi fai vedere anche l' XML ?

[Giò]

"1.0" encoding="UTF-8"?>

5

[Giò]

"1.0" encoding="UTF-8"?>

>5


Dentro la funzione onComplete la variabile numClips=5 all'esterno della funzione la variabile numClips=0

E' un problema di scope della variabile? Non capisco

[Giò]

scusate non riesco a postare il file xml


5


Dentro la funzione onComplete la variabile numClips=5 all'esterno della funzione la variabile numClips=0

E' un problema di scope della variabile? Non capisco

[Giò]

[left]    5
3
4[/left]

Originally Posted by Flep

Originally Posted by Flep

Mi fai vedere anche l' XML ?

Ecco Flep. E' un semplice xml di prova.

Con vari TRACE ho scoperto che la variabile numClips nel metodo onComplete viene gestita correttamente, all'uscita viene azzerata. Per quale motivo?

Dipende dal fatto che la funzione viene chiamata attraverso addEventListener?

Per favore aiutatemi.

Non ce la faccio più

grazie

P.S. Scusate per il pasticcio di stamattina

[Flep]

Se tu ad esempio dici trace(numClips); dall' interno della funzione go, è chiaro che è zero, perchè in sostanza fai caricare l' XML e non aspetti che sia completamente caricato prima di chiamare la funzione go.

Quindi, queste chiamate:
this.attachClips();
this.go();

vanno alla fine della funzione onComplete