Scala di grigi su immagini con Actionscript 3.0

[Flep]

Con questo articolo, andremo a vedere come applicare l'effetto scala di grigi ad una immagine.
Questo effetto è applicabile convertendo tutti i colori dell' immagine ad una equivalente luminosità.
Questo può avvenire moltiplicando i colori per le costanti luminosità dei canali red, green e blue ( scala RGB ).
Con Actionscript 3.0, necessitiamo di una matrice e della classe ColorMatrixFilter.

Vediamo come fare...

Creo un FLA che salvo con nome ' scala_di_grigi.fla ', al cui interno importo una immagine ( a colori ) e la trasformo in MovieClip assegnandogli nome istanza ' image_mc '.
Creo la Document Class, un file AS che salvo con nome ' ScalaGrigi.as ', implementata in questo modo:

package
{
	import flash.display.MovieClip;
	import flash.display.BitmapData;
	import flash.display.Bitmap;
	import flash.filters.ColorMatrixFilter;
	import flash.filters.BitmapFilter;
	import flash.geom.Point;
	
	public class ScalaGrigi extends MovieClip
	{
		private var bit_data:BitmapData;
		
		private var clip_mc:MovieClip;
		
		public function ScalaGrigi()
		{
			init();
		}
		
		private function init():void
		{
			clip_mc=new MovieClip();
			bit_data=new BitmapData(image_mc.width,image_mc.height,true,0xFF000000);
			bit_data.draw(image_mc);
			bit_data.applyFilter(bit_data,bit_data.rect,new Point(0,0),convertiGrigio());
			var bitmap:Bitmap=new Bitmap(bit_data);
			clip_mc.addChild(bitmap);
			addChild(clip_mc);
			clip_mc.x=image_mc.x;
			clip_mc.y=image_mc.y+image_mc.height+10;
		}
		
		private function convertiGrigio():BitmapFilter
		{
			var r:Number=0.212671;
			var g:Number=0.715160;
			var b:Number=0.072169;
			return new ColorMatrixFilter
			(
				[r,g,b,0,0,
				r,g,b,0,0,
				r,g,b,0,0,
				0,0,0,1,0]   );
		}
	}
}

risultato:

Analizziamo il codice.

Proprietà
una istanza BitmapData che scatterà una foto a image_mc
private var bit_data:BitmapData;
una istanza MovieClip che conterrà la Bitmap
private var clip_mc:MovieClip;



Metodi
init();
creo una nuova MovieClip
clip_mc=new MovieClip();
creo una BitmapData con larghezza e altezza pari alle misure di image_mc
bit_data=new BitmapData(image_mc.width,image_mc.height,true,0xF F000000);
scatto una foto a image_mg
bit_data.draw(image_mc);
applico un filtro alla BitmapData passandogli come valori: la stessa BitmapData, la proprietà rect della BitmapData ( che non è altro che un'istanza della classe Rectangle ), le coordinate del punto da dove deve partire il filtro, un' istanza BitmapFilter che mi restituisce la funzione convertiGrigio()
bit_data.applyFilter(bit_data,bit_data.rect,new Point(0,0),convertiGrigio());
creo una nuova Bitmap ( variabile locale perchè non mi serve tenerne traccia ) a cui passo come valore la BitmapData
var bitmap:Bitmap=new Bitmap(bit_data);
aggiungo la Bitmap a clip_mc
clip_mc.addChild(bitmap);
aggiungo clip_mc al DisplayObject ( altrimenti clip_mc non sarebbe visibile )
addChild(clip_mc);
posiziono clip_mc
clip_mc.x=image_mc.x;
clip_mc.y=image_mc.y+image_mc.height+10;



convertiGrigio();
Creo tre variabili numeriche ( costanti ) con rispettivamente i valori costanti della luminosità dei tre canali red, green, blue ( scala RGB )
const r:Number=0.212671;
const g:Number=0.715160;
const ar b:Number=0.072169;
restituisco una nuova istanza della classe ColorMatrixFilter che è una matrice contenente i valori per una scala di grigi
return new ColorMatrixFilter
(
[r,g,b,0,0,
r,g,b,0,0,
r,g,b,0,0,
0,0,0,1,0] );

Stay tuned !

[toni_1974]

Ciao Flep,
carico dei loghi con xml facendoli diventare dei pulsanti.

sono riuscito ad implementare il fatto che le immagini sono in scala di grigi.
Ma io sto cercando di fare che al rool over le immagini ritornino a colori sai come posso fare?
Non riesco a riportarle come prima.

Grazie molte Antonio