AS3 - Caricamenti esterni con ActionScript3

Inserito il 06-08-2007

Come abbiamo visto in precedenti articoli, il codice in AS3 è cambiato in maniera radicale rispetto alle precedenti versioni, e quello che prima consideravamo scontato, adesso non lo è più.

Un esempio di questo cambiamento può essere dato da una pratica considerata piuttosto consueta, come quella di effettuare un caricamento di file swf o immagini esterne. Infatti se fino a flash mx era possibile caricare file esterni utilizzando semplicemente il metodo loadMovie della classe MovieClip assegnandogli un preload "casereccio", e fino a flash 8 era possibile con AS2, utilizzare la classe MovieClipLoader, per gestire il caricamento esterno, in AS3 la gestione degli eventi e l'introduzione della "display list", hanno mandato in pensione i vecchi metodi in favore di un modo più pulito e probabilmente sintetico, di trattare i caricamenti esterni.

Intanto facciamo una piccola digressione, chiedendoci <<Ma cosa è esattamente la "display list"?!>> Si tratta sostanzialmente della raccolta di una serie di classi preposte alla visualizzazione di diversi oggetti sullo stage, infatti ad esempio tra queste è presente una classe Shape, che può contenere solo elementi grafici disegnati con Actionscript, oppure la classe Bitmap che contiene solo elementi di tipo raster al suo interno, e ancora una serie di classi definite nella super classe DisplayObjectContainer, che comprende tutte le classi di tipo DisplayObject, che possono contenere degli elementi particolari al proprio interno, come ad esempio la classe Sprite (in pratica un MovieClip senza timeline) o la classe Loader, che prendiamo in considerazione in questo articolo.

Per utilizzare la classe Loader, è necessario istanziarne un oggetto via actionscript utilizzando il semplice new, dopo di chè è possibile gestire il ciclo di vita del caricamento utilizzando il modello ad eventi, come già visto in quest'altro articolo, e per finire si può lanciare il caricamento utilizzando il metodo Loader.load(request:URLRequest), passando come parametro un nuovo oggetto di tipo URLRequest, che in AS3 si occupa di gestire tutti gli URL per i caricamenti esterni, aggiungendo funzioni particolari che non tratteremo comunque in questo articolo.

L'unica cosa di cui bisogna fare attenzione, utilizzando la classe Loader(), è quando le si assegnano i listener attraverso il metodo addEventListener(type:String, listener:Function); infatti la classe Loader non può accettare direttamente i listener, ma si deve servire della classe LoaderInfo() che viene utilizzata da AS per raccogliere tutte le informazioni relative al caricamento esterno, compreso ad esempio il progresso di caricamento o le dimensioni dell'oggetto caricato. La classe LoaderInfo può essere richiamata in "istanza" direttamente dall'istanza del Loader, attraverso la proprietà contentLoaderInfo.

Ricapitoliamo con un esempio commentato:

// creo un nuovo oggetto di tipo URLRequest e gli passo come parametro l'url del file esterno da caricare
var request:URLRequest = new URLRequest("miofile_esterno.swf");
// istanzio un nuovo oggetto della classe Loader
var loader:Loader = new Loader();
// aggancio all'istanza un listener che verifica quando il caricamento è avvenuto e richiama la funzione associata
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
// inizializzo la funzione completeHandler, che verrà richiamata quando il contenuto esterno è caricato completamente
function completeHandler(event:Event){
	trace("Caricamento completato!");
}
// richiamo il metodo load, che decreta l'avvio del caricamento esterno
loader.load(request);
// aggiungo l'oggetto Loader creato, allo stage, attraverso il metodo addChild()
addChild(loader);

Per la classe Loader è possibile monitorare i seguenti eventi:

Trovate un esempio completo a questo indirizzo -> ./classes/as3_loader.zip.

Inoltre, per completezza, ne riporto il codice sull'articolo

// inizializzo una variabile di tipo stringa che contenga il nome del file da caricare
var filename:String = "image.jpg";
// inizializzo una richiesta url esterna, tramite la classe URLRequest e gli passo il nome del file da caricare
var request:URLRequest = new URLRequest(filename);
// inizializzo un'istanza del DisplayObjectContainer, di tipo Loader()
var loader:Loader = new Loader();
// inizializzo un'istanza di LoaderInfo per assegnargli i listener corrispondenti alle azioni
var infoloader:LoaderInfo = loader.contentLoaderInfo;
// aggancio le azioni ad ogni evento per monitorare il caricamento
infoloader.addEventListener(Event.COMPLETE, completeHandler);
infoloader.addEventListener(HTTPStatusEvent.HTTP_STATUS, httpStatusHandler);
infoloader.addEventListener(Event.INIT, initHandler);
infoloader.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
infoloader.addEventListener(Event.OPEN, openHandler);
infoloader.addEventListener(ProgressEvent.PROGRESS, progressHandler);
// inizializzo le funzioni corrispondenti agli eventi da verificare per la classe Loader
function completeHandler(event:Event) {
	trace("Caricamento completato, è possibile effettuare azioni sul file appena caricato!");
}
function httpStatusHandler(event:HTTPStatusEvent) {
	trace("Ricevuto stato http "+event.status);
}
function initHandler(event:Event) {
	trace("File esterno inizializzato, è adesso possibile richiamare le azioni contenute nel file esterno!");
}
function ioErrorHandler(event:IOErrorEvent) {
	trace("Errore durante il caricamento del file");
}
function openHandler(event:Event) {
	trace("Caricamento inizializzato, attendere il completamento!");
}
function progressHandler(event:ProgressEvent) {
	var percentual:int = (event.bytesLoaded/event.bytesTotal)*100;
	trace("Caricamento di "+percentual+"%");
}
// richiamo il metodo Loader.load(request:URLRequest), per iniziare il caricamento esterno
// e gli passo come parametro, la richiesta url inizializzata in precedenza
loader.load(request);
// inserisco il Loader() nella "display list" dello stage corrente
addChild(loader);

Una ultima cosa, probabilmente ovvia, ma che preferisco ugualmente annotare: per caricamenti semplici, senza necessità particolari, non è necessario effettuare tutta la pappardella con i listener, è sufficiente creare un oggetto Loader(), attivare il caricamento e inserirlo sullo stage con il codice semplificato:

var l:Loader = new Loader();
l.load(new URLRequest("image.jpg"));
addChild(l);

Come al solito, spero che l'articolo sia abbastanza esemplificativo del modo di agire e saluto alla prossima!