Come tutti ben sappiamo, una cosa molto importante è far sapere all' utente che l' SWF della nostra applicazione è in fase di caricamento. Soprattutto per SWF di un certo peso sarebbe meglio far conoscere all' utente anche le percentuali/tempistiche della fase di caricamento.
Con questo tutorial vorrei riuscire a spiegare al meglio ( soprattutto a chi Actionscript fatica a digerirlo ) come creare un buon preloader.
Rimane però fondamentale l' uso e la conoscenza di un livello discreto di Actionscript 3.0 .
Questo articolo è una versione aggiornata dell' articolo del 9 Maggio 2007 che potete visionare quì: caricare un SWF esterno con Flash CS3.
Vedi anche:
Preloader per principianti
Preloader della timeline
Proseguo col tutorial...
Con Actionscript 2.0 si potevano monitorare i bytes caricati utilizzando i metodi getBytesLoaded e getBytesTotal della Classe MovieClip. In quel caso si potevano utilizzare i metodi citati sulla Timeline (che non è altro che un' istanza della classe MovieClip) per monitorare il nostro SWF in fase di caricamento da parte dell' utenza.
Con Actionscript 3.0 i due metodi sono stati spostati dalla Classe MovieClip alla classe URLLoader per cui se provassimo ad utilizzare i metodi sulla Timeline, Flash avviserebbe con un errore. Quindi diciamo subito che attualmente un ottimo metodo per un preloader è utilizzare un classe personalizzata che lavora con le classi Loader e URLLoader.
Supponiamo di aver creato il nostro SWF principale e che quindi è pronto per essere pubblicato sul server. Supponiamo inolte che l' SWF si chiami ' index.swf ' . Ci serve un altro SWF che chiameremo 'preloader' che carica appunto index.SWF, ne monitorizza i bytes caricati e visualizza all' utente le percentuali.
Creazione preloader.fla:
- creo un FLA che salvo con nome ' preloader.fla ' nella stessa cartella di index.swf .
- all' interno del FLA creo le grafiche per un semplice preloader e le converto in MovieClip con nome ' mc_preloader '
- trascino mc_preloader dalla libreria allo stage e gli assegno nome istanza: ' preloader_mc '.
- clicco col destro su mc_preloader che si trova in libreria e si apre un menù, seleziono proprietà e si apre una finestra.
- attivo l' opzione ' esporta per actionscript' e nel campo ' Class ' ( nella versione Flash in italiano credo che sia Classe ) scrivo: ' Preloader ' . In questo modo assegno una Classe che si chiama ' Preloader ' ( che sto per andare a scrivere ) a preloader_mc che abbiamo sullo stage.
Creazione della classe Preloader:
- creo un file AS che salvo con nome ' Preloader.as ' così strutturato:
Code:
package
{
import flash.display.MovieClip;
import flash.text.TextField;
import flash.events.Event;
public class Preloader extends MovieClip
{
public function Preloader()
{
visible=false;
}
public function run():void
{
stage.frameRate=31;
visible=true;
x=stage.stageWidth/2-100;
y=stage.stageHeight/2-this.height/2;
addEventListener(Event.ENTER_FRAME,go);
}
private function go(e:Event):void
{
lines_0_mc.x--;
lines_1_mc.x--;
if(lines_0_mc.x<=-lines_0_mc.width)
lines_0_mc.x=lines_1_mc.x+lines_1_mc.width-3;
if(lines_1_mc.x<=-lines_1_mc.width)
lines_1_mc.x=lines_0_mc.x+lines_0_mc.width-3;
}
public function stopRun():void
{
this.removeEventListener(Event.ENTER_FRAME,go);
this.addEventListener(Event.ENTER_FRAME,scaleDown);
}
private function scaleDown(e:Event):void
{
e.target.alpha-=.05;
if(e.target.alpha<=0)
{
e.target.alpha=0;
e.target.removeEventListener(Event.ENTER_FRAME,scaleDown);
visible=false;
}
}
public function mostraProgresso(n:Number):void
{
progress_txt.text=n.toString()+' %';
}
}
}
Creazione della classe Loading:
- creo un file AS che salvo con nome ' Loading.as ' così strutturato:
Code:
package
{
import flash.display.MovieClip;
import flash.display.Loader;
import flash.events.*;
import flash.net.URLRequest;
public class Loading extends MovieClip
{
private var url:String;
private var loader:Loader;
public function Loading()
{
init();
}
private function init():void
{
url='index.swf';
var request:URLRequest=new URLRequest(url);
loader=new Loader();
initListeners(loader.contentLoaderInfo);
loader.load(request);
}
private function initListeners(dispatcher:IEventDispatcher):void
{
dispatcher.addEventListener(Event.OPEN,inizia);
dispatcher.addEventListener(ProgressEvent.PROGRESS,inCaricamento);
dispatcher.addEventListener(Event.COMPLETE,completato);
}
private function inizia(event:Event):void
{
preloader_mc.run();
}
private function inCaricamento(event:ProgressEvent):void
{
var percentuale:uint=(event.bytesLoaded/event.bytesTotal)*100;
preloader_mc.mostraProgresso(percentuale);
}
private function completato(event:Event):void
{
preloader_mc.stopRun();
addChild(loader);
}
}
}
Ora torno su preloader.fla e nel pannello proprietà assegno la Document Class scrivendo Loading .
Analizziamo le classi e il codice Actionscript:
quando l' SWF viene lanciato, dato che la Document Class è Loading.as, Flash eseguirà prima il codice implementato in tale classe.
Quindi viene caricato l' SWF con la classe Loader e durante gli eventi di
- inizio caricamento:
private function inizia(event:Event):void
- durante il caricamento:
private function inCaricamento(event:ProgressEvent):void
-e alla fine del caricamento:
private function completato(event:Event):void
possiamo dire a Flash di eseguire del codice.
Il codice da eseguire non è altro che chiamare i metodi della classe Preloader.as che abbiamo costruito:
quando inizia il caricamento chiamiamo il metodo run di preloader
preloader_mc.run();
durante il caricamento chiamiamo il metodo mostraProgresso di Preloader passandogli un valore numerico che è dato dal rislultato della divisione tra i bytes caricati e quelli totali moltiplicato per 100
var percentuale:uint=(event.bytesLoaded/event.bytesTotal)*100;
preloader_mc.mostraProgresso(percentuale);
quando il caricamento è finito (quindi index.swf è stato completamente caricato da preloader.swf) :
preloader_mc.stopRun();
e aggiungiamo index.swf, che adesso è una MovieClip all' interno di preloader.swf, al Display Object altrimenti non sarebbe visibile:
addChild(loader);
Allego i files sorgente:
19-09-07, 17:21
come mai hanno complicato cosi tanto l'as3? io con as2 un preloader lo faccio scrivendo al messimo 6 righe di codice sulla time line.
Linear Mode
