Flash: barra di caricamento

Di: fiorematt-design | 26/09/2020 18:47:16
ciao, in particolare mi riferisco al profesore che è sempre molto chiaro.
puoi spiegarmi come creare passo passo una barra per il preload e tutte le action da inserire nel frame o nei frames? ci provo continuamente ma senza succeso. ti prego, dalla A alla Z, la maniera più semplice e lineare, devo superare il problema concettuale di costruzione. grazie

Risposte



Ciao Fiorematt,
ti ringrazio per la preferenza, tuttavia questo è un Forum libero e, come mi capita spesso di scrivere, se chiedi la soluzione ad un singolo utente gli altri non vorranno risponderti e, se io non avessi il tempo, potresti rimanere senza soluzione al tuo problema.
Prima di tutto facciamo la lista della spesa, ovvero l’elenco di tutto quello che serve per realizzare un preload:
1. il metodo getBytesTotal che ci rivela qual’è il peso complessivo di un elemento. Si può applicare alla _root per sapere quanto pesa il filmato, oppure a un MovieClip che carica un filmato esterno.
2. il metodo getBytesLoaded che ci dice quanto abbiamo caricato.
3. la percentuale che si ottiene con una semplice funzione tra i due valori precedenti.
4. la proprietà _xscale che ci permette di ridimensionare un clip filmato in orizzontale, lo useremo sul MovieClip della barra applicandogli il valore di percentuale calcolato sopra.
5. un ciclo che ripeta i calcoli e il ridimensionamento della barra continuamente, fino al caricamento totale del filmato.
Per realizzare il ciclo possiamo usare un metodo a scelta tra questi tre:
- setInterval che esegue una funzione continuamente con la frequenza che vogliamo noi, espressa in millisecondi.
- ciclo di fotogrammi che non è altro che un gotoAndPlay al fotogramma precedente, che crea il continuo ripetersi di due fotogrammi.
- onEnterFrame che è un evento che si può associare ad un MovieClip e ripete le stesse azioni fino a che quel MovieCLip è presente sulla scena.
Scriverò tre esempi che utilizzano questi tre metodi.
Prima di iniziare crea un file nuovo, disegna una barra qualsiasi con lo strumento rettangolo, convertila in un MovieClip (F8) e assegna un nome istanza, io ho usato come nome “barra”.
Qualunque sia il metodo che deciderai di usare questo elemento (l’istanza chiamata “barra” sullo Stage) è necessario.
Vediamo subito lo script che calcola la percentuale caricata e ridimensiona la barra, questo script è uguale per tutti gli esempi, quello che cambia è solo il metodo da utilizzare per far sì che questo calcolo e il ridimensionamento siano eseguiti di continuo (infatti se il calcolo e il ridimensionamento fossero eseguiti una sola volta non vedremmo cambiare la lunghezza della barra e non potremmo valutare se il caricamento è terminato).
var tot:Number = _root.getBytesTotal();
var car:Number = _root.getBytesLoaded();
var per:Number = car/tot*100;
_root.barra._xscale = per;
Queste quattro righe calcolano la percentuale caricata e ridimensionano la barra di conseguenza, più in dettaglio:
primo rigo: creo una variabile chiamata “tot”, dico che è un numero e assegno come valore la grandezza in bytes del filmato completo.
secondo rigo: creo una variabile chiamata “car”, dico che è un numero e assegno come valore i bytes caricati fino ad ora.
terzo rigo: creo una variabile chiamata “per”, dico che è un numero e assegno come valore la percentuale caricata, che ottengo confrontando le variabili “car” e “tot”.
quarto rigo: ridimensiono la barra assegnando come valore percentuale il valore del caricamento che ho già calcolato e conservato nella variabile “per”.
Queste quattro righe di codice saranno presenti, identiche, in ognuno dei tre casi che analizzeremo.
Primo tentativo: preload con setInterval
setInterval è un metodo che ripete in continuazione una azione, può essere fermato con clearInterval e bisognerebbe ricordarsi di fermarlo se non serve più: infatti i cicli di questo tipo continuano a funzionare anche se non ne vediamo gli effetti, rallentando l’esecuzione del filmato (anche se di poco) se dovessimo lasciare attivi molti cicli di questo tipo ci accorgeremmo della “pesantezza” dell’esecuzione del filmato Flash.
Il numero minimo di argomenti da passare a questo metodo è 2: il nome della funzione da ripetere e il numero di millisecondi da attendere tra un’esecuzione e la successiva.
In questo esempio posizioneremo la barra e lo script sul fotogramma 1 e riempiremo il fotogramma 2 con dei contenuti finti (importa un po’ di immagini sullo Stage, tanto per dare un peso al file e vedere il preload in funzione).
Lo script che devi inserire è il seguente:
_root.stop();
function preload() {
car = _root.getBytesLoaded();
tot = _root.getBytesTotal();
per = car/tot*100;
_root.barra._xscale = per;
if (per == 100) {
_root.gotoAndStop(2);
clearInterval(preloadInterval);
}
}
var preloadInterval = setInterval(preload, 10);
Al primo rigo c’è uno stop per fermare l’animazione su questo fotogramma fino a che non finiamo di scaricare tutto.
Al secondo rigo comincia la funzione, che ho chiamato “preload”.
I quattro righi successivi li conosciamo già.
La condizione “if” controlla che il filmato sia caricato (se il valore di per è uguale a 100) e rimanda al fotogramma 2, inoltre ferma il ciclo.
L’ultimo rigo imposta il ciclo per fare in modo che la stessa funzione sia ripetuta 100 volte al secondo (ogni 10 millisecondi).
Secondo tentativo: preload con un ciclio di fotogrammi
Per questo esperimento abbiamo bisogno di quattro fotogrammi e due livelli.
Su un livello posizioniamo la nostra barra, sul fotogramma 1 , i fotogrammi 2 e 3 saranno semplici (cioé non saranno fotogrammi chiave), il quarto fotogramma conterrà delle immagini per appesantire l’swf (o i tuoi veri contenuti).
Sull’altro livello creiamo due fotogrammi chiave, il terzo e il quarto, non inseriremo nessuna grafica, solo azioni.
Sul terzo fotogramma vanno queste azioni:
car = _root.getBytesLoaded();
tot = _root.getBytesTotal();
per = car/tot*100;
_root.barra._xscale = per;
if (per < 100) {
_root.gotoAndPlay(2);
}
Sul quarto fotogramma va solo uno stop().
Questo ciclo si basa sul fatto che rimandando l’animazione al fotogramma 2 questa tornerà al fotogramma 3 e ripeterà le azioni. La ripetizione del ciclo si ferma quando “per” smette di essere minore di zero.
Il motivo per cui il primo fotogramma non è più utilizzato è che se questo ciclo ci rimandasse ad un fotogramma chiave della barra vedremmo la barra larga alle dimensioni reali.
Quindi in un ciclo tra il fotogramma 1 e il 2 anziché tra il 3 e il 2 non funzionerebbe il ridimensionamento della barra.
Terzo tentativo: preload con onEnterFrame
Ho lasciato per ultimo questo metodo perché è quello che ti consiglio, un ciclo di questo tipo non ha bisogno di fotogrammi chiave e non ha bisogno di essere fermato, infatti quando la barra non esiste più (perché magari ci siamo spostati su un fotogramma in cui la barra non c’è), anche il ciclo smette di esistere.
Ci servono due fotogrammi, sul secondo dobbiamo, al solito, inserire qualcosa per appesantire il filmato, il primo fotogramma ospiterà la barra e lo script per il preload.
Inserisci questo script sul fotogramma:
_root.stop();
barra.onEnterFrame = function() {
car = _root.getBytesLoaded();
tot = _root.getBytesTotal();
per = car/tot*100;
_root.barra._xscale = per;
if (per == 100) {
_root.gotoAndStop(2);
}
};
Il primo rigo è uno stop semplice.
onEnterFrame fa in modo che lo script si ripeta fino a che il MovieClip chiamato “barra” è presente sullo Stage.
Seguono le quattro righe magiche del preload e, infine, la condizione che ci permette di spostarci di fotogramma se tutto quanto è stato caricato.
Ultima cosa:
se la tua barra si allarga dal centro verso i lati anziché da sinistra a destra è perché il suo “centro” (punto di registrazione) deve trovarsi all’estremità sinistra, infatti quando ridimensioniamo, ruotiamo o spostiamo un oggetto tramite script usiamo sempre il punto 0,0 dei quell’oggetto (cioé della sua area di disegno interna) come punto di riferimento.
Ciao e buon lavoro.

