5. Testo Dinamico

In questo capitolo analizzeremo il codice dell'ultima classe del pacchetto rsinfo.dtext, la classe TestoDinamico.

Questa sarà l'unica classe che istanzieremo nei nostri sorgenti, è quindi fondamentale capirne il funzionamento per poterne effettuare eventuali personalizzazioni.

Prima di tutto vediamo le librerie da importare necessarie :

  • import Event
    Utilizzata esclusivamente per inviare gli eventi di TDinamicoEvent nel flusso degli eventi.
  • import TextFormat
    Utilizzata nella classe per memorizzare la formattazione predefinita per tutte le lettere.
  • import Sprite
    Utilizzata per l'ereditarietà, poichè essendo la stessa Sprite derivata dalle classi DisplayObjectContainer e EventDispatcher, ci fornisce la struttura adatta al nostro scopo.
  • import Timer e TimerEvent
    Utilizzate per temporizzare la comparsa delle lettere del testo aldilà dell'animazione conferitogli.
  • import Lettera, Animazione e TDinamicoEvent
    Classi del pacchetto rsinfo.dtext illustrate singolarmente nei capitoli precedenti.

Di seguito analizziamo rapidamente gli attributi della classe.
Ho reso tutti gli attributi privati, mettendo a disposizione alcuni attributi pseudo-pubblici attraverso i metodi set e get.

  • box:Array
    Un array di istanze della classe Lettera.
  • stringa:String
    Conterrà il testo da animare in formato stringa tradizionale.
  • format:TextFormat
    Terrà in memoria la formattazione desiderata per le istanze di Lettera.
  • time:uint
    Tempo in millisecondi che stabilisce l'intervallo di apparizione fra una lettera e la seguente.
  • timer:Timer
    Istanza della classe Timer usata per temporizzare l'apparizione fra una lettera e la seguente.
  • settings:Boolean
    Flag per stabilire se è stata configurata un'animazione o se le lettere devono semplicemente apparire una dopo l'altra secondo l'intervallo time.
  • prop:String
    Stabilisce quale proprietà di Lettera deve essere considerata per un'eventuale animazione.
    Ricordo che Lettera è comunque un DisplayObject essendo derivata dalla classe Sprite, di conseguenza possiede tutti gli attributi classici come le coordinate x e y, alpha, width, height ecc...
    Se viene quindi specificata la x, l'animazione consisterà in uno spostamento della lettera da sinistra a destra o viceversa.
  • func:Function
    Indica la funzione di andamento utilizzata per implementare l'animazione di ogni lettera.
    Le funzioni di andamento sono contenute nelle classi del pacchetto fl.transitions.easing o fl.motion.easing.
  • interval:Number
    Intervallo utilizzato per calcolare i valori begin e finish dalla classe personalizzata Animazione.
  • duration:Number
    Durata in secondi dell'animazione di ogni lettera.

