Quando creiamo contenuti flash per il web, dobbiamo tener conto del fatto che non viene visualizzato nulla prima che il filmato non sia stato caricato completamente e questo può mettere qualche dubbio all'utente, a meno che
non lo intratteniamo con un preload e gli diamo inoltre informazioni sulla percentuale di caricamento.
I due tipi di preload più diffusi sono a percentuale e a barra di avanzamento.
Vediamo come realizzarli.
Partiamo con il preload a percentuale.
Creiamo un nuovo file Flash ActinScript 2.0 e inseriamo 2 livelli:content e actions.
Nel livello content inseriamo subito dopo il primo fotogramma chiave un fotogramma semplice (premendo F5 oppure dal menù Inserisci,Linea temporale,Fotogramma). Sul primo fotogramma posizioniamo un campo di testo statico con testo "Attendere caricamento in corso..." e di fianco un campo di testo dinamico con nome istanza "campo".
Nel livello actions creiamo 3 fotogrammi chiave. Al primo diamo il seguente codice:

Codice: Seleziona tutto

total=_root.getBytesTotal();//Ricavo i byte totali e li metto nella variabile total
loaded=_root.getBytesLoaded();//Ricavo i byte caricati e li metto nella variabile loaded
percentuale=Math.floor((loaded/total)*100);/*Nella variabile percentuale inserisco la percentuale di caricamento che ricavo dividendo i byte caricati per quelli totali e moltiplicando tutto per 100. Inoltre tramite il metodo floor(x:Number) della classe Math ricavo il primo intero inferiore o uguale al numero che passo come argomento.

if(loaded==total)
  gotoAndPlay(3);/*Se i byte caricati sono uguali a quelli totali ho finito, vado al terzo fotogramma, dove sta il mio contenuto*/

campo.text=percentuale+"%";/*Al campo di testo campo assegno come testo il valore di percentuale concatenato al carattere %*/


Al secondo fotogramma chiave diamo come codice:

Codice: Seleziona tutto

gotoAndPlay(1);//Riproduci dal primo fotogramma in modo da aggiornare ogni volta le variabili in gioco


Al terzo fotogramma (relativo al nostro reale contenuto) diamo come codice semplicemente:

Codice: Seleziona tutto

stop();//Più altre eventuali istruzioni che dipendono da cosa state realizzando


Qui potete provare un esempio di questo primo preload.

Il secondo tipo di preload, cioè a barra di avanzamento, non è molto distante dal primo. La differenza, come dice il nome, sta nel fatto che invece della percentuale visualizzeremo una barra che da un punto iniziale che rappresenta lo 0% avanzerà fino ad un punto finale che è il 100%.
Come realizzare questo? Bene, basta disegnare una barra di lunghezza a nostro piacimento, selezionarla, premere F8 e trasformarla in un Clip filmato. Nuovamente premiamo F8 e scegliamo ancora Clip filmato e diamo come nome barra. Clicchiamo 2 volte su quest'ultimo e procediamo nel seguente modo:
spostiamo il punto di registrazione, che è quel puntino che si trova per default al centro e che è visibile dopo aver scelto dal menu Elabora-Trasforma-Trasformazione libera, alla sinistra della barra (per essere più precisi possiamo abilitare lo strumento calamita dalla barra degli strumenti).
Sul primo fotogramma inseriamo come codice:

Codice: Seleziona tutto

stop();


Dopodichè ci portiamo sul segnaposto dei fotogrammi numero 100 e inseriamo qui un fotogramma chiave(premendo F9) al quale diamo come codice sempre:

Codice: Seleziona tutto

stop();


Ora ci posizioniamo più o meno in mezzo ai 100 fotogrammi creati e dal pannelo proprietà inseriamo un interpolazione "movimento".

Ecco come dovrebbe presentarsi la linea temporale dopo questa operazione:



E qui c'è un particolare del pannelo proprietà:



Torniamo al primo fotogramma, selezioniamo la barra e sempre tramite la trasformazione libera la riduciamo fino a quanto più ci è possibile, trasportando il lato destro verso quello sinistro oppure ci basta impostare dal pannelo proprietà la lunghezza della barra a 0.
Il nostro filmato barra andrà a sostituire i due campi di testo del preload a percentuale e il codice del primo fotogramma cambierà in questo modo:

Codice: Seleziona tutto


total=_root.getBytesTotal();//Ricavo i byte totali e li metto nella variabile total
loaded=_root.getBytesLoaded();//Ricavo i byte caricati e li metto nella variabile loaded
percentuale=Math.floor((loaded/total)*100);/*Nella variabile percentuale inserisco la percentuale di caricamento che ricavo dividendo i byte caricati per quelli totali e moltiplicando tutto per 100. Inoltre tramite il metodo floor(x:Number) della classe Math ricavo il primo intero inferiore o uguale al numero che passo come argomento.

if(loaded==total)
  gotoAndPlay(3);/*Se i byte caricati sono uguali a quelli totali ho finito, vado al terzo fotogramma, dove sta il mio contenuto*/

barra.gotoAndPlay(percentuale);/*Semplicemente posizionati al fotogramma percentuale del filmato barra*/



Qui potete trovare un esempio di questo secondo preload.
Da qui potete scaricare i file sorgente.
Una piccola chicca: probabilmente testando il filmato sul vostro computer sarete riportati immediatamente al terzo fotogramma, perchè il caricamento è davvero veloce. Per simulare lo scaricamento basta testare il filmato e dalla finestra di flash player scegliere dal menu Visualizza-Simula scaricamento. Inoltre dalle impostazioni di scaricamento(la voce subito dopo) possiamo anche scegliere la velocità di scaricamento.
A presto