Di: Professore | 26/09/2020 18:48:16

mitico

profesore sei un mito. grazie.

Di: fiorematt-design | 26/09/2020 18:48:16


professore.. finalmente funziona la doppia "s"..

Di: fiorematt-design | 26/09/2020 18:48:16

gotoandstop

[USER]Professore[/USER]

Ciao Fiorematt,
scusa professore...nma perche gotoAndStop alla fine e non un gotoAndPlay?
alessio
ti ringrazio per la preferenza, tuttavia questo è un Forum libero e, come mi capita spesso di scrivere, se chiedi la soluzione ad un singolo utente gli altri non vorranno risponderti e, se io non avessi il tempo, potresti rimanere senza soluzione al tuo problema.
Prima di tutto facciamo la lista della spesa, ovvero l’elenco di tutto quello che serve per realizzare un preload:
1. il metodo getBytesTotal che ci rivela qual’è il peso complessivo di un elemento. Si può applicare alla _root per sapere quanto pesa il filmato, oppure a un MovieClip che carica un filmato esterno.
2. il metodo getBytesLoaded che ci dice quanto abbiamo caricato.
3. la percentuale che si ottiene con una semplice funzione tra i due valori precedenti.
4. la proprietà _xscale che ci permette di ridimensionare un clip filmato in orizzontale, lo useremo sul MovieClip della barra applicandogli il valore di percentuale calcolato sopra.
5. un ciclo che ripeta i calcoli e il ridimensionamento della barra continuamente, fino al caricamento totale del filmato.
Per realizzare il ciclo possiamo usare un metodo a scelta tra questi tre:
- setInterval che esegue una funzione continuamente con la frequenza che vogliamo noi, espressa in millisecondi.
- ciclo di fotogrammi che non è altro che un gotoAndPlay al fotogramma precedente, che crea il continuo ripetersi di due fotogrammi.
- onEnterFrame che è un evento che si può associare ad un MovieClip e ripete le stesse azioni fino a che quel MovieCLip è presente sulla scena.
Scriverò tre esempi che utilizzano questi tre metodi.
Prima di iniziare crea un file nuovo, disegna una barra qualsiasi con lo strumento rettangolo, convertila in un MovieClip (F8) e assegna un nome istanza, io ho usato come nome “barra”.
Qualunque sia il metodo che deciderai di usare questo elemento (l’istanza chiamata “barra” sullo Stage) è necessario.
Vediamo subito lo script che calcola la percentuale caricata e ridimensiona la barra, questo script è uguale per tutti gli esempi, quello che cambia è solo il metodo da utilizzare per far sì che questo calcolo e il ridimensionamento siano eseguiti di continuo (infatti se il calcolo e il ridimensionamento fossero eseguiti una sola volta non vedremmo cambiare la lunghezza della barra e non potremmo valutare se il caricamento è terminato).
var tot:Number = _root.getBytesTotal();
var car:Number = _root.getBytesLoaded();
var per:Number = car/tot*100;
_root.barra._xscale = per;
Queste quattro righe calcolano la percentuale caricata e ridimensionano la barra di conseguenza, più in dettaglio:
primo rigo: creo una variabile chiamata “tot”, dico che è un numero e assegno come valore la grandezza in bytes del filmato completo.
secondo rigo: creo una variabile chiamata “car”, dico che è un numero e assegno come valore i bytes caricati fino ad ora.
terzo rigo: creo una variabile chiamata “per”, dico che è un numero e assegno come valore la percentuale caricata, che ottengo confrontando le variabili “car” e “tot”.
quarto rigo: ridimensiono la barra assegnando come valore percentuale il valore del caricamento che ho già calcolato e conservato nella variabile “per”.
Queste quattro righe di codice saranno presenti, identiche, in ognuno dei tre casi che analizzeremo.
Primo tentativo: preload con setInterval
setInterval è un metodo che ripete in continuazione una azione, può essere fermato con clearInterval e bisognerebbe ricordarsi di fermarlo se non serve più: infatti i cicli di questo tipo continuano a funzionare anche se non ne vediamo gli effetti, rallentando l’esecuzione del filmato (anche se di poco) se dovessimo lasciare attivi molti cicli di questo tipo ci accorgeremmo della “pesantezza” dell’esecuzione del filmato Flash.
Il numero minimo di argomenti da passare a questo metodo è 2: il nome della funzione da ripetere e il numero di millisecondi da attendere tra un’esecuzione e la successiva.
In questo esempio posizioneremo la barra e lo script sul fotogramma 1 e riempiremo il fotogramma 2 con dei contenuti finti (importa un po’ di immagini sullo Stage, tanto per dare un peso al file e vedere il preload in funzione).
Lo script che devi inserire è il seguente:
_root.stop();
function preload() {
car = _root.getBytesLoaded();
tot = _root.getBytesTotal();
per = car/tot*100;
_root.barra._xscale = per;
if (per == 100) {
_root.gotoAndStop(2);
clearInterval(preloadInterval);
}
}
var preloadInterval = setInterval(preload, 10);
Al primo rigo c’è uno stop per fermare l’animazione su questo fotogramma fino a che non finiamo di scaricare tutto.
Al secondo rigo comincia la funzione, che ho chiamato “preload”.
I quattro righi successivi li conosciamo già.
La condizione “if” controlla che il filmato sia caricato (se il valore di per è uguale a 100) e rimanda al fotogramma 2, inoltre ferma il ciclo.
L’ultimo rigo imposta il ciclo per fare in modo che la stessa funzione sia ripetuta 100 volte al secondo (ogni 10 millisecondi).
Secondo tentativo: preload con un ciclio di fotogrammi
Per questo esperimento abbiamo bisogno di quattro fotogrammi e due livelli.
Su un livello posizioniamo la nostra barra, sul fotogramma 1 , i fotogrammi 2 e 3 saranno semplici (cioé non saranno fotogrammi chiave), il quarto fotogramma conterrà delle immagini per appesantire l’swf (o i tuoi veri contenuti).
Sull’altro livello creiamo due fotogrammi chiave, il terzo e il quarto, non inseriremo nessuna grafica, solo azioni.
Sul terzo fotogramma vanno queste azioni:
car = _root.getBytesLoaded();
tot = _root.getBytesTotal();
per = car/tot*100;
_root.barra._xscale = per;
if (per < 100) {
_root.gotoAndPlay(2);
}
Sul quarto fotogramma va solo uno stop().
Questo ciclo si basa sul fatto che rimandando l’animazione al fotogramma 2 questa tornerà al fotogramma 3 e ripeterà le azioni. La ripetizione del ciclo si ferma quando “per” smette di essere minore di zero.
Il motivo per cui il primo fotogramma non è più utilizzato è che se questo ciclo ci rimandasse ad un fotogramma chiave della barra vedremmo la barra larga alle dimensioni reali.
Quindi in un ciclo tra il fotogramma 1 e il 2 anziché tra il 3 e il 2 non funzionerebbe il ridimensionamento della barra.
Terzo tentativo: preload con onEnterFrame
Ho lasciato per ultimo questo metodo perché è quello che ti consiglio, un ciclo di questo tipo non ha bisogno di fotogrammi chiave e non ha bisogno di essere fermato, infatti quando la barra non esiste più (perché magari ci siamo spostati su un fotogramma in cui la barra non c’è), anche il ciclo smette di esistere.
Ci servono due fotogrammi, sul secondo dobbiamo, al solito, inserire qualcosa per appesantire il filmato, il primo fotogramma ospiterà la barra e lo script per il preload.
Inserisci questo script sul fotogramma:
_root.stop();
barra.onEnterFrame = function() {
car = _root.getBytesLoaded();
tot = _root.getBytesTotal();
per = car/tot*100;
_root.barra._xscale = per;
if (per == 100) {
_root.gotoAndStop(2);
}
};
Il primo rigo è uno stop semplice.
onEnterFrame fa in modo che lo script si ripeta fino a che il MovieClip chiamato “barra” è presente sullo Stage.
Seguono le quattro righe magiche del preload e, infine, la condizione che ci permette di spostarci di fotogramma se tutto quanto è stato caricato.
Ultima cosa:
se la tua barra si allarga dal centro verso i lati anziché da sinistra a destra è perché il suo “centro” (punto di registrazione) deve trovarsi all’estremità sinistra, infatti quando ridimensioniamo, ruotiamo o spostiamo un oggetto tramite script usiamo sempre il punto 0,0 dei quell’oggetto (cioé della sua area di disegno interna) come punto di riferimento.
Ciao e buon lavoro.

Di: dj alessio candido | 26/09/2020 18:48:16


Spiegazione veramente Ben Fatta
avevo bisogno di chiarimenti su setInterval
e qui le ho trovati, Complimenti ancora!!!

Di: Kerotan83 | 26/09/2020 18:48:16