A seguire la lista dei metodi della classe con relativo sorgente e spiegazione.
Salterò pertanto il costruttore della classe poichè non fa altro che inizializzare alcuni attributi.


  • private function reset():void
    Azzera l'array che contiene tutte le istanze di Lettera (quindi box) e la stringa che rappresenta il testo da animare.
    Prima dell'azzeramento controlla la lunghezza dell'array e in caso in cui siano presenti degli elementi procede eliminandoli dalla lista di visualizzazione attraverso removeChild().
    private function reset():void
    {
    	if (this.box.length > 0)
    		for (var i:uint = 0; i < this.box.length; i++)
    			this.removeChild(this.box[i]);
    
    	this.box = new Array();
    	this.stringa = new String();
    }

  • public function get testo():String
    Funzione get che restituisce la stringa di testo da animare.
    public function get testo():String
    { return this.stringa; }

  • public function set testo(str:String):void
    Funzione set che inizializza gli attributi della classe istanziando un elemento dell'array per ogni lettera del testo da animare, calcolando automaticamente le coordinate dell'asse x di ogni lettera per evitare che si sovrappongano.
    public function set testo(str:String):void
    {
    	this.reset();
    	this.stringa = str;
    
    	for (var i:uint = 0; i < str.length; i++)
    	{
    		this.box[i] = new Lettera(str.charAt(i), this.format);
    
    		// Dalla seconda lettera in poi aggiungo alla x della lettera corrente la larghezza della precedente
    		if (i > 0) this.box[i].x = this.box[i - 1].x + this.box[i - 1].width;
    	}
    }

  • public function set defaultTextFormat(format:TextFormat):void
    Funzione set che memorizza la formattazione di default per tutte le lettere del testo.
    public function set defaultTextFormat(format:TextFormat):void
    { this.format = format; }

  • public function set intervallo(itv:uint):void
    Funzione set che stabilisce il tempo in millisecondi che deve intercorrere fra l'apparizione di una lettera e la seguente.
    public function set intervallo(itv:uint):void
    {
    	if (itv > 0) this.time = itv;
    	else this.time = 0;
    }

  • private function timerHandler(evt:TimerEvent):void
    Ascoltatore che viene richiamato tante volte quante il numero di lettere che compongono il testo da animare, ogni intervallo di tempo come stabilito dalla funzione "set intervallo", aggiungendo le lettere alla lista di visualizzazione e facendo partire subito dopo la relativa animazione programmata.
    Questo ascoltatore inoltre solleva l'evento TDinamicoEvent.ANI_STARTED.
    private function timerHandler(evt:TimerEvent):void
    {
    	// Se è la prima chiamata al metodo allora invia l'evento di inizio animazione
    	if (evt.currentTarget.currentCount == 1)
    		this.dispatchEvent(new Event(TDinamicoEvent.ANI_STARTED));
    
    	// Aggiunge la lettera alla lista di visualizzazione
    	this.addChild(this.box[evt.currentTarget.currentCount - 1]);
    
    	// Se è stata configurata un'animazione crea un'istanza temporanea per interpolare la lettera
    	if (this.settings)
    	{
    		var ani:Animazione = new Animazione(this.box[evt.currentTarget.currentCount - 1],
    		this.prop, this.func, this.interval, this.duration);
    		ani.anima();
    	}
    
    	/* Se è l'ultima chiamata al metodo, aspetta la durata dell'animazione ossia
    	"this.duration" e poi procede alla chiamata di "endTimer" che solleverà a sua
    	volta l'evento di fine animazione */
    	if (evt.currentTarget.currentCount == this.box.length)
    	{
    		var endTimer:Timer = new Timer(this.duration * 1000, 1);
    		endTimer.addEventListener(TimerEvent.TIMER, this.endHandler);
    		endTimer.start();
    	}
    }

  • private function endHandler(evt:TimerEvent):void
    Utilizzato dall'ascoltatore sopracitato timerHandler per sollevare l'evento di fine animazione TDinamicoEvent.ANI_COMPLETE.
    private function endHandler(evt:TimerEvent):void
    { this.dispatchEvent(new Event(TDinamicoEvent.ANI_COMPLETE)); }

  • public function start():void
    Inizia il processo di animazione attraverso l'ascoltatore timerHandler.
    public function start():void
    {
    	// Da inizio all'animazione avviando il timer gestito da "timerHandler"
    	this.timer = new Timer(this.time, this.box.length);
    	this.timer.addEventListener(TimerEvent.TIMER, this.timerHandler);
    	this.timer.start();
    }

  • public function animazione(prop:String, func:Function, itv:Number, dur:Number):void
    Metodo che consente di configurare l'animazione desiderata memorizzandola negli attributi della classe.
    public function animazione(prop:String, func:Function, itv:Number, dur:Number):void
    {
    	this.settings = true;
    	this.prop = prop;
    	this.func = func;
    	this.interval = itv;
    	this.duration = dur;
    }


In allegato il sorgente della classe TestoDinamico.

AllegatoDimensione
TestoDinamico.as2.9 KB