[PILLOLA] Introduzione ed utilizzo di MovieClipLoader [MX 2004]

[andr3a]

Prefazione
non passo da queste parti da parecchio ma quando mi sono accorto di questa novita' ho pensato fosse importante provare a descrivervela e spiegarvela come meglio posso ...
Spero non sia un argomento gia' affrontato e spero che verra' messo in archivio come una delle tante pillole che piano piano la gente di AS di questa comunita' comincera' a fare come e' per il forum di PHP.
A parte raffaeu che si e' creato la sua rubrica per la quale non smettero' mai di ringraziare, mi sembra che gli altri, tralaltro molto capaci, potrebbero darsi un pelino piu' da fare [ me compreso si intende ]
Ora basta con le caXXate e passiamo alla pillola, sono graditi commenti e osservazioni, potrei aver scritto parecchi sfrondoni


Introduzione ed utilizzo di MovieClipLoader
andr3a 24/11/2003

Il MovieClipLoader e' un importante metodo della super classe MovieClip che ci permette di monitorizzzare in modo completo gli eventi di caricamento esterno, inteso come SWF o JPG.
Se in FlashMX infatti dovevamo organizzare manualmente il debug dei nostri MovieClip.loadMovie(); o dei nostri loadMovieNums(); ora abbiamo a disposizione questo metodo dedicato e potente che ha il vantaggio di:

• essere un metodo dedicato e quindi piu' preciso e/o affidabile
• evitare di incontrare problemi di debug creati da noi stessi
• informarci di eventuali problemi riscontrati

Come posso utilizare questo metodo ?
La sintassi base per istanziare il MovieClipLoader e' identica a tutte le altre:

var myLoadedMovie:MovieClipLoader = new MovieClipLoader();
// personalmente mi sto abituando ad utilizzare questo tipo di sintassi in MX 2004
// soprattutto per l' utilizzo di AS2.0 in gestione classi, ma non e' comunque errato
// abituarsi anche in stage [ opinabile ]

Abbiamo appena dichiarato una variabile di tipo MovieClipLoader che automaticamente avra' a sua disposizione dei metodi propri:

• MovieClipLoader.addListener();
• MovieClipLoader.getProgress();
• MovieClipLoader.loadClip();
• MovieClipLoader.removeListener();
• MovieClipLoader.unloadClip();

Questi metodi sono gli stessi che utilizzeremo per monitorizzare lo stato dei nostri load, che in questa versione saranno dei loadClip(); .


Ora vediamo nel dettaglio i metodi.


MovieClipLoader.addListener();
il primo, il piu' importante, quello che autorizzera' il nostro listner ad interagire con lo stato del nostro MovieClipLoader.
In pratica tramite la creazione di un Oggetto e l'assegnazine di eventi dedicati a quest'oggetto stesso, possiamo dare inizio alla realizzazione del nostro caricamento monitorizzato.

var MovieListner:Object = new Object();

Abbiamo appena creato il gestore eventi, che altro non dovra' contenere se non la serie di eventi dedicati per questa occasione che sono:

• MovieClipLoader.onLoadComplete();
• MovieClipLoader.onLoadError();
• MovieClipLoader.onLoadInit();
• MovieClipLoader.onLoadProgress();
• MovieClipLoader.onLoadStart();

Vediamo ora in sequenza di utilizzo questa serie di eventi dedicati.

onLoadStart();
Questo evento viene automaticamente invocato appena inizia il download o il caricamento del nostro file SWF o JPG specificato in loadClip();
E' di fatto l' antitesi di onLoadError(); e ci assicura che il file specificato e' stato trovato e che il download non ha avuto problemi a partire.

Esempio:
MovieListner.onLoadStart = function (target_mc)  {
	trace("Caricamento di " + target_mc + " avviato con successo.");
	// target_mc e' un valore statico con un nome a piacere e presente in tutti i gestori
	// non e' obbligatorio l' utilizzo
	// ma puo' restituirci in ogni momento il nome
	// del nostro caricante.
}

onLoadProgress();
Questo evento monitorizza lo stato di avanzamento ed e' automaticamente invocato ogni qualvolta esistono cambiamenti di contenuti nel totale caricato e/o totale disponibile.

Esempio:
MovieListner.onLoadProgress = function (target_mc, loadedBytes, totalBytes)  {
	trace("bytes caricati: " + loadedBytes);
	trace("bytes totali: " + totalBytes);
	// loadedBytes e totalBytes prendono il posto di
	// movieClip.getBytesLoaded(); e movieClip.getBytesTotal();
}

