Creare un sito caricando SWF esterni con Flash CS3

[Flep]

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:

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:

[Flep]

Ho aggiunto l' effetto anche in uscita tra una sezione e l' altra.
I nuovi files sono in allegato:

[zizzolo]

Ciao Flep.
Stò impazzendo!

Stò facendo delle prove con questo tuo tutorial: sostituisco, provo, aggiungo... per farmi un pò le ossa e girarci intorno.
C'è una cosa che non riesco a capire e che mi stà mandando nei matti e forse te sai già la spiegazione:

ho sostituito il menu_mc con uno fatto da me provando ad aggiungere sul main.fla un pò di cosette: uno sfondo per il menu, il menu che stà fuori dello stage e che premeno un pulsante entra... insomma un pò di abbelimenti grafici al concetto . frame1 == frame2

il problema è questo:
il menu che ho creato è un movieclip con al suo interni altri MC che a loro volta hanno dentro MC e non Button come hai fatto te (ma nel mio cervello questo mi dice che non dovrebbe cambiare nulla, sbaglio?)

Ho dato al menu che riunisce tutti pulsanti il nome menu_mc e ai MC che costituiscono i pulsanti ho inserito il nome istanza sezione_1_mc, sezione_2_mc, sezione_3_mc.

Ho corretto gli array inserendo solo 4 swf (il primo è la home) e 3 pulsanti;

Ho inserito il pulsante home dentro a menu_mc, ho cambiato nel .as i riferimenti a lui in menu_mc.home.btn e ho eliminato dallo swap() la riga che comprendeva anche la home, dato che non avevo bisogno di swapparla perchè stava dentro al menu;

Tutto funziona! nessun errore! il problema? IL PULSANTE SEZIONE_2_MC MI RIPORTA ALL HOME!!! Ho provato ogni variazione! Ho provato a codice variato come ti ho detto a levare il mio menu e a rinserire il tuo mosdificato con la home all'interno!, TUTTO FUNZIONA!!! cambio il nome al tuo menu e assegno menu_mc al mio e da ancora il problema!!!, ho controllato e ricontrollato nomi dei pulsanti ma niente da fare: con il tuo va ben, con il mio no!
Perchè, che cosa mi sfugge?

[Flep]

Ciao zizzolo,
è difficile da dirsi senza vedere i files.

Questo è una caso in cui dovresti allegarli e gli do un' occhiata.

[zizzolo]

Grazie della tua disponibilità Flep!
Ho trovato la soluzione!!! Incredibile (per me forse per te è più chiaro): il MC del pulsante che mi dava difficoltà era costituito da piccoli movieclip al suo interno e ho scoperto, facendoci caso, che a deconda della parte dell'immagine dove cliccavo mi mandava o sulla home oppure sulla sezione2 dove doveva andare!!!
Ti mando la Main.as modificata e il menù per il quale avevo usato dei MC creati tempo fa[ATTACH]Attachment 129[/ATTACH]

Come potrai verificare se clicchi sulla foglia carica un l'MC l'id2 dell'array mentre se clicchi sull'oliva ti manda sull'MC0


Flep... non sono ancora molto bravo su gli IEventDispatcher... come bisogna modificare in caso i preload siano direttamente sui singoli swf?

[zizzolo]

main4.zip

[zizzolo]

Trovato!
In effetti è stato semplice correggimi se sbaglio: basta escludere il listener, levare gli argomenti a completato() e richiamarla direttamente.
Main.as

comunque quella del pulsante è stata davvero micidiale!!!

Avvolte basta solo la tua attenzione per risolvere le mie incertezze mio nobile AS3-Guru!

[Flep]

Trovato!
In effetti è stato semplice correggimi se sbaglio: basta escludere il listener, levare gli argomenti a completato() e richiamarla direttamente.

Esatto !

[zizzolo]

Quando hai due minute Flep puoi dare un'occhiata quel discorso del pulsante con duplice assegnazione per favore, vorrei capire come mai 2 MC aniidati in uno stesso Mc si prendevano 2 id deiversi dell'array...

Buona notte

[Flep]

Ho provato e al click dei bottoni mi fa un trace esatto del proprio id.