• Web Design » Flash » Tutorial Flash

Il problema principale consiste nel dover gestire con un unico preloading non solo i dati presenti nel movie principale (grafica, action, suoni, etc) ma anche quelli provenienti dal database, che nel caso specifico sono dei link.
Analogamente cercherò di proporre una tecnica di preloading alternativa, che sfrutta le action di Flash Mx.
Mi imporrò di impostare una strategia di programmazione Mx-oriented.

Andiamo nel movie pincipale e inseriamo nel primo keyframe del consueto layer chiamato actions il pezzo di codice che carica le variabili dal database:

caricamento = new LoadVars()
caricamento.onLoad = function ()
{
_root.indirizzi='';
for(var i=0;i<=caricamento.numero_link-1;i++)
{
_root.indirizzi+=eval("caricamento.indirizzo" + i)+ '<br>';
}
}
caricamento.sendAndLoad("link.php" , caricamento, "POST");

Useremo il metodo object oriented.
Alla riga 1 infatti definisco l'istanza caricamento del nuovo oggetto LoadVars, che è appunto la nostra valida alternativa all'action loadVariables di Flash 5.
Applichiamo subito un metodo: onLoad.
Alla riga 2 infatti viene definita una funzione che verrà eseguita alla fine dell'operazione di scambio delle variabili tramite l'istanza caricamento dell'oggetto LoadVars.
Quest'operazione di scambio avviene tramite il metodo sendAndLoad presente alla riga 10, il quale appunto invia dati al file link.php (notare la parola Send) e riceve dati dallo stesso (notare la parola Load).
Diamo un'occhiata alla sintassi del metodo: il primo parametro passato è il file php che vogliamo chiamare (esso restituirà i link provenienti dal database), il secondo parametro è l'istanza dell'oggetto LoadVars che scambierà i dati con il file php, il terzo parametro è invece il metodo di scambio dati secono il protocollo http.
Attenzione al secondo parametro: in pratica Flash invierà al file link.php solo le variabili presenti dentro l'istanza caricamento e contemporaneamente caricherà le variabili ritornate dal file php dentro e solo dentro l'istanza caricamento.In questo caso però ho preferito utilizzare il sendAndLoad, in quanto in generale lo scambio dei dati con un Database non è unidirezionale.

Al completamento dello scambio di variabili con il file link.php verrà eseguito il pezzo di codice tra la riga 3 e la 9.
In particolare la riga 4 definisce alla root del filmato principale una variabile indirizzi.
Dopodichè un ciclo For (righe 5-8) assegna a questa variabile i valori dei link provenienti dal file php che sono stati caricati nell'istanza caricamento dell'oggeto LoadVars.
Uscita del file link.php.

indirizzo0=<a href="http://www.misentropy.net" target="_blank">Misentropy</a>&indirizzo1=<a href="http://www.webmasterpoint.net" target="_blank">webmasterpoint</a>&indirizzo2=<a href="http://www.duplicatetherest.com.net" target="_blank">Duplicateteherest</a>&numero_link=3

In uscita al file link.php avremo un output del tipo: nomevariabile0=valorevariabile0&nomevariabile1=valorevariabile1&nomevariabile2=valorevariabile2&... in cui facciamo costruire direttamente i tag in html dei link (anche con il target _blank), più una variabile finale che mi dice quanti link sono presenti così da poter definire il limite del ciclo for.

La variabile indirizzo0 proveniente dal file link.php verrà caricata dentro caricamento e quindi per poterne utilizzare il valore bisogna puntare alla variabile caricamento.indirizzo0.

Alla fine del processo di caricamento il suo valore è il seguente:

indirizzi='<a href="http://www.misentropy.net" target="_blank">Misentropy</a><br><a href="http://www.webmasterpoint.net" target="_blank">webmasterpoint</a><br><a href="http://www.duplicatetherest.com.net" target="_blank">Duplicateteherest</a><br>'

In pratica abbiamo costituito una variabile contenente i dati che ci servivano direttamente in formato HTML in modo da poter essere inseriti in seguito in un campo di testo dinamico che interpreta l'HTML.
Il php fa il lavoro sporco di formattazione e noi con un semplice passaggio di variabili ci troviamo i link già pronti per essere utilizzati.

Potete fare tutto con file di testo e tutto funzionerà ugualmente.