onLoadComplete();
Questo evento verra' invocato automaticamente a caricamento avvenuto o piu' precisamente a fine download.
Fate attenziopne sul fatto che non e' il vero e proprio stato di utilizzo del nostro nuovo SWF o JPG caricato, bensi' la conferma di fine utilizzo banda.
[ in realta' e' un po' piu' complicato da spiegare ma potrebbe dare problemi se utilizzato come tale ]

Esempio:
MovieListner.onLoadComplete = function (target_mc) {
	trace("Il -- DOWNLOAD -- del file e' appena terminato");
}

onLoadInit();
Ed ecco qui , invece, il vero inizializzatore del nostro movieClip o livello caricato, la conferma ufficiale che se apportiamo modifiche a quanto caricato, questo le accetti perche' realmente esistente e presente nel livello o nel movie caricante.

Esempio:
MovieListner.onLoadInit = function (target_mc) {
	target_mc._alpha = 20;
	target_mc._x = Stage.width - target_mc._width;
	target_mc._y = 10;
	trace(target_mc + " e' disponibile ed e' stato nizializzato!!!");
}

In fine dobbiamo anche prendere in considerazione che potrebbero esserci problemi durante il download o che il percorso del file potrebbe essere errato.
Ed ecco l' evento dedicato con tanto di codice di errore.
onLoadError();
Come dice il nome e' l'evento che verra' invocato se fallira' l' onLoadStart() e che ci dira' tramite la statica errorCode quale e' stato il problema in caricamento.

Esempio:
MovieListner.onLoadError = function (target_mc, errorCode) {
	trace("Impossibile caricare questo file: " + target_mc);
	trace("[ " + errorCode + " ]");
}

Se questi sono eventi dedicati per il listner, non dimentichiamoci che il MovieClipLoader ha comunque un metodo dedicato ed utilizzabile anche all' interno del listner che e' il
MovieClipLoader.getProgress();
Questo metodo ci restituisce il totale bytes caricati e totali di files compressi.
A dire il vero non ho avuto modo di testare a findo questo tipo di oggetto ma sappiate che puo' essere tranquillamente inserito all' interno di onLoadStart o meglio ancora in aggiunta ad onLoadProgress.

Esempio:
var loadProgress:Object = new Object(myLoadedMovie.getProgress(target_mc));
// devo specificare il LoadMovieLoader.getProgress(mc_di_riferimento);
// restituira' all' oggetto loadProgress i valori bytesLoaded e bytesTotal
trace("Bytes caricati all' avvio: " + loadProgress.bytesLoaded);
trace("Bytes totali all' avvio: " + loadProgress.bytesTotal);

Lascio a voi commenti e/o prove effettuate riguardo questo metodo.


MovieClipLoader.loadClip();
Eccoci arrivati alla base del MovieClipLoader, ovvero il metodo che indica:

• su quale MovieClip caricare come target il nostro file specificato
• su quale livello caricare il file specificato

In entrambi casi sovrascrive quanto esistente in quel Movie o in quel livello.
Mi sento di consigliare il MovieClip, come target, per il semplice fatto che ci sono molte piu' possibilita' di controllo su un MC piuttosto che su un _level.

Esempio:
MovieClipLoader.loadClip(myFile, myMove); // per caricare su un MovieClip
MovieClipLoader.loadClip(myFile, 1); // per caricare su un livello

