Caricamento sincrono e asincrono di SWF esterni con AS3

È sempre utile poter caricare dei file .swf esterni in modo da non rendere il movie Flash principale troppo pesante. In questo modo si può ad esempio creare un movie Flash principale contenente i link alle varie sezioni del sito, sezioni che però saranno create esternamente come file .swf importabili. In questo articolo vedremo le tecniche fondamentali per:

• caricare .swf esterni in modo sincrono e asincrono
• creare il preload dei file esterni
• gestire lo scambio di variabili tra swf importati e movie principale

Caricamento sincrono vs. caricamento asincrono

Come abbiamo accennato, un swf esterno può essere caricato in due modi: asincrono e sincrono. Esaminiamo queste due modalità.

Il caricamento asincrono prevede che, una volta lanciato il processo di loading, il flusso del programma continui senza tener conto del suo avanzamento: solo quando il file è completamente caricato, il processo di loading lo segnala e il filmato può essere mandato in esecuzione.

Quindi, non potendo valutare il tempo di caricamento, l’esecuzione del filmato sarà asincrona rispetto al codice del movie Flash principale. La gestione asincrona avviene quindi tramite un listener di eventi.

Il caricamento sincrono invece avviene in diretta sequenza di codice, senza utilizzare un listener di eventi di caricamento.

Nel caso si debbano caricare dei semplici .swf, come piccole animazioni o grafica, la differenza non si noterà. Diverso è il caso in cui si voglia passare delle variabili tra i due swf; in questo caso l’swf secondario deve essere interamente caricato per poter ricevere informazioni. La stessa cosa funziona ad esempio con i file XML. Si consiglia comunque di utilizzare sempre un caricamento asincrono per una migliore gestione dei contenuti.

Caricamento sincrono

Per caricare un swf in modo sincrono bisogna creare per prima cosa un oggetto Loader:

var loader= new Loader();

Si crea poi un oggetto per richiedere l’URL:

var req=new URLRequest(“fileSecondario.swf”);

Dopodiché si associa l’URL all’oggetto Loader:

loader.load(req);

In questo modo il file esterno viene caricato dentro l’oggetto Loader. Non ci resta che renderlo visibile inserendola sulla scena del nostro swf principale:

addChild(loader);

In questo modo l’oggetto viene caricato sullo stage principale con posizione x=0 e y=0.

Caricamento asincrono

Per quanto riguarda il caricamento asincrono, le prime tre fasi rimangono le stesse e cioè: la creazione di un oggetto Loader, la richiesta dell’URL e l’associazione tra i due oggetti:

var loader= new Loader();
var req=new URLRequest(“fileSecondario.swf”);
loader.load(req);

A questo punto, però, viene aggiunto un evento Listener sul caricamento del file:

loader.ContentLoaderInfo.addEventListener(Event.COMPLETE, fnCompleto);

Andiamo ad analizzare questa riga di codice.

L’evento è naturalmente assegnato all’oggetto loader, il quale si occupa materialmente del caricamento del file esterno. Le istruzioni e le informazioni sul caricamento vengono però richieste non direttamente all’oggetto Loader ma attraverso la proprietà ContentLoaderInfo. Essa serve per estrapolare tutti i dati relativi al caricamento del file(servirà anche più tardi per il preload).

A quest’ultima viene quindi assegnato un Listener (un’evento che rimane in “ascolto” finché non avviene l’evento indicato di seguito). L’evento in questione è COMPLETE. Quindi, quando il caricamento è completo, viene richiamata la funzione scritta come secondo parametro dell’evento(fnCompleto).

La funzione richiamata contiene naturalmente l’azione di inserimento del contenuto sullo stage del file principale:

function fnCompleto(e:Event){
  addChild(e.target.content);
}

Naturalmente, come valore si fa riferimento, tramite la variabile e , all’oggetto a cui era associato l’evento Listener, e cioè l’oggetto loader. Anche in questo caso il file viene caricato sullo stage con posizione x=0 e y=0.

Obiettivamente serve più codice per gestire un caricamento in modo asincrono, ma è sicuramente il metodo più sicuro, più funzionale e più corretto.

Creazione di un preload di SWF esterni

Per creare un semplice preload di un file esterno è sufficiente creare un nuovo Listener relativo all’oggetto Loader:

l.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,fnProgress);

In questo caso però, l’evento richiamato è PROGRESS. Esso viene richiamato ogni tot millisecondi, in modo che si possa gestire agilmente la classica percentuale di caricamento. Nella funzione richiamata dall’evento serve una semplice formula per avere la percentuale di caricamento:

function fnProgress(e:ProgressEvent){	
  var percent = Math.floor((e.target.bytesLoaded / e.target.bytesTotal)*100);
}

Analizziamo la riga di codice.

