SCOPO
Far partire assieme tutti i filmati della pagina, quando sono tutti completamente carichi.
STRUMENTI
Metodi Javascript | Play | PercentLoaded
METODO
Il caso classico in cui può rendersi utile questa tecnica è quando dobbiamo far partire contemporaneamente diversi filmati, anche di diverso peso gli uni dagli altri, incorporati nella stessa pagina html.
Il controllo e l'avviamento della riproduzione vengono gestiti da Javascript: per quanto riguarda i filmati, è sufficiente che questi si fermino, dopo il preloader, in attesa del segnale di avvio proveniente dalla pagina html.
Per rendere però la cosa più lampante, i filmati dell'esempio mostrano graficamente quando hanno terminato il preloader, in modo che sia più chiaro il delay tra il caricamento degli uni e il caricamento degli altri.
I filmati
I filmati sono tutti uguali:
• nel primo frame un movieclip che funge da preloader
• dal frame 2 al frame 60 l'animazione principale
• nel frame 60, il rimando al secondo frame tramite:
gotoAndPlay(2);
Lo script del preloader, come accennato, è associato ad un movieclip, all'interno del quale è presente un campo di testo dinamico con variabile "testo". Lo script è il seguente:
onClipEvent (load) {
_root.stop();
}
onClipEvent (enterFrame) {
car = _root.getBytesLoaded();
tot = _root.getBytesTotal();
perc = Math.round((car/tot)*100);
testo = "Caricamento: " + perc + "%";
if(car == tot){
testo = "Caricamento Completo";
_visible = !_visible;
}
}
Si nota subito come il preloader non avvii mai la timeline principale: infatti, come già detto, questo compito è affidato alla funzione javascript. Vediamo la spiegazione riga per riga:
// al caricamento del movieclip
onClipEvent (load) {
// interrompi la riproduzione della timeline principale
_root.stop();
}
// ad ogni riproduzione del movieclip
onClipEvent (enterFrame) {
// assegna alla variabile "car" il numero
// dei bytes finora caricati
car = _root.getBytesLoaded();
// assegna alla variabile "tot" il numero
// totale dei bytes del filmato
tot = _root.getBytesTotal();
// assegna alla variabile "perc" la percentuale
// di caricamento del filmato
perc = Math.round((car/tot)*100);
// scrivi nel campo di testo la stringa composta
// da "Caricamento" più la percentuale
testo = "Caricamento: " + perc + "%";
// se "car" è uguale a "tot", e quindi il filmato
// è completamente carico
if(car == tot){
// scrivi nel campo di testo "Caricamento Completo"
testo = "Caricamento Completo";
// alterna ad ogni frame la visibilità del
// movieclip, in modo che lampeggi
_visible = !_visible;
}
}
I tag di incorporamento
I quattro filmati si chiamano "filmato1.swf", "filmato2.swf", "filmato3.swf" e "filmato4.swf": il nome fisico non ha alcuna importanza, potrebbero avere qualunque altro nome. Quello che importa, è il nome con cui vengono identificati dalla pagina html:
<object
classid="[...]" codebase="[...]"
width=400 height=100 ID="filmato1">
<PARAM NAME=movie VALUE="filmato1.swf">
<PARAM NAME=menu VALUE=false>
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#CCCCCC>
<embed
src="filmato1.swf"
menu=false
quality=high
bgcolor=#CCCCCC
swLiveConnect=true
name="filmato1"
width=400
height=100
type="application/x-shockwave-flash"
pluginspage="[...]">
</embed>
</object>
Ripeto ancora una volta, è puramente incidentale che il primo filmato si chiami "filmato1.swf" e abbia come identificativo "filmato1": è solo una questione di comodità.
L'importante, per il funzionamento dello script, è che i filmati abbiano identificativo sequenziale, cioè "filmato1", "filmato2", "filmato3" eccetera, indipendentemente dal loro nome vero, dal loro peso, dalla loro posizione nella pagina, dalla loro importanza.
Le funzioni Javascript
La sequenza di controllo viene avviata al caricamento della pagina, tramite l'onLoad all'interno del tag <body>:
<body bgcolor="#CCCCCC" onLoad="controlla()">
Le funzioni definite all'interno del tag <head> sono le seguenti:
<script language="JavaScript" type="text/JavaScript">
<!--
var filmati = 4;
var IE = navigator.appName.indexOf("Microsoft") != -1;
var path = IE ? window : window.document;
function controlla() {
for(var i = 1; i < filmati + 1; i++){
if(path["filmato"+i].PercentLoaded() < 100) {
setTimeout('controlla()', 200); return;
}
}
avvia();
}
function avvia(){
for(var i = 1; i < filmati+1; i++){
path["filmato"+i].Play();
}
}
//-->
</script>
Alla variabile filmati viene associato il numero di filmati da controllare, quindi viene creata una scorciatoia, nella variabile path, alla struttura della pagina per raggiungere i filmati a seconda del browser.
La funzione controlla() verifica, tramite un ciclo for, se la percentuale di caricamento dei filmati è inferiore a 100. Se lo è anche solo per un filmato, il ciclo viene interrotto, e tramite il setTimeout viene programmato un nuovo controllo per 200 millisecondi dopo. Dal momento che la funzione viene interrotta con il return, la riga con il richiamo alla funzione avvia() non viene eseguita.
Quando non c'è più un solo filmato con la percentuale di caricamento inferiore a 100, l'esecuzione delle istruzioni dentro controlla() arriva fino alla riga con il richiamo alla funzione avvia().
La funzione avvia(), a questo punto, fa partire ad uno ad uno tutti i filmati previsti.
FILES