[ non vi preoccupate, tra poco ci sara' un esempio completo se state andando in confuzione ]


MovieClipLoader.removeListener();
Semplicemente elimina l' oggetto listner associato al MovieClipLoader.
La sintassi e' molto semplice ed intuitiva:

MovieClipLoader.removeListener(MovieListner);

MovieClipLoader.unloadClip();
Come da nome e' il metodo che ci permette di rimuovere un livello o un MiveClip caricati tramite loadClip();
Da considerare che oltre a darci la possibilita' di eliminare definitivamente il livello o il movie in questione, e' utile per lasciare il nostro filmato il piu' pulito possibile associando questo evento, ad esempio, all' interno dell' onLoadError.

Esempio:
MovieListner.onLoadError = function (target_mc, errorCode) {
	trace("Impossibile caricare questo file: " + target_mc);
	trace("[ " + errorCode + " ]");
	MovieListner.unloadClip(target_mc); // elimina definitivamente dalla memoria e dallo stage
}

Abbiamo appena finito di vedere tutti [almeno credo ... ] i metodi e le proprieta' che ruotano attorno a MovieClipLoader.
Per concludere questa pillola volevo farvi vedere un esempio commentato completo di utilizzo codice per il caricamento di un filmato SWF, di nome mySWF.swf all' interno di un altro filmato.

[andr3a]

/**********************************
* FASI COMUNI
* [ dichiarazioni vars e costanti ]
**********************************/
// il file mySWF.swf si trovera' nella stessa cartella di questo file
// mi trovo nel primo keyframe di questo filmato, apro il pannello delle action e comincio a scrivere ...

stop(); // mi assicuro che la timeline sia ferma in questo punto dello stage attuale
// [ superfluo, abitudine ]


// ora mi creo un paio di variabili stringa per definire eventuale folder e nome file da caricare ... 
var path:String = new String(""); // specifico la folder ... 
var swfName:String = new String(path+"mySWF.swf"); // ... e il nome del mio swf


// mi creo un campo di testo dinamico da utilizzare
// come debugger per inserire l'accaduto durante, prima e dopo ... 
// creo un campo di testo dinamico
// con nome istanza debug_txt
this.createTextField("debug_txt", 1, 0, 0, 1, 1); 
this["debug_txt"].autoSize = true; // lo rendo autosizzante
this["debug_txt"].html = true; // gli abilito l' html ...


// ... e creo lo stile ...
var myFormat:TextFormat = new TextFormat(); // istanzio la mia variabile di tipo TextFormat
myFormat.font = "Verdana"; // assegno l 'attributo font
myFormat.size = 10; // l'attributo size
myFormat.color = 0x000000; // l' attributo color 


// ora mi creo una variabile che popolero' di informazioni durante le mie prove ... 
var globalStatus:String = new String();
// in MX 2004 preferisco abituarmi ad instanziare in questo modo
// utile quando si ha a che fare con le classi in AS2.0
/********************************/



/**********************************
* FUNZIONI UTILI
* [ dichiarazioni funzioni ]
**********************************/
// adesso voglio creare una funzione che una volta richiamata
// mi popola di testo passato il campo dinamico creato in precedenza
function accaduto(campo:TextField, testo:String, formattazione:TextFormat) {
	campo.htmlText = testo;
	campo.setTextFormat(formattazione); 
}
/********************************/



/**********************************
* CREAZIONE DATI E CARICAMENTO
* [ gestione layout ed eventi ]
**********************************/

var myLoadedMovie:MovieClipLoader = new MovieClipLoader(); // creo il MovieClip loader
var MovieListner:Object = new Object(); // creo l'oggetto listner per myLoadedMovie

// onLoadStart
MovieListner.onLoadStart = function (target_mc)  {
	// comincio a popolare la variabile con gli avvenimenti ...
	globalStatus = "Inizio caricamento di " + target_mc + "\n";
	
	// e ci metto dentro anche il "misterioso" getProgress()
	var loadProgress:Object = new Object(myLoadedMovie.getProgress(target_mc));
	globalStatus += "Bytes caricati all' avvio: " + loadProgress.bytesLoaded + "\n";
	globalStatus += "Bytes totali all' avvio: " + loadProgress.bytesTotal + "\n";
}

// onLoadProgress
MovieListner.onLoadProgress = function (target_mc, loadedBytes, totalBytes) {
	// mostro in fase di caricamento il mio preload
	// senza Math.round, vars car e tot e le solite cosa insomma ...
	var caricamento = "Totale bytes caricati: " + loadedBytes + "\n";
	caricamento += "Totale bytes da caricare: " + totalBytes + "\n \n";
	// facile no ?
	

	// pero' voglio testare anche le differenze
	//con progress ( notabili solo con files compressi ... )
	var loadProgress:Object = new Object(myLoadedMovie.getProgress(target_mc));
	caricamento += "Totale bytes PROGRESS da caricare: " + loadProgress.bytesLoaded + "\n";
	caricamento += "Totale bytes PROGRESS totali: " + loadProgress.bytesTotal + "\n";
	
	// e leggere quanto appena richiesto ... 
	accaduto(debug_txt, caricamento, myFormat);
}

// onLoadComplete
MovieListner.onLoadComplete = function (target_mc) {
	// posso scrivere 100% grosso quanto una casa ma mi conviene aspettare a fare settaggi ... 
	globalStatus += "Il file " + target_mc + " e' pronto per essere inizializzato.\n";
}

// onLoadInit
MovieListner.onLoadInit = function (target_mc) {
	// perche' e' in questo momento che andro' a farli ...
	target_mc._alpha = 50;
	target_mc._x = Stage.width - target_mc._width;
	globalStatus += "Inizializzazione " + target_mc + " completata.\n";
	
	// fino a togliere la scritta dey bytes e metterci tute le info raccolte fin'ora
	accaduto(debug_txt, globalStatus, myFormat);
}

// onLoadError
MovieListner.onLoadError = function (target_mc, errorCode) {
	// oppure rinunciare a caricare, spiegando il motivo ..
	globalStatus += "Impossibile caricare questo file: " + target_mc + "\n";
	globalStatus += "[ " + errorCode + " ]\n";
	accaduto(debug_txt, globalStatus, myFormat);

	// e svuotando quanto resta dell' ormai inutile MovieClip di target
	myLoadedMovie.unloadClip(target_mc);
}



// dopo aver dichiarato i vari eventi del listner, associo quest' ultimo al MovieClipLoader ...  
myLoadedMovie.addListener(MovieListner);


// ... per poi creare qui un MovieClip
// con nome istanza myMove e depth 10 che andro' ad utilizzare come target
this.createEmptyMovieClip("myMove", 10);

// e passare le variabili create all' inizio per caricare il mio file ... 
myLoadedMovie.loadClip(path+swfName, this["myMove"]); // .. con this["myMove"] per target

[iaco74]

Grande pillola Andr3a ci voleva...avevo dato un occhiata a queste novita' ma non sono troppo esperto quindi questa pillola di sicuro mi facilitera' l'apprendimento di queste nuove funzionalita'.

Concordo con te sul fatto che qualche pillolina in piu' su questa sezione del forum non guasterebbe. :adhone:

Ho letto tutto ma ci mettero' un po' per apprendere comunque una domanda te la faccio subito....
Praticamente adesso potro' avere un controllo sui bytes anche per i file jpeg controllati esternamente giusto ?
Con mx non era possibile giusto ?
Oppure ero io fagiano che non ero capace.

Queste nuove funzionalita' si integreranno mi immagino alla perfezione anche con LoadVars(su cui ho letto la tua pillola)
Quindi venendo al sodo se imparo bene questo metodo potrei avere tutto sullo stesso frame un controllo di dati con preloader(LoadVars.getBytesTotal ecc...)e un controllo del caricamento dei Jpeg esterni.

Speriamo di non aver detto bischerate ....
Ciao e Grazie
:metallica :metallica :metallica

[andr3a]

Originariamente inviato da iaco74
Praticamente adesso potro' avere un controllo sui bytes anche per i file jpeg controllati esternamente giusto ?
Con mx non era possibile giusto ?
Oppure ero io fagiano che non ero capace.

diciamo che prima era possibile ma dovevi crearti tu il preload ed il relativo debug in caso di errori su loadMovie o loadMovieNums, ove non era presente uno stato di avanzamento o di completamento download e inizializzazione vera e propria.
[ con un onEnterFrame sul movieClip potevi monitorizzare getBytesLoaded e getBytesTotal, macchinoso ma fattibile ]

Originariamente inviato da iaco74
Queste nuove funzionalita' si integreranno mi immagino alla perfezione anche con LoadVars(su cui ho letto la tua pillola)

ooo oh .. frena
Questo metodo e' per files di tipo JPG o SWF, non c'entra niente il LoadVars();

Semplicemente non potrai mai avere un preload in loadVars, perlomeno su files di tipo server, perche' questi files si creano la dimensione in esecuzione e non prima
immaginati un semplice files da pochi bytes ... tipo

<?php
for($a=0; $a<10000000; $a++) {
echo "riga numero ".($a+1)."
";
}
?>

non puoi sapere quanto sara' grande il file, l' onLoad direi che e' piu' che eccellente come metodo o stato di caricamento LoadVars();
Se hai quello non ti serve altro, oppure passi a remoting o AMFphp che lo stato ce l'ha sul load e sull' error, piu' completo insomma ... ma purtroppo piu' difficile per chi ha meno dimestichezza in AS.

Originariamente inviato da iaco74
Quindi venendo al sodo se imparo bene questo metodo potrei avere tutto sullo stesso frame un controllo di dati con preloader(LoadVars.getBytesTotal ecc...)e un controllo del caricamento dei Jpeg esterni.

beh, questo e' possibile anche in MX diciamo che ora hai un metodo ufficiale e dedicato

[Falcao]

Originariamente inviato da andr3a
beh, questo e' possibile anche in MX diciamo che ora hai un metodo ufficiale e dedicato

comunque è possibile implementare questa classe anche in MX è solo che in MX2004 l'hanno fatto loro :tongue: :adhone: :quote:

[andr3a]

Originariamente inviato da Falcao
comunque è possibile implementare questa classe anche in MX è solo che in MX2004 l'hanno fatto loro :tongue: :adhone: :quote:

... e allora sei forte

[Falcao]

dai che scherzo io... :gren:

Apprezzo il lavoro che fai anche se il progetto delle pillole in questo forum abbiamo gia visto che non potrà andare in porto!

Forse il motivo è che a volte implementare in flash è più stressante per vari motivi di implementare in php (debug... grafica ecc. ecc. ) quindi magari il tempo di creare delle pillole è poco e uno lo utilizza diversamente!

[raffaeu]

Concordo con Andrea e

1 - tra ieri e oggi andrea mi hai tolto circa 5 ore di lavoro e studio, complimenti!
2 - per il caricamento di file dinamici, io qualcosa ce l' ho, poi ve lo posto qui. Comunque è vero per i linguaggi lato server, se fai un Loop su dei recordset non potrai mai sapere quanti dati hai fino a che non apri tutti gli RS ...

3 - Perchè non apriamo un OT come la mia news, ma solamente per le pillole??
Sicuramente smaltirebbe di molto il continuo postaggio di tread ripetitivi.

:tongue:

[iaco74]

quote:
--------------------------------------------------------------------------------
Originariamente inviato da iaco74
Queste nuove funzionalita' si integreranno mi immagino alla perfezione anche con LoadVars(su cui ho letto la tua pillola)

--------------------------------------------------------------------------------


ooo oh .. frena
Questo metodo e' per files di tipo JPG o SWF, non c'entra niente il LoadVars();

Semplicemente non potrai mai avere un preload in loadVars, perlomeno su files di tipo server, perche' questi files si creano la dimensione in esecuzione e non prima
immaginati un semplice files da pochi bytes ... tipo

PHP:--------------------------------------------------------------------------------

<?php
for($a=0; $a<10000000; $a++) {
echo "riga numero ".($a+1)."
";
}
?>

--------------------------------------------------------------------------------

non puoi sapere quanto sara' grande il file, l' onLoad direi che e' piu' che eccellente come metodo o stato di caricamento LoadVars();
Se hai quello non ti serve altro, oppure passi a remoting o AMFphp che lo stato ce l'ha sul load e sull' error, piu' completo insomma ... ma purtroppo piu' difficile per chi ha meno dimestichezza in AS.

Forse mi sono spiegato male (o forse quello che dico io non si puo' fare).
Cerco di spiegarmi meglio che posso:
Intendevo che LoadVars (a cui si puo' associare .getBytesTotal,.getBytesLoaded anche se ci sto studiando non l'ho mai fatto) puo' sapere quando ha finito di caricare i dati (onData)e quindi credo si possa costruire una specie di controllo sui dati tipo quello che ha realizzato thunderlips qui http://www.driverhelmets.com/ alla voce prodotti.
Cosi credo controlli i dati che arrivano da un output server(file di testo creato da php).
In piu' quello che mi piacerebbe fare e' avere anche il controllo del caricamento di un eventuale immagine jpg caricata con il sistema che ci hai spiegato.

In parole povere avere la possibilita' di caricare dati da un DB da inserire in vari campi di testo o componenti di flash,ed in piu' controllare il caricamento dell'immagine associata a quei dati con questo nuovo sistema.

Spero di essermi spiegato meglio e di non aver detto fagianate

[andr3a]

l' unica cosa che potresti fare e' dire al file php di creare un file txt ad ogni chiamata con dentro il risultato per poi, in onLoad sul file .php, far partire un preload di caricamento file .txt contenente le variabili che vuoi.

... ora dimmi tu se non e' una perdita di tempo
[ nonche' sovraccarico per il server, arrivano 2 utenti, si sovrascrive il file in contemporanea, bachi di ogni tipo e letture su chiamate mai effettuate, quindi c'e' anche il problema sicurezza e affidabilita' ]


Per farla breve, in loadVars, a meno che non sia sempre e solo un unico statico file di testo, non ha alcun senso fare il preload e non c'e' alcun modo per farlo