icona rss
  • Vai alla sezione Web & Graphic Design
  • Vai alla sezione Tutorial
  • Vai alla sezione Audio
  • Vai alla sezione Varie

ottobre 3, 2009 | 0 Commenti

Post Image
Scarica i sorgenti
Guarda la demo

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!

Ti è piaciuto? Condividi!

  • email
  • Facebook
  • LinkedIn
  • MySpace
  • RSS
  • Twitter
  • Technorati
  • Google Bookmarks
  • StumbleUpon
  • del.icio.us
  • Digg
  • FriendFeed

Articoli Correlati

  1. Tweener! Una classe per creare movimento in Flash
  2. I cookie in Flash? SharedObject!!

Autore:

Roberto Cinetto

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.

Scrivi un commento

(obbligatorio)

(obbligatorio)