Preloader
Oltre al preloader per l'intro, che abbiamo appena visto, nella costruzione del sito useremo altri due tipi di preloader: uno per tutti i
filmati esterni tranne suono.swf, l'altro solo per il filmato principale, flash5.swf
Primo preloader: filmati esterni
I nostri filmati esterni vengono tutti caricati sul livello 1, uno alla volta: infatti, al caricamento di un nuovo filmato, questo prende il
posto di quello che occupava il livello precedentemente. Inoltre, dal momento che parliamo di caricamento su livelli, e non in movieclip,
possiamo utilizzare il tipo di preloader più comune, basato sul controllo dei bytes caricati e totali della _root. (riferimento al filmato in
cui è presente lo script, in qualunque livello sia). Quando caricheremo uno dei filmati esterni, vedremo il preloader come se fosse nel
filmato principale, in trasparenza sopra gli altri oggetti. Vediamone la costruzione, da effettuare in tutti i filmati tranne flash5.fla e
suono.fla
Innanzitutto, dobbiamo inserire il preloader un frame prima di quello principale (i filmati sono tutti composti da un solo frame): il metodo
più semplice, per non dover spostare il frame su ogni livello, è quello di aggiungere una scena che preceda quella principale. Apriamo quindi
il nostro filmato, e andiamo al menu Modify/Scene (Elabora/Scene): nell'apposito pannello, premiamo il pulsante con il simbolo + in
basso a destra. Nel nostro filmato verrà aggiunta una scena dopo quella già esistente.
Cliccando sul nome della scena, la rinominiamo in preloader, e la trasciniamo sopra la prima.
Ciò è necessario perché, nella gerarchie delle scene, quella più sopra viene riprodotta prima di quelle sotto.
Aggiungiamo alla libreria un nuovo movieclip, che chiameremo barraPreloader. All'interno del movieclip, disegniamo un rettangolo bianco largo 60 pixel e alto 6, con l'angolo superiore sinistro sul punto di registrazione.
Premiamo nuovamente il pulsante + nella libreria, e inseriamo un altro movieclip, che chiameremo preloader: conterrà tre layer di un
frame ciascuno, chiamati rispettivamente, dall'alto verso il basso, "cornice", "barra" e "testo".
Nel layer "barra", trasciniamo dalla libreria un'istanza del movieclip barraPreloader, alla quale daremo, come nome di
istanza, barra. Selezioniamo la barra, e apriamo il pannello Transform: nel campo Width, inseriamo il valore più basso possibile (lo 0,
che verrà trasformato in 0.8), riducendo la barra ad essere praticamente invisibile.
Nel layer "cornice" trasciniamo dalla libreria un'istanza del movieclip cornice, che
posizioneremo, con le stesse
dimensioni (60x6), proprio sopra la barra.
Infine, nel layer "testo", inseriremo sopra la barra la scritta statica "caricamento in corso...", e accanto alla barra,
un campo di testo dinamico con associata la variabile percentuale. Visivamente, il risultato sarà questo:
Torniamo alla timeline principale, nell'unico frame della scena "preloader". Dalla libreria, trasciniamo sullo stage
un'istanza del movieclip preloader, alla quale associamo:
onClipEvent (load) {
_visible = 0;
_root.stop();
}
onClipEvent (enterFrame) {
if (_root.getBytesLoaded() ==
_root.getBytesTotal()) {
_root.nextFrame();
}
_visible = 1;
perc = barra._xscale =
Math.round((_root.getBytesLoaded()/_root.getBytesTotal())*100);
percentuale = perc + "%";
}
All'avvio del filmato, il preloader è invisibile. Viene controllato se i bytes caricati del filmato intero sono uguali a quelli totali: se
vero, il filmato passa al frame successivo, dove c'è l'animazione principale, altrimenti il preloader diventa visibile e mostra i
dati di caricamento. Questo sistema serve ad evitare che, ai successivi caricamenti dello stesso filmato, si veda il preloader anche solo per
un secondo. Spiegato riga per riga:
// al caricamento del movieclip
onClipEvent (load) {
// settane la visibilità su 0
_visible = 0;
// ferma la riproduzione della timeline principale
_root.stop();
}
// ad ogni riproduzione del movieclip
onClipEvent (enterFrame) {
// se i bytes caricati del filmato, sono uguali a quelli totali
if (_root.getBytesLoaded() ==
_root.getBytesTotal()) {
// riprendi la riproduzione della timeline principale, fermandola sul frame seguente
_root.nextFrame();
}
// rendi il movieclip visibile
_visible = 1;
// assegna a "perc" lo stesso valore usato per scalare la barra, cioè l'arrotondamento
// del quoto tra bytes caricati e totali moltiplicato per 100
perc = barra._xscale =
Math.round((_root.getBytesLoaded()/_root.getBytesTotal())*100);
// scrivi nel campo di testo "percentuale", il valore di "perc" più il simbolo "%"
percentuale = perc + "%";
}
Il preloader è perfettamente identico in tutti i filmati.
Secondo preloader: filmato principale
Il preloader del filmato principale, oltre a non essere visibile nei caricamenti successivi, come quello dei filmati esterni, ha anche
un'altra caratteristica: deve precaricare il filmato suono.swf. Quest'ultimo infatti, dal momento che contiene un suono linkato, non
può avere un preloader come gli altri filmati. Flash, nel caso di oggetti linkati, pone questi in un frame virtuale 0, prima di tutti gli
altri: per questo motivo, è necessario che sia completo il caricamento degli oggetti linkati prima che sia possibile vedere il preloader. Se
poi l'oggetto linkato è da 100k (tipicamente un suono di sottofondo), e il filmato stesso è da 10k, il preloader diventa assolutamente
inutile.
Cominciamo con il preparare il filmato suono.swf per il preloader: apriamo suono.fla, e aggiungiamo una nuova scena prima di quella già
esistente. Nell'unico frame, mettiamo uno stop, e salviamo.
Apriamo flash5.fla e, come negli altri filmati, aggiungiamo una scena prima di quella già esistente: in questa scena, creiamo tre layer,
"preloader", "frecce", "sfondo", dall'alto verso il basso. Nel layer "sfondo", disegniamo un
rettangolo grande quanto l'intero filmato, e riempito con un gradiente che richiami quello della fascia centrale della scena seguente. Nel
layer "frecce", trasciniamo dalla libreria tre istanze del movieclip clip, posizioniate appena al di fuori della sinistra
dello stage, con altezza, colore, e trasparenza diversa. Alle tre frecce diamo, come nome di istanza, freccia1, freccia2,
freccia3, e associamo a ciascuna il seguente script:
onClipEvent (load) {
fine = 1000;
frame = 40:
}
onClipEvent (enterFrame) {
if(vai){
inizio = _x;
_x += (fine-_x)/frame;
if(_x > 980){
_x = -20;
}
}
}
Nuovamente si tratta del moto decelerato: le frecce si sposteranno, se la variabile "vai" è vera, attraversando tutto lo stage:
quando però la loro posizione sull'asse delle X supererà il valore di 980 (quello finale è 1000), torneranno al punto di partenza,
ricominciando lo spostamento. L'unico valore da cambiare da freccia a freccia, è quello della variabile frame, che determina la
velocità di spostamento.
// al caricamento del movieclip
onClipEvent
(load) {
// attribuisci alla variabile "fine" il valore 1000
fine = 1000;
// attribuisci alla variabile "frame" il valore 40
frame = 40;
}
// ad ogni riproduzione del movieclip
onClipEvent (enterFrame) {
// se la variabile "vai" è vera
if(vai){
// attribuisci alla variabile "inizio" il valore
// dell'attuale posizione del movieclip sull'asse delle X
inizio = _x;
// moto decelerato
_x += (fine-_x)/frame;
// se la posizione del movieclip è superiore a 980
if(_x > 980){
// riporta il movieclip alla posizione -20 sull'asse delle X
_x = -20;
}
}
}
Aggiungiamo alla libreria un movieclip che chiameremo barraPreloader, contenente un rettangolo 200x8 con l'angolo superiore
sinistro sul punto di registrazione. Aggiungiamo infine alla libreria, un ultimo movieclip che chiameremo preloader, al cui interno
creiamo tre layer.
Nel primo layer, che chiameremo "scritte", inseriamo due campo di testo statici, "caricamento grafica" e
"caricamento audio". Nel layer sotto, "cornici", trasciniamo dalla libreria due istanze del movieclip cornice, che
ridimensioneremo a 200x8. Nel layer "barre", inseriamo due istanze del movieclip barraPreloader: le posizioniamo sotto le due
cornici, le scaliamo a 0 in larghezza, e le chiamiamo barra1 e barra2.
Nel layer "preloader" della prima scena del filmato, trasciniamo dalla libreria un'istanza del movieclip preloader, alla
quale associamo:
onClipEvent (load) {
_visible = 0;
loadMovieNum ("suono.swf", 10);
_root.stop();
}
onClipEvent (enterFrame) {
car0 = _root.getBytesLoaded();
tot0 = _root.getBytesTotal();
car10 = _level10.getBytesLoaded();
tot10 = _level10.getBytesTotal();
if (_level10._url !=
null) {
if (car0 == tot0 && car10 == tot10) {
_level10.nextFrame();
_root.nextFrame();
} else {
_parent.freccia1.vai =
_parent.freccia2.vai =
_parent.freccia3.vai =
true;
_visible = 1;
barra1._xscale =
Math.round((car0/tot0)*100);
barra2._xscale =
Math.round((car10/tot10)*100);
}
}
}
Il preloader, all'avvio del filmato, è invisibile: viene caricato il filmato suono.swf sul livello 10, e fermata la riproduzione della
timeline principale. Ad ogni riproduzione del movieclip, vengono stabiliti i dati di caricamento di entrambi i filmati: quando sono carichi,
ne viene avviata la riproduzione. Nel frattempo, vengono visualizzati i dati di caricamento, dopo che il preloader è stato reso visibile.
// al caricamento del movieclip
onClipEvent (load) {
// rendi invisibile il movieclip
_visible = 0;
// carica il filmato "suono.swf" sul livello 10
loadMovieNum ("suono.swf", 10);
// interrompi la riproduzione della timeline principale
_root.stop();
}
// ad ogni riproduzione del movieclip
onClipEvent (enterFrame) {
// assegna a "car0" il numero di bytes caricati del filmato principale
car0 = _root.getBytesLoaded();
// assegna a "tot0" il numero di bytes totali del filmato principale
tot0 = _root.getBytesTotal();
// assegna a "car10" il numero di bytes caricati del filmato suono.swf
car10 = _level10.getBytesLoaded();
// assegna a "tot10" il numero di bytes totali del filmato suono.swf
tot10 = _level10.getBytesTotal();
// se l'url del livello 10 non è nulla (quindi è iniziato il caricamento)
if (_level10._url !=
null) {
// se "car0" è uguale a "tot0" e "car10" è uguale a "tot10"
if (car0 == tot0 && car10 == tot10) {
// riprendi la riproduzione del livello 10 fermandola sul frame seguente
_level10.nextFrame();
// riprendi la riproduzione del filmato fermandola sul frame seguente
_root.nextFrame();
// altrimenti
} else {
// setta la variabile "vai" come vera sulle tre frecce
_parent.freccia1.vai =
_parent.freccia2.vai =
_parent.freccia3.vai =
true;
// rendi il movieclip visibile
_visible = 1;
// scala la barra1 sul valore di "car0" fratto "tot0" moltiplicato per 100
barra1._xscale =
Math.round((car0/tot0)*100);
// scala la barra2 sul valore di "car10" fratto "tot10" moltiplicato per 100
barra2._xscale =
Math.round((car10/tot10)*100);
}
}
}
