Per quanto alcuni colori possano risultare gradevoli, la MixedSkin è comunque piuttosto limitata e quindi spesso potremmo voler utilizzare delle texture. Qualora volessimo applicare trasformazioni ai colori o alla trasparenza di una TextureSkin però, non avremmo a disposizione dei parametri appositi: dovremo invece utilizzare il ColorTransform (dal package flash.geom) oppure un filtro ColorMatrix. Vediamo allora come utilizzarli! Per primo analizzeremo il ColorTransform.
Gli elementi BitmapData di Flash possono essere più o meno trasparenti, sfruttando il loro canale alpha: questo è il modo più semplice per ottenere una texture con trasparenza. La guida di Flash offre questo esempio:
myBitmapData.colorTransform( myBitmapData.rectangle, new ColorTransform(1, 0, 0, 1, 255, 0, 0, 0));
Dove i parametri, da sinistra a destra, sono:
- Moltiplicatore del rosso
- Moltiplicatore del verde
- Moltiplicatore del blu
- Moltiplicatore dell'alpha
- Ammontare di rosso
- Ammontare di verde
- Ammontare di blu
- Ammontare dell'alpha
Quando questo comando viene applicato a una bitmap, il nuovo colore è calcolato per ogni pixel, moltiplicando il vecchio valore per il moltiplicatore e aggiungendo l'ammontare di quel colore, quindi:
nuovo colore = moltiplicatore del colore * vecchio colore + ammontare del colore
Nel caso in cui un valore risultasse maggiore di 255, questo verrebbe ridotto a 255 (che è il massimo ammontare di ogni colore).
Per sfruttare il colorTransform all'interno di una skin, possiamo utilizzare questo codice:
Listato 46. Usa colorTransform all'interno di una skin
var colTrans = new ColorTransform(1,1,1,1,0,0,0,-155);
skin.texture.colorTransform( skin.texture.rectangle, colTrans );
skin.setLightingEnable(true);
Vediamo un esempio pratico. Per prima cosa modifichiamo la funzione createScene in questo modo:
Listato 47. Crea la scena con le immagini e il cubo
function createScene(Void):Group{
var g:Group = new Group();
this.attachMovie("image","imageholder",this.getNextHighestDepth());
// Nascondiamo l'immagine sullo stage
imageholder._alpha = 0;
texture = new BitmapData( imageholder._width, imageholder._height);
texture.draw( this.imageholder );
skin = new TextureSkin( texture );
// Creiamo il cubo
box = new Box(80,80,80,'tri',2);
box.setSkin( skin );
box.setBackSkin( skin );
// Applichiamo le trasformazioni
tg.addChild(box);
g.addChild(tg);
return g;
}
"image" è un movieclip che abbiamo inserito nella libreria e che contiene al suo interno una immagine bitmap. Viene inserito sullo stage con nome istanza "imageholder", quindi viene convertito in un oggetto BitmapData. A questo punto sfruttando questo oggetto vi inseriamo l'immagine e lo sfruttiamo come texture per la nostra skin; le variabili di texture e skin sono globali, in modo da poterle raggiungere da ogni punto del filmato.
Creiamo infine skin e cubo, che aggiungiamo a un TransformGroup globale (tg).
Poichè vogliamo modificare l'alpha dell'immagine utilizzata come skin, dobbiamo impostare i nuovi comandi per l'alphaSlider. Aggiungeremo anche un pulsante, per attivare o disattivare il back face culling. Ecco la funzione setUpControls:
Listato 48. Imposta i controlli per il mouse e inserisce un pulsante per impostare il back face
function setUpControls(){
// Controlli per la rotazione col mouse, come nell'esempio precedente
Mouse.addListener(this);
onMouseDown = function() {
mousedown = true;
mouseX = _xmouse;
mouseY = _ymouse;
};
onMouseUp = function() {
mousedown = false;
mouseX = _xmouse;
mouseY = _ymouse;
};
// Controlli per lo slider
alphaText.text = alphaSlider.value;
var alphaCh:Object = new Object();
alphaCh.onChange = setAlpha;
alphaSlider.addListener( alphaCh );
// Pulsante per attivare-disattivare il back face culling
cullingButton.onRelease = switchBackCulling;
}
Possiamo notare che al cambiamento del valore dello slider abbiamo impostato un richiamo alla funzione setAlpha, il cui codice è:
Listato 49. Crea un oggetto colorTransform
function setAlpha( evt ){
var alphaDiff:Number = evt.value;
alphaText.text = alphaDiff;
var colTrans:ColorTransform = new ColorTransform( 1,1,1,1,0,0,0, alphaDiff );
var textureClone:BitmapData = texture.clone();
textureClone.colorTransform( texture.rectangle, colTrans );
skin.texture = textureClone;
}
Cosa fa questo codice? Semplicemente crea un oggetto colorTransform, dove tutti i moltiplicatori sono impostati su 1 e i valori dei colori sono impostati a 0, tranne quello dell'alpha. Applicando questo oggetto ad una bitmap, otteniamo che i colori non cambino in alcun modo, ma la trasparenza sia impostata sul valore della variabile alphaDiff, che è che il valore impostato dall'utente con lo slider.
Può sembrare strano che il cambiamento venga applicato a una copia della texture e non direttamente alla skin. In realtà il motivo è molto semplice: se applicassimo l'effetto direttamente alla skin, verrebbero variate alcune proprietà (come saturazione e contrasto), che saranno poi modificate in eventuali trasformazioni successive, utilizzando quelle precedenti come base, pertanto varierebbe l'aspetto dell'immagine e non solo la sua trasparenza.
Applicando invece il ColorTransform a una copia della texture "pulita" definita nella funzione createScene e applicando poi questa copia come nuova texture, non abbiamo alcun effetto indesiderato. Ecco infatti il risultato del codice visto finora:
Utilizzo della trasparenza su una texture
"© Petit Publications 2006" - diritti riservati
