
ottobre 3, 2009 | 0 Commenti
In questo primo periodo di vita del blog sto cercando di creare un parco di articoli in grado di soddisfare quelle che sono le esigenze di base di chi non conosce Flash o di chi si è appena affacciato a questo mondo. Oggi vorrei continuare questo mio percorso con un altra tecnica che prima o poi diventa indispensabile nel design e nella progettazione di applicazioni web Flash based.
L’argomento di cui voglio parlare è il preloader!
A COSA SERVE UN PRELOADER?
Il preloader è fondamentale per il caricamento del vostro sito Flash. Solitamente è rappresentato da una barra o da un numero in percentuale che indica lo stato di caricamento del sito da parte del browser del visitatore. Immaginate se non ci fosse; il visitatore si troverebbe davanti una schermata vuota e non saprebbe cosa sta succendendo. E questo vi assicuro che è la tecnica migliore se volete che giri i tacchi i se ne vada.
VEDIAMO COME FARE
Per prima cosa create il vostro solito file flash in AS3 e salvatelo in una cartella da voi scelta. Create poi un file .as e salvatelo nella medesima cartella con il nome di DocumentClass. Copiate il nome della document class nel campo apposito e verificate la sua corretta posizione cliccando sul simbolo della matita.
IMPOSTAZIONE DELLA DOCUMENT CLASS
Nella document class scriviamo come al solito il codice base di una document class che si rispetti:
package { import flash.display.MovieClip; public class DocumentClass extends MovieClip { public function DocumentClass() { } } }
VEDIAMO COME FUNZIONA
La document class che trovate nei sorgenti è più che commentata e la riporto qui di seguito:
package { import flash.display.MovieClip; import flash.events.*;//import di tutto il package events import flash.net.URLRequest;//questa classe è adibita alla creazione di un request per un certo indirizzo import flash.display.Loader;//questa è la classe incaricata di caricare l'immagine public class DocumentClass extends MovieClip { //creo una variabile della classe URLRequest per poi assegnarle l'indirizzo dell'immagine private var urlReq:URLRequest; //creo la variabile della classe Loader private var loader:Loader; public function DocumentClass() { urlReq = new URLRequest("image.jpg");//come anticipato creo un request per questo indirizzo. loader = new Loader;//istanzio il loader loader.load(urlReq);//indico al loader cosa caricare tramite la variabile urlReq //nella prossima riga registro un listener incaricato di monitorare lo stato //di caricamento dell'immagine. Non fa altro che richiamare continuamente la funzione checkProg loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, checkProg); //in questa invece controllo quando viene completato il caricamento. Nel //caso il caricamento fosse completato richiama la funzione "completo" loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completo); } private function checkProg(e:ProgressEvent):void{ //ogni volta viene richiamta questa funzione, viene creata una variabile di tipo intero //calcolata in base all'attuale stato di caricamento alla dimensione totale del file var percent:int = (e.target.bytesLoaded / e.target.bytesTotal) * 100; //quindi viene assegnato il valore al campo di testo dinamico percent_txt.text=percent.toString() + "%"; } private function completo(e:Event):void{ //aggiungo allos stage il loader con il suo contenuto addChild(loader); //queste righe di codice servono ad adattare il loader alle dimensioni //dello stage, essendo la foto molto grande. loader.width = stage.stageWidth; loader.height = stage.stageHeight; } } }
Se avete qualche dubbio su come funziona il tutto sono a vostra disposizione. In ogni caso sarebbe consigliabile postare un commento qui sotto in maniera che sia fruibile da tutti.
Alla prossima!
Autore:

Roberto Cinetto - Web & Graphic Designer
Giovane designer di Padova Roberto è sempre stato appassionato del mondo informatico e come tale è sempre alla ricerca di nuove ispirazioni e di nuove tecnologie da esplorare. Da molti anni è anche chitarrista e amante della musica in generale. Il suo sogno è di riuscire un giorno a creare una agenzia multimediale competente in web, grafica/video e recording/mixing, naturalmente tramite la collaborazione con svariati professionisti.




