Viene creata una variabile percent che conterrà la percentuale. La funzione Math.floor serve per arrotondare la cifra, poiché quella generata dal calcolo è molto precisa e quindi con una quantità di numeri dopo la virgola molto elevata.

Il calcolo viene fatto sull’oggetto che viene caricato (e.target) dividendo i byte caricati per i byte totali ottenendo la percentuale già caricata. Questo numero deve essere però moltiplicato per 100 per ottenere la classica percentuale in 100esimi, poiché Flash genera la percentuale da 0 a 1 e non da 0 a 100. In questo modo nella variabile percent abbiamo il nostro valore. Non ci resta che creare un testo dinamico sullo stage e assegnarli il valore che abbiamo ottenuto in questo semplice modo:

function fnProgress(e:ProgressEvent){ 	
var percent:Number = Math.floor((e.target.bytesLoaded / e.target.bytesTotal)*100);

testo_txt.text=percent;
}

Passaggio di variabili tra SWF

Una delle più utili funzioni di AS3 è la possibilità di passare variabili e MovieClip tra swf diversi. L’esempio che qui vedremo si riferisce a due swf,di cui uno è importato con ActionScript nell’altro.

Creiamo quindi due file diversi e li chiamiamo padre.fla e figlio.fla.

Nel documento padre inseriamo una label di riconoscimento del file e un pulsante per caricare l’swf esterno. Nel documento figlio creiamo una figura colorata, una label di riconoscimento, un pulsante di cancellazione e una testo dinamico.

Figura 1

Figura 2

Per prima cosa importiamo l’swf esterno all’interno di quello principale. Usiamo lo stesso metodo, ma in questo caso è utile creare un MovieClip contenitore per facilitare poi l’utilizzo delle variabili che verranno fatte in seguito.

Creiamo quindi un MovieClip che conterrà l’swf importato:

var cont_mc=new MovieClip();
addChild(cont_mc);

Definiamo le proprietà del nostro bottone che si chiama carica_mc:

carica_mc.buttonMode=true;
carica_mc.addEventListener(MouseEvent.MOUSE_DOWN,fnCarica);

function fnCarica(e) {
	var l=new Loader();
	l.load(new URLRequest("figlio.swf"));
	cont_mc.addChild(l); 
}

Passaggio di variabili

Impostiamo ora il passaggio di variabili dall’swf interno a quello esterno. Nel documento padre.fla creiamo semplicemente una variabile e assegniamo ad essa un valore.

var nome;
nome = “Mario Rossi”;

Nel .fla che invece verrà importato(figlio.fla) inseriamo queste due semplici righe di codice:

var variabile=this.parent.root['nome'];
testo_txt.text+= variabile;

Come si vede dal codice, creiamo una nuova variabile generica e assegniamo ad essa il valore della variabile nome appartenente al file principale.

La sintassi funziona in questo modo:

• this: indica il .fla che viene caricato.
• parent: indica il file principale in cui viene importato l’swf secondario.
• root: serve per accedere al codice scritto all’interno del file principale.
• ['nome']: tra parentesi quadre e virgolette il nome della variabile che vogliamo recuperare.

Nella seconda riga di codice il contenuto della variabile viene inserito in un testo dinamico per riuscire a visualizzarlo e testare il corretto funzionamento dell’azione. Abbiamo utilizzato questo metodo per il passaggio di una variabile stringa molto semplice. Lo stesso metodo può essere usato per azioni più complesse poichè si ha anche la possibilità di inviare e comandare elementi come i MovieClip.

Cancellazione del MovieClip importato

Allo stesso modo in cui abbiamo importato la variabile, questa volta importiamo un MovieClip.

var cont=new MovieClip();
cont=this.parent.root['cont_mc'];

Questa volta, però, è indispensabile specificare che la variabile che riceve il contenuto è un MovieClip e non una variabile generica. Andiamo quindi a scrivere la parte di codice riguardante il pulsante cancella_mc del nostro swf secondario:

cancella_mc.buttonMode=true;
cancella_mc.addEventListener(MouseEvent.MOUSE_DOWN,fnCancella);
function fnCancella(e){
	cont.removeChildAt(0);
}

All’interno della funzione fnCancella utilizziamo la variabile cont, creata in precedenza, per impartire un comando al MovieClip appartenente al file principale. Il comando è un semplice removeChildAt() in posizione 0(zero) poiché è importato un solo swf. Così facendo l’swf importato verrà cancellato tramite un pulsante proprio, ma agendo su componenti del file principale.

Utilizzando questo metodo si possono così utilizzare variabili e MovieClip in modo dinamico da swf diversi, importati uno dentro l’altro.

Rimane un’applicazione utile nel caso si debba creare dei contenuti altamente dinamici, ad esempio nel caso in cui si abbia un file principale che contiene un menu e un file secondario esterno in cui vengono caricati i contenuti in modo dinamico. In questo modo si può inviare al file secondario una variabile che indica quali contenuti vanno caricati nel secondo file.