Creare un precaricamento Flash basato sulle sezioni circolari

27 Novembre 2012

Nel mio vecchio blog (attualmente offline), ho pubblicato alcuni tutorial legati allo sviluppo web e al multimedia. In molto casi si tratta di argomenti datati che non avrebbe senso riproporre. Tuttavia ci sono anche tutorial che hanno ancora oggi una loro utilità concreta. Per cui ho deciso di selezionare quelli più attuali, rimaneggiarli e riproporli in questa nuova sede.
Il primo articolo che ho aggiornato, riguarda la procedura per creare un precaricamento Flash basato sulle sezioni circolari. Per intenderci, si tratta di rappresentare la quantità di byte caricati con una visualizzazione ispirata alle torte di excel. I file di esempio sono scaricabili a questo indirizzo e presentano un file Flash che, tramite dei pulsanti, ha il compito di caricare quattro filmati esterni.

Come funziona l’esempio

Ognuno dei file SWF contiene una foto molto pesante in termini di kb.
Se pubblichiamo sul web o lanciamo il filmato attivando la simulazione streaming, ogni volta che clicchiamo su uno dei pulsanti possiamo osservare il precaricamento in azione.
Ad ogni clic del mouse, tramite un oggetto Tween, viene animato un clip rettangolare, che ha il compito di coprire eventuali SWF già caricati. Si tratta di un effetto scenico necessario per evitare uno stacco troppo netto tra l’apparizione del nuovo file e lo scaricamento di quello vecchio. Esistono molti trucchi per affrontare questo problema visivo, nel mio caso ho optato per il classico “effetto sipario”:

l’utente clicca sul pulsante per caricare,
scorre la tendina che copre eventuali conteniti caricati,
parte il precaricamento,
al termine del precaricamento appatr il nuovo contenuto.

Poiché al primo avvio non ci sono foto, inizialmente il rettangolo si limita a coprire lo sfondo. Una volta terminato il movimento innescato dall’oggetto Tween, parte il precaricamento del file SWF.
Grazie ad un insieme di metodi che descriveremo più avanti, al posto della solita barra di caricamento, appare una sezione circolare, che cresce proporzionalmente al numero di bytes caricati. Per cui, il 45% dei bytes caricati corrisponderà ad un settore circolare di 90 gradi. Il 50% corrisponderà a 180 gradi, e così via. Prima di analizzare il codice, spendo due parole su come ho organizzato il documento Flash.
Sullo stage un clip filmato che funge da contenitore (riciclando il vecchio trucco usato in Flash per posizionare manualmente contenuti esterni). Nell’immagine che segue, viene mostrata la linea temporale del file principale.fla:

Nel livello contenuto, si trova un clip il cui nome di istanza è bersaglio. Questo clip contiene a sua volta un clip denominato segno, costituito da un disegno a forma di mirino. Per decidere la profondità del contenuto esterno, bisogna semplicemente spostare il clip filmato nel livello desiderato (più in basso o più in alto). Avrei potuto gestire questo aspetto tramite codice, ma la soluzione sarebbe stata poco flessibile, e quindi soggetta a cambiamenti da attuare in base alle necessità progettuali. Con questa soluzione, si può collocare manualmente il target del filmato esterno, sotto una pulsantiera oppure sopra una foto senza modificare la classe ActionScript. Analogo discorso per le coordinate x e y. Nell’esempio il clip bersaglio, è collocato in corrispondenza dell’origine dello stage. Siccome i contenuti esterni sono filmati dalle dimensioni identiche a quelle del filmato principale, al caricamento si otterrà una centratura automatica. Tuttavia, si possono cambiare le coordinate del filmato esterno cambiando la posizione del clip bersaglio.
Lo scopo degli altri livelli è abbastanza intuitivo. Nel livello sfondo, si trova un semplice rettangolo colorato con un gradiente. Nel livello effetto si trova un clip rettangolare denominato movimento, che sarà il clip manipolato tramite la classe Tween. Infine, nel livello più alto, si trovano i pulsanti che attiveranno il caricamento.

La classe documento

Il codice della classe documento, per pura comodità (o pigrizia), è strutturato in un blocco unico. Ma volendo, si potrebbe scomporre in più classi. Ecco quindi la prima parte della classe CaricamentoEsterno.as:

