Creare un preloading in Actionscript 3 con Flash CS3

Il preloading è sempre stato uno degli elementi tipici di applicativi Flash.
Nelle versioni precedenti alla CS3, quindi ad Actionscript 3, era più facile creare preloader.
Oggi, anche questo tipico esempio, la situazione è cambiata. Ma vediamo come.
Anzitutto inziamo col dire che per il nostro esempio, caricheremo un documento (abbiamo infatti bisogno di qualcosa da caricare per vedere il download!) e una piccola animazione accompegnerà il caricamento, indicato sotto forma di percentuale (…1%, 10%, 14%, ecc…).

Anzitutto consideriamo il docuemnto da caricare.
Ad esempio una foto. Qui potrete scaricare la foto. Scaricatela sul vostro computer come “foto.jpg”.

Quindi apriamo un nuovo documento in Flash CS3 con Actionscript 3 ed inseriamo sullo stage un campo di testo dinamico di nome “perc_txt“.

Cominciamo quindi a scrivere il codice necessario.
Anzitutto chiediamo a Flash di caricare il nostro documento.

var urlReq:URLRequest=new URLRequest(“foto.jpg”);
var loader:Loader=new Loader();
var ind:int;
var totBytes:int;

Ovviamente abbiamo caricato la foto all’interno dell’istanza Loader (riguardo al caricamento di foto/swf esterni leggi questo post)

Le due variabili di tipo “int” (integer, cioè numeri interi), si segneranno rispettivamente il valore di download e la seconda i byte totali della foto da caricare.

loader.load(urlReq);
addChild(loader);

Ora abbiamo caricato la foto. Non resta che gestire caricamento e completamento del caricamento.

function myProgress(e:ProgressEvent)
{
totBytes=e.bytesTotal;
ind=(e.bytesLoaded / e.bytesTotal) * 100;
perc_txt.text=String(ind)+” %”;
}

Ecco qui la funzione. Ovviamente è legata alla classe “ProgressEvent”, che gestisce appunto tali eventi.
Il resto non è altro che un mero calcolo della serva: byte caricati diviso byte totali moltiplicato 100. In ultimo li ritrascriviamo sul campo di testo dinamico aggiungendo il simbolo di %.

function finito(e:Event)
{
trace(“Ho finito di caricare! Bytes totali caricati: “+totBytes+” byte”);
}

Questa invece è la funzione che richiamo quando abbiamo finito di caricare! Ovviamente voi inserite qualcos’altro! :)

Non restano che i listener:

loader.loaderInfo.addEventListener(ProgressEvent.PROGRESS, myProgress);
loader.loaderInfo.addEventListener(Event.COMPLETE, finito);

Come vedete i listener sono ovviamente legati al loader (istanza di Loader). Tuttavia si rifanno alla proprietà “loaderInfo” che gestisce appunto i caricamenti di materiale esterno!

La riuscita ora del tutorial dipende molto dal peso della foto (non eccessivo in verità).
Se avete una foto o un swf che pesa di più basta cambiare il valore della variabile URLRequest!

Ricordate soprattutto che il risultato del caricamento finale è espresso in byte!

Ecco il codice completo:

var urlReq:URLRequest=new URLRequest(“foto.jpg”);
var loader:Loader=new Loader();
var ind:int;
var totBytes:int;

loader.load(urlReq);
addChild(loader);

function myProgress(e:ProgressEvent)
{
totBytes=e.bytesTotal;
ind=(e.bytesLoaded / e.bytesTotal) * 100;
perc_txt.text=String(ind)+” %”;
}

function finito(e:Event)
{
trace(“Ho finito di caricare! Bytes totali caricati: “+totBytes+” byte”);
}

loader.loaderInfo.addEventListener(ProgressEvent.PROGRESS, myProgress);
loader.loaderInfo.addEventListener(Event.COMPLETE, finito);



Lascia un Commento

jP0b

Please type the text above: