Tra le tante e-mail che ricevo mi è stato chiesto più volte come poter fare per caricare su Flash un'immagine esterna (JPG) o anche un filmato SWF in modo casuale, potendo gestire e aggiornare questi contenuti. In questo tutorial andremo a vedere quali metodi possiamo utilizzare per effettuare questa operazione, introducendo tra le altre cose l'utilizzo della classe LoadVars().
Nella programmazione possiamo trovare sempre diverse soluzioni soddisfacenti sulla base delle nostre esigenze. Di seguito ad esempio vediamo due metodi che hanno un approccio diverso ad una medesima problematica ognuno dei quali ha però i suoi vantaggi e se vogliamo i suoi svantaggi.
Primo metodo: LoadVars()
In questo primo metodo utilizzeremo LoadVars() per caricare il nome di un file esterno (JPG o SWF) che ci viene passato da uno script ASP.
Questo metodo ha quindi bisogno di un server che supporti le pagine ASP affinché lo script funzioni e interagisca con l'applicazione Flash.
Vediamo prima di tutto uno schema grafico dell'applicazione:
Come potete osservare l'applicazione è composta da uno script ASP, un documento SWF e un file di testo dove abbiamo memorizzato la lista dei files JPG/SWF da caricare in modo casuale.
Lista Files (files_list.txt)
files/01.jpg
files/02.jpg
files/03.jpg
files/04.jpg
files/05.jpg
files/06.jpg
files/07.jpg
files/08.jpg
.......
Script ASP
Come potete intuire leggendo i commenti al codice ASP, lo script esegue queste operazioni: apre il file di testo dove abbiamo inserito la lista dei nomi dei file che vogliamo far caricare in modo casuale, inserisce i nomi dei file in un Array ed estrae quindi casualmente un numero in base agli n valori possibili (dove n è la lunghezza dell'array). L'elemento i-esimo estratto corrisponde nell'Array al nome del file che viene mandato in output verso Flash.
Creiamo quindi l'applicazione Flash. Apriamo un nuovo documento di Flash (random.FLA) e creiamo tre livelli sulla TimeLine: LoadVars, clip e loghi.
Nel primo fotogramma del livello loadVars scriviamo il seguente codice Action Script:
// Richiamo funzione appena caricato il file swf
loadRandom();
stop();
// Funzione che richiama lo script ASP con il metodo LoadVars()
function loadRandom() {
myLoadVars = new LoadVars();
// Se state testando il filmato su Flash utilizzate un URL assoluto come nella riga successiva
//myLoadVars.load("http://www.vostrosito.com/RND/getRandomFile.asp");
// Se dovete esportare il file per il web usate la riga successiva
myLoadVars.load("getRandomFile.asp");
// ---
myLoadVars.onLoad = caricaFile;
function caricaFile(success) {
if (success) {
//trace(unescape(myLoadVars))
clip.loadMovie(myLoadVars.rndpic);
} else {
trace("Error");
}
}
}
L'oggetto LoadVars è molto simile all'oggetto XML (se non avete dimestichezza con l'oggetto XML in Action Script vi consiglio di leggere la guida sulla realizzazione di Applicazioni Flash-XML). I vantaggi di utilizzare questo oggetto per caricare delle variabili esterne da Flash è quello di poter contare su una serie di metodi e proprietà già predefiniti che ci permettono di manipolare i dati inviati e ricevuti in modo semplice e performante.
Osservando il codice Action Script possiamo evidenziare i passaggi indispensabili per utilizzare correttamente l'oggetto LoadVars. Dopo aver inizializzato l'oggetto myLoadVars = new LoadVars(); invochiamo il nostro script attraverso il metodo load myLoadVars.load("getRandomFile.asp"); (lo script deve risiedere nello stesso sottodominio dove si trova l'SWF) Subito dopo assegniamo una funzione di callback al metodo onLoad il quale gestisce l'evento legato al caricamento delle variabili. Attraverso il parametro "success" siamo quindi in grado di capire se l'operazione di caricamento è andata a buon fine o no.
Attenzione: le variabili restituite dall'oggetto LoadVars sono "URL encoded" ovvero hanno una codifica standard utilizzata per gli URL. Se effettuiamo un trace dell'oggetto LoadVars trace(myLoadVars) osserveremo nella finestra di output un risultato di questo tipo: rndpic=files%2F10%2Eswf&onLoad=%5Btype%20Function%5D per questo motivo ho utilizzato la funzione unescape di Flash Action Script trace(unescape(myLoadVars)) per dare in output un risultato più leggibile, ovvero: rndpic=files/03.jpg&onLoad=[type Function]. Prestate inoltre attenzione quando nel contenuto di una variabile appare la & commerciale, utilizzando l'URL encode nei vostri script.
Sul primo fotogramma del livello clip abbiamo un MovieClip (chiamato per semplicità "clip") all'interno del quale viene caricato il file SWF/JPG esterno e poi un pulsante al quale abbiamo associato il seguente codice ActionScript:
on (press) {
loadRandom()
}
La pressione del pulsante richiama la nostra funzione che carica di volta in volta un file JPG o SWF esterno in modo casuale.
Per vedere l'applicazione on line: http://www.enricolai.com/tutorials/RND_Image/random.html
2° Metodo: utilizzando l'XML
In questo secondo approccio utilizzeremo invece un file XML per memorizzare i file esterni che devono essere caricati in modo casuale su Flash.
Per semplicità faremo in modo che l'XML sia un file di testo statico, in questo modo questa applicazione sarà in grado di funzionare anche in locale senza nessuno script o server particolare. Potrà quindi essere utile a chi non ha a disposizione un server che supporti l'ASP o chi vuole realizzare un'applicazione Flash che andrà su CD-Rom.
Ecco il contenuto del file XML "images.xml":
files/01.jpg
files/02.jpg
files/03.jpg
files/04.jpg
files/05.jpg
files/06.jpg
files/07.jpg
files/08.jpg
files/01.swf
files/02.swf
files/03.swf
files/04.swf
files/05.swf
files/06.swf
files/07.swf
files/08.swf
files/09.swf
files/10.swf
files/11.swf
files/12.swf
files/13.swf
files/14.swf
files/15.swf
files/16.swf
files/17.swf
files/18.swf
files/19.swf
files/20.swf
files/21.swf
files/22.swf
files/23.swf
files/24.swf
Vediamo ora come realizzare la nostra applicazione Flash che in questo caso presenterà un po' più di codice che abbiamo sviluppato su 5 livelli: dateNum, openXML, functions, clip e loghi.
Codice Action script sul livello dateNum
//***********************************************
// Funzione che genera un numero in base alla data
// che viene utilizzato per forzare il caricamento (Refresh) dell'XML
function dateNumber() {
// Prendo la data attuale dal sistema ========================
var data_attuale = new Date();
var giorno_attuale = data_attuale.getDate();
var mese_attuale = data_attuale.getMonth()+1;
var anno_attuale = data_attuale.getFullYear();
var ora = data_attuale.getHours();
var minuti = data_attuale.getMinutes();
var secondi = data_attuale.getSeconds();
var millisec = data_attuale.getMilliseconds();
return (anno_attuale+""+mese_attuale+""+giorno_attuale+""+ora+""+minuti+""+secondi+""+millisec);
}
//***********************************************
Codice Action script sul livello openXML:
// Se dovete esportare l'SWF che va on line
// aggiungo alla fine dateNumer() per eseguire sempre in refresh dell'XML
//filexml = "images.xml&rnd="+dateNumber();
// --
//Se state testando l'applicazione in modalità prova filmato
filexml = "images.xml";
// Richiamo la funzione che carica l'XML
ApriXML();
// Funzione principale che carica il documento XML creato dallo script ASP con i dati
// prelevati dal Data Base
function ApriXML() {
loading.text = "Loading XML...";
mioxml = new XML();
// Array d'appoggio utilizzati
myarray = new Array();
myarray2 = new Array();
// ***************************
mioxml.load(filexml);
mioxml.onLoad = ElaboraXML;
function ElaboraXML(success) {
// Caso in cui il documento XML è stato caricato correttamente
if (mioxml.loaded) {
myarray = mioxml.childNodes;
// Richiamo funzioni che elaborano i dati XML e caricano i files random
Dati();
loadRandom();
loading.text = "";
// Elimino i vari array utilizzati per le operazioni in modo da liberare risorse
delete myarray;
delete myarray2;
delete mioxml;
} else {
// Caso in cui il documento XML NON è stato caricato correttamente
loading.text = "Error!";
}
}
}
Codice Action script sul livello functions:
// Funzione che prende i dati XML e li mette in degli Array
function Dati() {
// Array che contengono i Dati -----------------------
image = new Array();
// ---------------------------------------------------
// Cicli for per scorrere l'albero XML e prelevare i dati
for (k=0; k<=myarray.length; k++) {
if (myarray[k].nodeName == "images") {
myarray2 = myarray[k].childNodes;
for (j=0; j<=myarray2.length; j++) {
if (myarray2[j].nodeName == "image") {
image.push(myarray2[j].childNodes.toString());
}
}
}
}
}
//*************************
// Funzione che estrae un elemento casuale dall'array dei files
function loadRandom() {
num_casuale = random(image.length);
//trace(num_casuale)
clip.loadMovie(image[num_casuale]);
}
Il livello Clip e Loghi rimangono invariati ad eccezione di un campo di testo dinamico (loading) inserito per visualizzare lo stato del caricamento dell'XML.
La lettura del codice Action Script non dovrebbe risultare troppo complessa se seguite attentamente le parti commentate. Se non avete molta dimestichezza con l'XML (che per essere "parsato" richiede un codice Action Script alquanto articolato) vi consiglio di leggere questa guida Applicazioni Flash-XML, già pubblicata su HTML.it.
Per vedere l'applicazione on line: http://www.enricolai.com/tutorials/RND_Image/random_xml.html
Conclusioni e considerazioni sui due Metodi
L'applicazione Flash realizzata con il metodo dell'XML funziona in modo diverso rispetto alla prima. In questo caso Flash carica tutto il file XML e mette in un array tutti i nomi dei files, un po' quello che faceva lo script ASP nel primo metodo. Successivamente estrae un elemento casuale tra tutti gli elementi dell'array e quindi carica il file JPG/SWF che ha quel nome.
Quindi mentre nel primo metodo Flash non carica tutta la lista dei files ma interagisce continuamente con lo script per ottenere di volta in volta il nome del file da caricare, nel secondo metodo invece Flash carica tutta la lista dei files una sola volta all'avvio dell'applicazione e può quindi eseguire l'estrazione casuale del file direttamente tramite Action Script senza interagire con nessuno script.
Difficile dire quale dei due metodi sia migliore dal punto di vista tecnico o più performante a livello di caricamento e tempi d'attesa, l'unica cosa certa è che sono entrambi molto utili in base alle esigenze ed alle risorse che abbiamo in un determinato momento.
Ancora su LoadVars: il metodo sendAndLoad
In chiusura di questo tutorial ho pensato di fornire anche un esempio di come utilizzare il metodo sendAndLoad dell'oggetto LoadVars. A questo proposito useremo il classico form di autenticazione tramite UserName e Password e uno script ASP molto semplice.
Codice ActionScript
function ceckUser() {
stato.text = ""
myLoadVars = new LoadVars();
// Variabili da passare allo script
myLoadVars.user_var = userName_txt.text;
myLoadVars.password_var = passWord_txt.text;
// Se state testando il filmato su Flash utilizzate un URL assoluto
myLoadVars.sendAndLoad("http://www.enricolai.com/tutorials/RND_Image/login.asp", myLoadVars, "POST");
//myLoadVars.sendAndLoad("login.asp", myLoadVars, "POST");
myLoadVars.onLoad = verificaRisp;
function verificaRisp(success) {
//trace(unescape(myLoadVars));
if (myLoadVars.risp == "si") {
trace("Login effettuato")
// Codice da eseguire in caso di login
stato.text = "Login effettuato"
} else {
trace("Codici Errati")
// Codice da eseguire in caso di codici errati
stato.text = "Codici Errati"
}
}
}
Anche in questo caso l'URL dello script deve risiedere nello stesso sottodominio dove si trova l'SWF. Da notare: le variabili che devono essere passate allo script devono essere dichiarate come variabili dell'oggetto LoadVars stesso
myLoadVars.user_var = userName_txt.text;
myLoadVars.password_var = passWord_txt.text;
Per vedere e testare l'applicazione on-line: http://www.enricolai.com/tutorials/RND_image/sendAndload.html
Per scaricare invece tutti i sorgenti utilizzati in questo tutorial: http://www.enricolai.com/tutorials/RND_Image/sorgenti.zip
