Preload in Flash

Abbiamo realizzato un filmato in flash e mentre sul nostro computer scorre senza problemi, perchè di fatto il filmato è già totalmente disponibile alla elaborazione (risiede nella nostra memoria), abbiamo una brutta sorpesa se osserviamo il filmato dopo averlo inserito in un sito.
Le scene, specialmente se contengono immaginii o molti oggetti, procedono a scatti... questo perchè il filmato flash viene elaborato dal computer appena le prime informazioni sono disponibili (il metodo è chiamato streaming) ed anche se tutto il documento non è ancora stato scaricato integralmente.

E' possibile testare la pesantezza di un filmato Flash in via di realizzazione e simulare il download di un utente attraverso il comando: Control > Test Movie seguito da View > Bandwith Profiler.
Consigliamo anche di regolare la velocità di download ipotizzata con View > Download Setting ed infine simulare l'animazione sul computer del nostro utente con il comando View > Simulate Download.

Questa serie di operazioni renderanno evidenti i punti in cui il filmato si blocca per ricevere le nuove informazioni e se il vostro filmato ha numerosi picchi che superano la linea rossa (velocità ipotizzata per la connessione) sarà necessario creare un preload.
Si tratta di una piccola animazione che indicherà quanto tempo manca all'elaborazione del filmato, senza più blocchi e scatti. Procediamo...

Occorre come prima cosa, realizzare una nuova scena da aggiungere a quella creata inizialmente, rinominarla ad esempio "load" e posizionarla prima della scena "principale".
I comandi per creare e gestire le scene sono contenuti nel pannello Scene, se non è visibile fra i vostri pannelli è sufficiente attivarlo con il comando Window > Design Panels > Scene.

Con il pulsante + crea la nuova scena, con un click rinominata come "load" ed infine trascinala prima di "principale".

Clicca "load" per vedere il suo stage e la sua linea temporale, è su questa scena che andremo a lavorare d'ora inpoi.

Al suo interno occorre disegnare una barra che mostri visivamente il caricamento del filmato e con una casella di testo che permetta di visualizzare il valore percentuale (testo di input).

Per il primo elemento creiamo un nuovo movie clip "barra", all'interno della quale con lo strumento Rettangolo disegniamo un segmento del colore preferito, quindi:

1. Posizionare la "barra" nella scena "load", trascinandola dalla Libreria
2. Nominare l'istanza della barra come "linea" per renderla disponibile ad azioni e comandi esterni (per farla allungare con lo scaricamento).

Per la casella di testo dinamico (calcolato dal programma), utilizziamo lo strumento Testo impostando le caratteristiche come mostrato di seguito.

1. Inserisci un testo usando il normale strumento A (clicca e trascina per impostane le dimensioni)
2. dal menu a tendina nelle proprietà seleziona la voce testo dinamico
3. nella casella Var (Var significa variabile) digita il nome "percentuale"

Sono stati realizzati inoltre altri due testi dinamici:

1. testo dinamico per mostrare quanti byte sono stati scaricati (Var: scaricati)
2. testo dimanico per mostrare la dimensione totale del filmato (Var: totali)

Gli altri testi presenti nella schermata sono semplici testi statici.

Procediamo quindi alla definizione delle azioni necessarie a visualizzare la crescita della barra e la visualizzazione del valore percentuale.

Creiamo il livello "azioni", composto da due fotogrammi chiave in cui applicheremo il loop di controllo del filmato. In esso abbiamo due fotogrammi chiave inizialmente vuoti al cui interno andremo a programmare le azioni in actionscript.

Iniziamoo con il secondo fotogramma chiave nel quale deve essere impostato il comando gotoAndPlay(1) che rimanda al primo fotogramma realizzando un loop (un ciclo).

Le azioni da inserire nel primo fotogramma sono leggermente più complesse rispetto al primo esempio, vediamo che cosa deve fare il programma:

• calcolare qual è la dimensione totale del filmato (in Byte);
• calcolare quanti Byte sono già stati scaricati;
• calcolare la percentuale da visualizzare nella caselle di testo "percentuale";
• dimensionare con lo stesso valore la "linea";
• infine se i due valori sono uguali allora possiamo caricare il filmato "principale".

Ecco i comandi actionscript necessari che svolgono esattamente i compiti descritti nella lista precedente:

scaricati = _root.getBytesLoaded();
totali = _root.getBytesTotal();
percentuale = Math.floor(100*scaricati/totali);
linea._xscale = percentuale;
if (totali==scaricati) gotoAndPlay("principale",1);

Ecco di seguito la spiegazione, parola per parola del codice appena descritto:

• Nella variabile scaricati imposto la lettura del numero di byte scaricati dall'utente con il metodo dello streaming
• Nella variabile totali memorizzo invece il numero totale dei byte che compongono l'intero filmato
• nella variabile percentuale calcolo la percentuale di filmato scaricato
• la variabile percentuale mi permette di definire la scala della linea di scaricamento
• controllo se il filmato è stato scaricato integralmente (i bit scaricati devono essere uguali a queli totali) e se questa condizione è vera si procede alla riproduzione della scena "principale" del filmato dal primo fotogramma.

Se i comandi sono stati correttamente digitati controllate se il filmato funziona con Control > Test Movie e Simulate Download. 

Questo articolo è ben indicizzato per le parole chiave preload flash su Google