package{
import flash.display.*;
import flash.text.TextField;
import flash.text.TextFieldType;
import flash.text.TextFormat;
import flash.text.TextFieldAutoSize;
import flash.events.*;
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.Regular;
import flash.display.Loader;
import flash.net.URLRequest;
public class CaricaEsterno extends MovieClip{
public var gradi:Number=0;
public var raggio:Number;
public var torta_x:Number;
public var torta_y:Number;
public var centro:Sprite=new Sprite();
public var cerchio:Shape=new Shape();
public var linea_r:Shape=new Shape();
public var leggi:TextField=new TextField();
public var stile:TextFormat=new TextFormat();
var mioLoader:Loader=new Loader();
var mioURL:URLRequest;
var stringaURL:String;
var t1:Tween;
var file_esterni:Object={p1:”esterno1.swf”, p2:”esterno2.swf”,
p3:”esterno3.swf”,p4:”esterno4.swf”};
function CaricaEsterno(){
bersaglio.segno.visible=false;
p1.addEventListener(MouseEvent.CLICK,copri);
p2.addEventListener(MouseEvent.CLICK,copri);
p3.addEventListener(MouseEvent.CLICK,copri);
p4.addEventListener(MouseEvent.CLICK,copri);
torta(40,200,200);
prepara();
testo();
}

Nella prima parte di codice, vengono importati i pacchetti necessari alla nostra applicazione.
Dopo la dichiarazione della classe, sono definite una serie di variabili che ci saranno utili per scrivere i vari metodi. In particolare la variabile file_esterni, ha il compito di associare ad ogni pulsante una proprietà che specifica l’url da caricare.
Nella funzione costruttore viene reso invisibile il clip segno, in modo da nascondere il disegno a forma di mirino, e vengono associati gli eventi ai vari pulsanti.
Sempre nel costruttore, sono chiamati tre metodi: torta(), prepara() e testo(). Il primo metodo, tramite tre parametri definisce la grandezza e le dimensioni della sezione circolare. Nella fattispecie: viene definito un raggio di 40 pixel, e le coordinate x e y pari a 200 pixel. Il metodo prepara(), disegna gli elementi grafici relativi al grafico torta. Infine il metodo testo(), regola le caratteristiche del campo dinamico. Nel blocco successivo vengono riportati i codici relativi ai tre metodi.

public function prepara():void{
centro.x = torta_x;
centro.y = torta_y;
this.addChild(centro);
cerchio.graphics.drawCircle(0,0,raggio);
cerchio.x = 0;
cerchio.y = 0;
this.centro.addChild(cerchio);
linea_r.graphics.moveTo(0,0);
linea_r.graphics.lineTo(raggio,0);
linea_r.x = 0;
linea_r.y = 0;
this.centro.addChild(linea_r);
}
public function testo():void{
leggi.type=TextFieldType.DYNAMIC;
leggi.autoSize=TextFieldAutoSize.CENTER;
leggi.text=”0 %”;
stile.font=”Verdana”;
stile.color=0xffffff;
stile.bold=true;
stile.size=12;
leggi.defaultTextFormat=stile;
this.addChild(leggi);
leggi.x=torta_x-(leggi.width/2);
leggi.y=torta_y-(leggi.height/2);
leggi.visible=false;
}
public function torta(r:Number,tx:Number,ty:Number):void{
raggio=r;
torta_x=tx;
torta_y=ty;
}

Come si può dedurre osservando il codice, per cambiare le caratteristiche del campo di testo, e sufficiente manipolare le proprietà delle classi TextField e TextFormat. Passiamo ai due metodi successivi:

public function copri(evento:MouseEvent):void{
movimento.x=0;
t1=new Tween(movimento,”width”,Regular.easeInOut,movimento.width,400,2,true);
stringaURL=file_esterni[evento.target.name];
// istruzione da aggiungere per evitare problemi di cache
// funziona solo online e non in locale
//stringaURL+=”?miavar=”+new Date().getTime();
t1.addEventListener(TweenEvent.MOTION_FINISH,carica)
}
public function carica(evento:TweenEvent):void{
t1.removeEventListener(TweenEvent.MOTION_FINISH,carica);
mioURL=new URLRequest(stringaURL);
mioLoader.load(mioURL);
mioLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,caricato);
mioLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,avanzamento);
mioLoader.contentLoaderInfo.addEventListener(Event.OPEN,partenza);
mioLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,errore);
}

Il metodo copri(), attiva un Tween prima del precaricamento. Il clip filmato denominato movimento, viene posizionato sul lato sinistro dello stage e aumentato in larghezza: la proprietà width cresce dal suo valore iniziale fino a 400 pixel. Al termine del Tween viene chiamato il metodo carica(), il quale ha il compito di caricare il file esterno ed associare una serie di funzioni listener all’istanza della classe mioLoader. Vediamole di seguito nell’ultimo blocco di codice:

public function caricato(evento:Event):void{
bersaglio.addChild(mioLoader);
mioLoader.removeEventListener(Event.COMPLETE,caricato);
this.leggi.text=””;
linea_r.graphics.clear();
movimento.width=2;
movimento.x=-80;
}
public function avanzamento(evento:ProgressEvent):void{
var caricati:Number=evento.bytesLoaded;
var totali:Number=evento.bytesTotal;
var percentuale:Number=Math.round(caricati/totali*100);
gradi=(percentuale*360)/100;
aggiorna(gradi);
this.leggi.text=String(percentuale+ ” %”);
}
public function partenza(evento:Event):void{
testo();
leggi.visible=true;
}
public function errore(evento:IOErrorEvent):void{
leggi.text=”si è verificato un errore.”;
}
public function aggiorna(n:Number):void{
var i:int;
linea_r.graphics.clear();
linea_r.graphics.moveTo(0,0);
linea_r.graphics.beginFill(0x224488,1);
for(i=0; i linea_r.graphics.lineTo(raggio*Math.cos(i*Math.PI/180), raggio*Math.sin(i*Math.PI/180));
}
linea_r.graphics.lineTo(0,0);
linea_r.graphics.endFill();
}
}
}

Il metodo caricato(), che viene eseguito al caricamento, ripristina le condizioni iniziali in previsione di altri caricamenti. Il metodo avanzamento(), che viene eseguito al verificarsi dell’evento ProgressEvent.PROGRESS, rileva i bytes caricati. Il valore calcolato viene poi rappresentato in percentuale e in gradi. Proprio la variabile gradi, diventa il parametro del metodo aggiorna(). Quest’ultimo, ha il compito di disegnare una serie di raggi, in modo da creare delle sezioni circolari corrispondenti alla percentuale di bytes caricati. Infine, il metodo partenza(), attiva il campo di testo dinamico, mentre il metodo errore(), verifica eventuali problemi di caricamento.
Ovviamente, la soluzione postata è suscettibile di miglioramenti. Oltre ad una migliore organizzazione del codice, si potrebbero applicare dei filtri al grafico torta, oppure animarlo una volta avvento caricamento.