Buon giorno a tutti i flashers.
Dato che a qualcuno di voi è sembrato troppo complesso il codice dei 2 articoli in cui spiego
come caricare un swf esterno o come
creare un preloader ho deciso di scrivere questo articolo.
Qualche giorno fa mi è arrivata una e-mail di un utente che spiegava le sue difficoltà nel migrare dal metodo ( che è stato rimosso ) loadMovieNum ad Actionscript 3.0 .
In un punto, l' utente afferma: "
Io realizzo dei siti in flash assemblando, e sfruttando, soprattutto esempi che scarico e che poi riadatto alle mie esigenze .
Di conseguenza mi trovo spiazzato sul codice ( poikè sono un neofita di action script 2 ? figuriamoci il 3 ).
Un loadmovieNUm adesso diventa un problema visto che usavo la stessa tecnica, semplicissima , x tutte le realizzazioni in flash.
In pratica mi creavo una struttura che di volta in volta , tramite il caricamento del loadMovieNum ,azionato da un frame o un pulsante, mi caricava, appunto, tutte le pagine ".
Questo articolo vuole essere un tutorial per tutti quei ' flashers ' che si trovano nelle stesse condizioni.
Ho creato un mini sito con 5 sezioni + homepage e pagina d' ingresso. Il tutto caricando swf esterni ( uno per sezione ).
Seguitemi e vedrete...
Creo un FLA che salvo con nome ' main.fla ' , che sarà l' swf principale del sito.
Aggiungo un fotogramma chiave.
Al suo interno ho creato una pulsantiera , dei pulsanti all' interno di una MovieClip che sarà il menu del sito.
Ho creato inoltre un bottone chiamato ' home_btn ' che sarà il bottone per ritornare alla homepage del sito.
Una MovieClip di ingresso con un logo ed un bottone ENTRA.
Una MovieClip con nome istanza ' preloader_mc ' che funge da preloader per ogni swf esterno che caricherò.
Ogni MovieClip deve essere presente in entrambi i fotogrammi chiave. Questo perchè se così non fosse, e liavremmo solo su un fotogramma, quando cercheremo di richiamarli dalla Document Class Flash ci direbbe che non esistono. Quando creiamo una MovieClip su un fotogramma chiave, Flash la memorizza come variabile locale, quindi al successivo fotogramma chiave se noi togliamo la MovieClip Flash la cancella e ne libera la memoria.
Creo la Document Class, un file AS che salvo con nome ' Main.as ', implementata in questo modo:
Code:
package
{
import flash.display.MovieClip;
import flash.display.SimpleButton;
import flash.display.Loader;
import flash.net.URLRequest;
import flash.events.*;
public class Main extends MovieClip
{
private var sezioni_array:Array;
private var bottoni_sezioni_array:Array;
private var loader:Loader;
private var swf:String;
private var id:int=0;
public function Main()
{
init();
}
private function init():void
{
stop();
stage.frameRate=31;
home_btn.visible=false;
menu_mc.visible=false;
preloader_mc.visible=false;
preloader_mc.fill_mc.width=0;
sezioni_array=new Array('http://www.flepstudio.org/swf/sito_tutorial/sezioni/home.swf',
'http://www.flepstudio.org/swf/sito_tutorial/sezioni/sezione1.swf',
'http://www.flepstudio.org/swf/sito_tutorial/sezioni/sezione2.swf',
'http://www.flepstudio.org/swf/sito_tutorial/sezioni/sezione3.swf',
'http://www.flepstudio.org/swf/sito_tutorial/sezioni/sezione4.swf',
'http://www.flepstudio.org/swf/sito_tutorial/sezioni/sezione5.swf');
bottoni_sezioni_array=new Array(menu_mc.sezione_1_mc,menu_mc.sezione_2_mc,
menu_mc.sezione_3_mc,menu_mc.sezione_4_mc,
menu_mc.sezione_5_mc);
aggiungiListenerEntra();
aggiungiListenerTornaHome();
aggiungiListenerMenu();
}
private function aggiungiListenerEntra():void
{
logo_mc.entra_mc.buttonMode=true;
logo_mc.entra_mc.addEventListener(MouseEvent.MOUSE_DOWN,entra);
}
private function aggiungiListenerTornaHome():void
{
home_btn.addEventListener(MouseEvent.MOUSE_DOWN,tornaHome);
}
private function aggiungiListenerMenu():void
{
for(var i:int=0;i < bottoni_sezioni_array.length;i++)
{
bottoni_sezioni_array[i].id=i;
bottoni_sezioni_array[i].addEventListener(MouseEvent.MOUSE_DOWN,cambiaSezione);
}
}
private function entra(m:MouseEvent):void
{
this.gotoAndStop(2);
caricaHome();
}
private function tornaHome(m:MouseEvent):void
{
id=0;
loader.unload();
removeChild(loader);
rimuoviListeners(loader.contentLoaderInfo);
caricaHome();
}
private function caricaHome():void
{
swf=sezioni_array[0];
var request:URLRequest=new URLRequest(swf);
loader=new Loader();
initListeners(loader.contentLoaderInfo);
loader.load(request);
id=0;
}
private function cambiaSezione(m:MouseEvent):void
{
id=m.target.parent.id+1;
loader.unload();
removeChild(loader);
rimuoviListeners(loader.contentLoaderInfo);
caricaSezione(m.target.parent.id+1);
}
private function caricaSezione(n:int):void
{
swf=sezioni_array[id];
var request:URLRequest=new URLRequest(swf);
loader=new Loader();
initListeners(loader.contentLoaderInfo);
loader.load(request);
}
private function initListeners(dispatcher:IEventDispatcher):void
{
dispatcher.addEventListener(Event.OPEN,inizia);
dispatcher.addEventListener(ProgressEvent.PROGRESS,inCaricamento);
dispatcher.addEventListener(Event.COMPLETE,completato);
}
private function rimuoviListeners(dispatcher:IEventDispatcher):void
{
dispatcher.removeEventListener(Event.OPEN,inizia);
dispatcher.removeEventListener(ProgressEvent.PROGRESS,inCaricamento);
dispatcher.removeEventListener(Event.COMPLETE,completato);
}
private function inizia(event:Event):void
{
menu_mc.visible=false;
preloader_mc.visible=true;
}
private function inCaricamento(event:ProgressEvent):void
{
var n:uint=(event.bytesLoaded/event.bytesTotal)*100;
preloader_mc.fill_mc.width=n;
}
private function completato(event:Event):void
{
addChild(loader);
swappa();
preloader_mc.visible=false;
if(id!=0)
home_btn.visible=true;
else
home_btn.visible=false;
menu_mc.visible=true;
}
private function swappa():void
{
swapChildren(loader,menu_mc);
swapChildren(home_btn,loader);
}
}
}
Questi sono i 6 swf esterni:
Ed ecco il sito:
Analizziamo il codice.
Proprietà:
un Array in cui inserisco gli url di dove si trovano gli swf da caricare
private var sezioni_array:Array;
un Array in cui inserisco i nomi delle MovieClips del menu
private var bottoni_sezioni_array:Array;
un' istanza della classe Loader
private var loader:Loader;
una variabile di tipo stringa che conterrà l'url dell' swf da caricare ( tra quelli compresi nell' array sezioni_array )
private var swf:String;
una variabile numerica che conterrà l' id di sezione da caricare ( per risalire all' indice giusto dell' arry sezioni_array )
private var id:int=0;
Metodi:
init();
ferma la timeline sul primo fotogramma
stop();
imposto il valore del frame rate
stage.frameRate=31;
imposto tutti i bottoni ed il preloader come invisibili
home_btn.visible=false;
menu_mc.visible=false;
preloader_mc.visible=false;
dico alla MovieClip ' fill_mc ' che si trova all' interno di preloader_mc di avere la larghezza pari a zero
preloader_mc.fill_mc.width=0;
popolo l' array delle sezioni con gli url di ogni swf esterno da caricare
sezioni_array=new Array('http://www.flepstudio.org/swf/sito_tutorial/sezioni/home.swf',
'http://www.flepstudio.org/swf/sito_tutorial/sezioni/sezione1.swf',
'http://www.flepstudio.org/swf/sito_tutorial/sezioni/sezione2.swf',
'http://www.flepstudio.org/swf/sito_tutorial/sezioni/sezione3.swf',
'http://www.flepstudio.org/swf/sito_tutorial/sezioni/sezione4.swf',
'http://www.flepstudio.org/swf/sito_tutorial/sezioni/sezione5.swf');
popolo l' array dei bottoni del menu con i nomi diogni MovieClip che si trova all' interno di menu_mc
bottoni_sezioni_array=new Array(menu_mc.sezione_1_mc,menu_mc.sezione_2_mc,
menu_mc.sezione_3_mc,menu_mc.sezione_4_mc,
menu_mc.sezione_5_mc);
chiamo i metodi che aggiungeranno i listeners necessari
aggiungiListenerEntra();
aggiungiListenerTornaHome();
aggiungiListenerMenu();
aggiungiListenerEntra();
dico ad entra_mc di fare vedere la manina del mouse quando l' utente gli va sopra
logo_mc.entra_mc.buttonMode=true;
aggiungo un listener sul click di entra_mc che chiamerà la funzione entra();
logo_mc.entra_mc.addEventListener(MouseEvent.MOUSE _DOWN,entra);
aggiungiListenerTornaHome();
aggiungo un listener sul click di home_btn che chiamerà la funzione tornaHome();
home_btn.addEventListener(MouseEvent.MOUSE_DOWN,to rnaHome);
aggiungiListenerMenu();
aggiungo un listener per ogni bottone del menu utilizzando un ciclo
for(var i:int=0;i < bottoni_sezioni_array.length;i++)
{
quì assegno una proprietà in runtime ad ogni MovieClip all' interno di menu_mc in modo da poter impostare laproprietà id con l' id rispettivo della sezione da caricare
bottoni_sezioni_array[i].id=i;
bottoni_sezioni_array[i].addEventListener(MouseEvent.MOUSE_DOWN,cambiaSezi one);
}
entra();
sposto la timeline sul fotogramma 2
this.gotoAndStop(2);
chiamo la funzione caricaHome()
caricaHome();
caricaHome();
assegno alla proprietà swf ( stringa ) il valore del primo indice dell' array sezioni_array ( che contiene l' url di home.swf )
swf=sezioni_array[0];
istanzio la classe URLRequest
var request:URLRequest=new URLRequest(swf);
istanzio un nuovo Loader
loader=new Loader();
chiamo la funzione initListeners che aggiungerà i listeners necessari per monitorare ogni fare del caricamento passandogli il valore della proprietà contentLoaderInfo di loader
initListeners(loader.contentLoaderInfo);
carico l' swf
loader.load(request);
assegno la proprietà id pari a zero
id=0;
tornaHome();
assegno il valore zero alla proprietà id
id=0;
scarico il contenuto del Loader
loader.unload();
rimuovo il Loader dal DisplayObject
removeChild(loader);
chiamo la funzione rimuoviListeners che rimuove tutti i listeners in ascolto di Loader
rimuoviListeners(loader.contentLoaderInfo);
chiamo la funzione caricaHome
caricaHome();
cambiaSezione();
imposto il valore della proprietà id uguale all' id della MovieClip del menu cliccata
id=m.target.parent.id+1;
scarico il contenuto di Loader
loader.unload();
rimuovo il Loader dal DisplayObject
removeChild(loader);
chiamo la funzione rimuoviListeners che rimuove tutti i listeners in ascolto di Loader
rimuoviListeners(loader.contentLoaderInfo);
chiamo la funzione caricaSezione() passandogli l' id della MovieClip del menu cliccata in modo che caricherà l' swf dell' indice corretto di sezioni_array
caricaSezione(m.target.parent.id+1);
caricaSezione(n:int);
assegno alla proprietà swf ( stringa ) il valore dell' indice dell' array sezioni_array ( indice con numero uguale all' id della MovieClipcliccata di menu_mc che viene passato dalla funzione cambiaSezione )
swf=sezioni_array[id];
istanzio la classe URLRequest
var request:URLRequest=new URLRequest(swf);
istanzio un nuovo Loader
loader=new Loader();
chiamo la funzione initListeners che aggiungerà i listeners necessari per monitorare ogni fare del caricamento passandogli il valore della proprietà contentLoaderInfo di loader
initListeners(loader.contentLoaderInfo);
carico l' swf
loader.load(request);
initListeners();
aggiungo i listeners necessari per monitorare le tre fasi principali del caricamento dell' swf esterno
dispatcher.addEventListener(Event.OPEN,inizia);
dispatcher.addEventListener(ProgressEvent.PROGRESS ,inCaricamento);
dispatcher.addEventListener(Event.COMPLETE,complet ato);
rimuoviListeners();
rimuovo i listeners in ascolto su Loader
dispatcher.removeEventListener(Event.OPEN,inizia);
dispatcher.removeEventListener(ProgressEvent.PROGR ESS,inCaricamento);
dispatcher.removeEventListener(Event.COMPLETE,comp letato);
inizia();
il codice di questa funzione viene eseguito da Flash ogni volta che parte il caricamento di un swf esterno
imposto il menu a invisibile
menu_mc.visible=false;
imposto il preloader a visibile
preloader_mc.visible=true;
inCaricamento();
il codice di questa funzione viene eseguito da Flash ogni volta che un swf è in fase di caricamento e quindi posso monitorare i bytes caricati ed avvisare l' utente
var n:uint=(event.bytesLoaded/event.bytesTotal)*100;
assegno alla larghezza del width di fill_mc ( che si trova all' interno di preloader_mc ) il valore della variabile n
preloader_mc.fill_mc.width=n;
completato();
il codice di questa funzione viene eseguito da Flash ogni volta che un swf è stato completamente caricato
aggiungo il loader ( che contiene l' swf caricato che ora è una MovieClip ) al DisplyObject ( altrimenti non sarebbe visibile )
addChild(loader);
chiamo la funzione swappa() che cambierà le profondità di loader, menu e home_btn o altrimenti, dato che loader è stato caricato per ultimo, non si vedrebbe la pulsantiera
swappa();
imposto preloader_mc ad invisibile
preloader_mc.visible=false;
se la proprietà id è uguale a zero imposto home_btn visibile
if(id!=0)
home_btn.visible=true;
altrimenti imposto home_btn invisibile
else
home_btn.visible=false;
imposto sempre il menu visibile
menu_mc.visible=true;
swappa();
scambio la profondità di loader ( che in questo momento è la più alta ) con la profondità di menu_mc
swapChildren(loader,menu_mc);
scambio la profondità di home_btn ( che si trova sotto loader ) appunto con loader
swapChildren(home_btn,loader);
NB: Per aggiungere delle sezioni:
- aggiungere un url all' swf della sezione nell' array sezioni_array
- creare l' swf della nuova sezione
- aggiungere un bottone dentro menu_mc esattamente come sono stati aggiunti quelli già esistenti
Allego i files sorgente: