Il ColorMatrixFilter, introdotto con il Flash Player 8, è uno strumento molto utile e flessibile: permette di applicare dei cambiamenti di colore ed alpha ad ogni pixel di una bitmap o di un MovieClip. Un esempio molto interessante delle potenzialità di questo filtro è la ColorMatrix demo del sito Quasimondo.
La trasformazione di ogni colore è descritta con una matrice, da utilizzare poi come costruttore per la classe ColorMatrixFilter. La matrice è di questo tipo:
Listato 50. Matrice dei colori
var matrix = new Array();
matrix = matrix.concat([1, 0, 0, 0, 0]); // rosso
matrix = matrix.concat([0, 1, 0, 0, 0]); // verde
matrix = matrix.concat([0, 0, 1, 0, 0]); // blu
matrix = matrix.concat([0, 0, 0, a, 0]); // alpha
I 20 elementi della matrice sono utilizzati per calcolare i nuovi valori di colori ed alpha, in questo modo:
rosso = a[0] * srcR + a[1] * srcG + a[2] * srcB + a[3] * srcA + a[4]
verde = a[5] * srcR + a[6] * srcG + a[7] * srcB + a[8] * srcA + a[9]
blu = a[10] * srcR + a[11] * srcG + a[12] * srcB + a[13]* srcA + a[14]
alpha = a[15] * srcR + a[16] * srcG + a[17] * srcB + a[18] * srcA + a[19]
Dove srcR, srcG, srcB e srcA sono le componenti di colore di ogni pixel del movieclip/bitmap a cui andiamo ad applicare il filtro.
Per modificare solo l'alpha, possiamo sfruttare il primo codice visto per questo filtro, dove tutti i colori vengono impostati su 1 e solo l'alpha viene stabilita in base a una variabile (a).
Prima di utilizzare questo filtro su una skin, facciamo un piccolo esempio del suo funzionamento utilizzando un MovieClip. Notiamo che, quando applichiamo questo filtro, la proprietà cacheAsBitmap del MovieClip viene impostata automaticamente su true. Quando questo filtro viene applicato a una bitmap ne viene calcolata una nuova e l'originale non subisce modifiche.
Regolare colori e trasparenza
Per prima cosa dobbiamo importare il filtro nel nostro filmato, usando import flash.filters.*. In questo esempio modificheremo sia i colori che la trasparenza, per cui inseriamo sullo stage quattro diversi slider. Nei prossimi esempi in alcuni casi il codice verrà "abbreviato", poiché, ormai, abbiamo visto più volte i passaggi comuni ed è quindi inutile riproporli ogni volta, allungando inutilmente la lettura.
Vediamo come creare il nostro esempio per utilizzare il ColorMatrixFilter. Per prima cosa impostiamo lo stage:
Listato 51. Crea la scena e aggiunge il movieClip "rose"
function init(){
//Qui inseriamo il codice per creare mondo e camera, come nei casi precedenti
// Quindi aggiungiamo questo codice
this.attachMovie("rose","rose",this.getNextHighestDepth());
filter = createFilter();
rose.filters = new Array( filter );
setUpControls();
}
Inseriamo sullo stage il movieclip "rose" che abbiamo in libreria, quindi, creiamo un filtro (vedremo dopo la funzione createFilter) e lo associamo al nostro movieclip. Ricordiamo che la proprietà filters, dei movieclip, è un array, ciò significa che possiamo associare, contemporaneamente, più di un filtro alla stessa clip. Come ultima cosa chiamiamo la funzione setUpControls, che gestirà i diversi slider:
Listato 52. Imposta gli slider per il movieClip "rose" (Guarda il codice completo)
function setUpControls(){
var alphaCh:Object = new Object();
alphaText.text = alpha;
alphaCh.onChange = function(evt:Object){
alpha = evt.value;
alphaText.text = alpha;
setFilter();
}
alphaSlider.addListener(alphaCh);
..//
}
Ovviamente il codice è molto simile, dato che tutti gli slider faranno le stesse operazioni.
La funzione setFilter richiamata da ogni lister si occupa di aggiornare l'array di filtri del movieclip, creando il filtro con le nuove proprietà. Il codice è il seguente:
function setFilter(){
rose.filters = new Array(createFilter());
}
La funzione che si occupa di creare la matrice coi nuovi colori è createFilter:
Listato 53. Crea la matrice con i nuovi colori
function createFilter():BitmapFilter{
var r:Number = red;
var g:Number = green;
var b:Number = blue;
var a:Number = alpha;
// Creiamo la matrice
var matrix = new Array();
matrix = matrix.concat([r, 0, 0, 0, 0]); // red channel
matrix = matrix.concat([0, g, 0, 0, 0]); // green channel
matrix = matrix.concat([0, 0, b, 0, 0]); // blue channel
matrix = matrix.concat([0, 0, 0, a, 0]); // alpha channel
// Creiamo il ColorMatrixFilter
var filter:BitmapFilter = new ColorMatrixFilter( matrix );
// Restituiamo il filtro
return filter;
}
Ed ecco finalmente il risultato:
Esempio di utilizzo del ColorMatrixFilter
"© Petit Publications 2006" - diritti riservati
