Il file XML
L'utilizzo dell'XML con Flash è divenuto oramai uno standard che va affermandosi sempre più, soprattutto per tutti quei siti che fanno della dinamicità il proprio punto forte. Attraverso l'utilizzo dell'XML con Flash è possibile creare siti web completamente interattivi e dinamici allo stesso tempo, modificandone i contenuti in modo molto semplice e rapido senza dover apportare alcuna modifica al file sorgente FLA. Un caso molto interessante e adatto per questo esempio è quello relativo ad un Box di NEWS da mettere nel nostro sito web. Creeremo un filmato interattivo capace di visualizzare le NEWS caricate da un file di testo XML esterno.
Definiamo la possibile struttura dei nostri dati all'interno del file XML rendendola molto semplice ed intuitiva:
<news data="30/05/2002">Aggiornamento della sezione DownLoad.</news>
<news data="02/05/2002">Scarica i nuovi sorgenti FLA open source.</news>
<news data="02/04/2002">Aggiornamento nel layout grafico del sito.</news>
<news data="02/03/2002">Nuove foto nella sezione PHOTO.</news>
Come possiamo osservare ogni NEWS è racchiusa all'interno dei TAG NEWS e ha come attributo "data" una stringa che indica la data della notizia.
Il file FLASH
Costruiamo ora il nostro filmato SWF che dovrà visualizzare le news del nostro file XML. Andiamo a vedere il codice Action Script che viene utilizzato nel file sorgente:
//filexml = "news.xml?rnd="+random(99999);
filexml = "news.xml";
mioxml = new XML();
apparray = new Array();
mioxml.load(filexml);
mioxml.onLoad = Metti;
function Metti (success) {
if (mioxml.loaded) {
apparray = mioxml.childNodes;
Dati();
MenuBar();
loaderxml = "";
}
;
}
;
function MenuBar () {
newsmax = ladata.length-1;
//trace(newsmax)
newscounter = 0;
for (i=0; i<=newsmax; i++) {
clipnews.attachMovie("tabnews", "tabnews"+i, i);
clipnews["tabnews"+i]._x = 1;
clipnews["tabnews"+i]._y = 125*i;
clipnews["tabnews"+i].data = ladata[i];
clipnews["tabnews"+i].notizia = lanotizia[i];
if (i<9) {
clipnews["tabnews"+i].numero = "0"+(i+1);
} else {
clipnews["tabnews"+i].numero = (i+1);
}
;
}
;
}
;
function Dati () {
ladata = new Array();
lanotizia = new Array();
// note = new Array();
// trace(apparray);
for (k=0; k<=apparray.length; k++) {
if (apparray[k].nodeName == "news") {
ladata.push(apparray[k].attributes.data.toString());
lanotizia.push(apparray[k].childNodes.toString());
// note.push(apparray[k].attributes.note.toString());
}
}
;
}
;
Come possiamo notare dal codice sopra riportato la funzione che viene eseguita al caricamento del file XML richiama due funzioni che sono Dati() e MenuBar(). Come possiamo facilmente intuire la funzione Dati() carica i dati presi dal file XML e li inserisce in degli Array in modo da essere poi facilmente manipolati. Vengono quindi creati due Array:
- ladata = array che contiene la data di ciascuna news
- lanotizia = array che contiene il corpo della notizia vera e propria
A questo punto la funzione MenuBar() costruisce i clip filmati relativi alle news a cui passa per ogni notizia la data e il testo della notizia che vengono estrapolati attraverso un ciclo "for" dagli array precedentemente creati dalla funzione Dati().
Come possiamo osservare i clip vengono creati e messi all'interno del clip vuoto "clipnews" che si trova in un livello mascherato. Definiamo anche due parametri che sono newscounter e newsmax che indicano rispettivamente il numero della news visualizzata in un dato momento e il numero massimo delle news presenti nel file XML (e quindi caricate negli array); questi due valori sono importanti per gestire il movimento e lo scroll del clip delle news.
Il codice Action Script associato al clip "clipnews" è il seguente:
onClipEvent (load) {
this._y = 200;
// x_fin=8;
}
onClipEvent (enterFrame) {
y = _y;
y_fin = ((-_parent.newscounter)*125)+70;
dy = y_fin-y;
dy /= 2.5;
_y += dy;
// trace(_x)
}
mentre quello associato al cursore che ci permette di andare avanti e indietro manualmente nella consultazione delle news è il seguente:
onClipEvent (load) {
x_fin = this._x;
x_iniz = this._x;
y_iniz = this._y;
max_escursione = this._x+125;
drag = false;
}
onClipEvent (enterFrame) {
if (drag == false) {
x_fin = (_parent.newscounter/_parent.newsmax)*125;
x = this._x;
dx = (x_fin-x)+x_iniz;
dx /= 2.5;
this._x += dx;
}
}
onClipEvent (mouseDown) {
if (hitTest(_root._xmouse, _root._ymouse, true)) {
drag = true;
startDrag (this, false, x_iniz+1, y_iniz, max_escursione+1, y_iniz);
}
;
}
onClipEvent (mouseUp) {
if (drag == true) {
drag = false;
stopDrag ();
_parent.newscounter = Math.round(( _parent.newsmax/125)*(this._x-x_iniz));
}
}
Abbiamo inoltre un clip filmato vuoto con lunghezza 25 fotogrammi che contiene nel venticinquesimo fotogramma il codice Action Script
if ( _root.newscounter >= _root.newsmax){
_root.newscounter=0}
else {
_root.newscounter++
};
che permette lo scroll automatico delle news.