Ok, andiamo ora al preloading dell'intero filmato.Lo faremo un modo nuovo per fare un preloading.
Di seguito al precedente pezzo di codice inseriamo il nostro preloader:

preloading= new Object()
preloading.carica= function ()
{
caricata = (_root.getBytesTotal()+(_root.caricamento.getBytesTotal()))-(_root.getBytesLoaded()+_root.caricamento.getBytesLoaded());
if (caricata<=0 && _root.caricamento.loaded==true )
{
_root.gotoAndStop(2);
clearInterval(intervallo);
}
updateAfterEvent();
}
intervallo=setInterval(preloading,"carica" ,500)

Alla riga 11 definiamo l'oggetto preloading e di seguito ne definiamo anche il metodo carica.
Passiamo alla riga 22: qui chiamiamo la funzione setInterval che ritorna un identificatore chiamato intervallo.
Il setInterval si riferisce all'oggetto preloading e ne chiama il metodo carica ogni 500 millisecondi.
Ciò vorrà dire che il pezzo di codice che sta tra la riga 12 e la riga 21 viene ripetuto ogni mezzo secondo.
In particolare la riga 14 definisce una variabile caricata che calcola la differenza tra i byte totale del movie e i byte caricati in quell'istante.
Attenzione, oltre ai consueti _root.getBytesTotal() e _root.getBytesLoaded() troaviamo anche gli insoliti _root.caricamento.getBytesTotal() e _root.caricamento.getBytesLoaded().
I primi due indicano il numero di bytes totali e il numero di bytes caricati del movie.
Analogamente gli altri due sono due metodi del nuovo oggetto LoadVars e indicano appunto il numero di bytes totali e il numero di bytes caricati dell'istanza dell'oggetto LoadVars, nel nostro caso la variabile caricamento in cui sono scambiati i dati con l'esterno (il database o il file di testo).
In questo caso infatti il movie deve gestire due categorie diverse di dati, quelli interni a se stesso (suoni, grafica, etc) e quelli appunto scambiati con l'esterno.
Alla riga 15 inizia il codice che controlla se i dati sono stati caricati totalmente.

Alla riga 15 non solo controllo la variabile caricata, ma anche la proprietà loaded dell'oggetto LoadVars.
Quest'ultima viene attivata al caricamento dell'oggetto LoadVars (ovvero dal suo metodo onLoad) e assume il valore false fino a che lo scambio dei dati con l'esterno non termina.
In realtà io controllo l'esatto caricamento dei dati con la variabile caricata e non avrei bisogno di questa ulteriore verifica. .
La proprietà loaded dell'oggetto LoadVars invece rimane false se per qualche motivo l'operazione di onLoad con l'esterno non è andata a buon fine.

Se tutti i dati sono stati caricati correttamente allora si passa a eseguire la riga 18 (in cui c'è un semplicissimo gotoAndStop al keyframe in cui è posizionato il contenuto del movie) e la riga 19 che annulla l'azione di intervallo, ovvero blocca un'ulteriore ripetizione della funzione carica impostata tramite il setInterval della riga 22.
E così il nostro processore non esegue cicli inutili.

La riga 20 serve per refreshare in maniera ottimale lo schermo.

Costruiamo un nuovo layer chiamato preloading sotto il layer actions.
Al primo keyframe inseriamo un campo di testo e definiamo la variabile caricata nel suo interno (vedi figura in basso).
Questo campo di testo prende il valore della variabile caricata calcolata alla riga 14 e visualizza il numero di byte rimanenti durante la fase di preloading.

Andiamo al secondo keyframe del movie e costruiamo un nuovo layer chiamato content.
Qui inseriamo un campo di testo con testo dinamico e associamogli la variabile indirizzi.
Altre caratteristiche del campo di testo sonno la proprietà multiline e Rendered text as HML (vedi figura sotto).
La prima permette di ordinare il testo su più linee, mentre la seconda fa sì che il valore della variabile indirizzi venga interpretato come HTML.

Andate a dare un'occhiata al layer actions e più precisamente al codice presente alla riga 7 dove costruivamo la variabile indirizzi con tutti i tag HTML provenienti dal database.
Il campo di testo legge i tag HTML della variabile e ci fa vedere tutti gli indirizzi caricati dal database con corrispondenti link in una nuova finestra.