Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 38 di 44
  • livello principiante
Indice lezioni

Partenza contemporanea

Avviare tutti i filmati contenuti nella pagina a caricamento completo e nello stesso momento
Avviare tutti i filmati contenuti nella pagina a caricamento completo e nello stesso momento
Link copiato negli appunti

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

visualizza l'esempio | scarica l'esempio

Ti consigliamo anche