Flash Actionscript 3 "Tricks" Parte 1

Parte 1: Gestione multipla di DisplayObject

Inserito il 25-05-2008

Premessa: con l'avvento di Actionscript 3 alcuni trucchi più o meno utilizzati nelle vecchie versioni del linguaggio, nella nuova versione risultano più difficili o impossibili da applicare. Ciò non toglie che sia possibile gestire le stesse situazioni con alternative altrettanto valide, e delle volte ancora più ottimizzate e semplici da gestire. Con la serie di articoli che riportano il titolo Flash Actionscript 3 "Tricks", cercherò, di volta in volta, di indicare un possibile workaround per utilizzare i vecchi metodi anche nel nuovo linguaggio.

In questa parte trattiamo uno dei classici metodi utilizzati per gestire una serie di pulsanti o movieclip che hanno azioni e proprietà più o meno uguali, e che quindi vengono impostati dentro ad un ciclo per risparmiare tempo e righe di codice, che altrimenti risulterebbero uguali per ogni pulsante/movieclip.

Prendiamo in considerazione questo codice AS2:

// creo un ciclo per 10 pulsanti che attacco dalla libreria
for (var i=0; i<10; i++) {
	// attacco a _root un clip per ogni indice del ciclo
	var mc = _root.attachMovie("pulsante", "puls"+i, i);
	// imposto la _y per ogni movieclip
	mc._y = i*50;
	// assegno l'indice parziale ad ogni movieclip
	mc.i = i;
	// imposto la funzione onPress che, se eseguita, riporta l'indice del clip cliccato
	mc.onPress = function () {
		trace(this.i)
	}
}

In AS3 potremo fare esattamente la stessa cosa, ma la complicazione nel ricercare gli oggetti all'interno di una display list potrebbe crearci difficoltà nella gestione, così per fare in modo di avere un riferimento preciso all'interno di un sistema come quello del flash player 9 con actionscript 3, semplificheremo la gestione utilizzando un Array, oggetto particolarmente utilizzato per altri scopi, ma che può caricare al suo interno qualsiasi tipo di dato, compresi i display object. In questo modo, qualsiasi sia il posto in cui è necessario richiamare un determinato clip, che fa parte della stessa gestione, basterà richiamare l'array con il corretto indice per richiamare esattamente il clip che ci interessa, senza doverlo cercare nella display list a cui è stato collegato, o dovergli dare nomi particolari ecc...

Tornando all'esempio precedente, con la gestione di cui abbiamo parlato in AS3, otterremo:

// creo l'array di gestione dei pulsanti
var pulsanti:Array = [];
// creo un ciclo per 10 pulsanti che attacco dalla libreria
for (var i:uint=0; i<10; i++) {
	// invece di creare un nuovo clip per ogni indice parziale del ciclo, lo inserisco direttamente nell'array
	/* LibraryClip è il nome di concatenamento del clip in libreria che in AS3 equivale al nome di una classe
	derivata di MovieClip e che viene attaccata al filmato usando il "new" al posto dell'attachMovie */
	pulsanti.push(new LibraryClip());
	// sfrutto l'indice parziale per gestire direttamente il clip e imposto le stesse azioni di prima
	// imposto la y per ogni clip
	pulsanti[i].y = i*30;
	// assegno l'indice parziale ad ogni clip
	pulsanti[i].i = i;
	// aggiungo l'evento CLICK che, se richiamato, esegue la funzione clickHandler che riporta l'indice del clip cliccato
	pulsanti[i].addEventListener(MouseEvent.CLICK, clickHandler);
	// aggiungo il clip creato nel momento parziale "i" del ciclo, alla visualizzazione nella timeline principale
	addChild(pulsanti[i]);
}
// imposto la funzione clickHandler collegata all'evento "click"
function clickHandler (e:MouseEvent) {
	trace(e.target.i);
}

Fino a qui, probabilmente, non abbiamo un eccessivo vantaggio nell'utilizzo di un array per gestire dei clip in serie, ma consideriamo ad esempio la necessità di gestire altre azioni che riguardano sempre gli stessi clip, ad esempio mettiamo che nella funzione clickHandler, oltre a leggere l'indice del clip cliccato, vogliamo portare gli altri clip ad un'alpha del 50% e quello cliccato al 100%.

Utilizzando l'array creato in precedenza potremo applicare queste azioni molto facilmente sfruttando un ciclo in base ai dati contenuti nell'array.

Così la funzione clickHandler diventerebbe:

function clickHandler (e:MouseEvent) {
	for (var j:uint=0; j<pulsanti.length; j++) {
		pulsanti[j].alpha = .5;
	}
	e.target.alpha = 1;
}

Nota importante, apparte la semplicità di lettura del codice ed altri piccoli vantaggi, è quella che gli elementi all'interno dell'array, mantengono la loro classe di partenza, a differenza di quando vengono invece richiamati dalla display list di appertenenza utilizzando le funzion getChildAt o getChildByName, che restituiscono invece dei DisplayObject e dovrebbero quindi essere ritrasformati, per utilizzarne le proprietà della classe di provenienza.