Componente ColorPicker Flash CS3

[Flep]

Flash CS3 porta con se un nuovo componente: il ColorPicker .
Sostanzialmente è un componente che permette all' utente di scegliere un colore tramite una palette di colori fatta davvero bene.
Il livello di difficoltà del componente è semplice, in quanto il ColorPicker permette una buona gestione dei suoi eventi e metodi.

Ho creato una piccola applicazione come esempio.
Vediamo come funziona entrando nei dettagli...

La classe che ho scritto è la seguente:

package
{
	import fl.controls.ColorPicker;
	import fl.events.ColorPickerEvent;
	import flash.geom.ColorTransform;
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Point;
	
	public class Prova extends MovieClip
	{
		private var color_picker:ColorPicker;
		
		private var _color:ColorTransform;
		
		private var sprite:Sprite;
		
		private var clips_array:Array;
		private var selectedClips_array:Array;
		
		private var startColor:Number=0x0066FF;
		private var startX:Number;
		private var startY:Number;
		
		private var point:Point;
		
		private var isOpen:Boolean=false;
		
		public function set col(c:Number):void
		{
			_color.color=c;
		}
		public function get col():Number
		{
			return(_color.color);
		}

		public function Prova()
		{
			init();
			initStartClipColors();
			initListeners();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			
			clips_array=new Array(clip_0_mc,clip_1_mc,clip_2_mc,clip_3_mc);
			selectedClips_array=new Array();
			color_picker=new ColorPicker();
			_color=new ColorTransform();
			col=startColor;
			addChild(color_picker);
			
			color_picker.x=100;
			color_picker.y=300;
		}
		
		private function initStartClipColors():void
		{
			for(var i:int=0;i < clips_array.length;i++)
			{
				clips_array[i].transform.colorTransform=_color;
			}
		}
		
		private function initListeners():void
		{
			color_picker.addEventListener(ColorPickerEvent.CHANGE,settaColore);
			stage.addEventListener(MouseEvent.MOUSE_DOWN,azionaMouse);
			stage.addEventListener(MouseEvent.MOUSE_UP,stoppaMouse);
		}
		
		private function settaColore(c:ColorPickerEvent):void
		{
			isOpen=false;
			_color=new ColorTransform();
			col=c.target.selectedColor;
			for(var i:int=0;i < selectedClips_array.length;i++)
			{
				
				selectedClips_array[i].transform.colorTransform=_color;
			}
		}
		
		private function azionaMouse(m:MouseEvent):void
		{
			startX=mouseX;
			startY=mouseY;
			
			point=new Point(mouseX,mouseY);
			if(!color_picker.hitTestPoint(point.x,point.y,true))
			{
				aggiungiAlpha();
			
				sprite=new Sprite();
				addChild(sprite);
				
				addEventListener(Event.ENTER_FRAME,drawing);
			}
		}
		
		private function drawing(e:Event):void
		{
			sprite.graphics.clear();
			sprite.graphics.moveTo(startX,startY);
			sprite.graphics.lineStyle(1,0xCCCCCC,1);
			sprite.graphics.drawRect(startX,startY,mouseX-startX,mouseY-startY);
		}
		
		private function stoppaMouse(m:MouseEvent):void
		{
			removeEventListener(Event.ENTER_FRAME,drawing);
			if(!color_picker.hitTestPoint(point.x,point.y,true)&&!isOpen)
			{
				selectedClips_array=new Array();
				for(var i:int=0;i < clips_array.length;i++)
				{
					if(sprite.hitTestObject(clips_array[i]))
					{
						selectedClips_array.push(clips_array[i]);
						togliAlpha(clips_array[i]);
					}
				}
				removeChild(sprite);
			}
			else
				isOpen=true;
		}
		
		private function togliAlpha(m:MovieClip):void
		{
			m.alpha=.5;
		}
		
		private function aggiungiAlpha():void
		{
			for(var i:int=0;i < selectedClips_array.length;i++)
			{
				selectedClips_array[i].alpha=1;
			}
		}
	}
}

Risultato:

Oltre ad alcune logiche condizionali che ho applicato, vorrei attirare l'attenzione su un paio di punti.
Il primo è il getter/setter che ho utilizzato in questa parte:

private var _color:ColorTransform;
public function set col(c:Number):void
{	
	_color.color=c;
}
public function get col():Number
{	
	return(_color.color);
}

Solitamente avrei dovuto utilizzare il getter/setter così:

private var _color:ColorTransform;
public function set col(c:ColorTransform):void
{	
	_color=c;
}
public function get col():ColorTransform
{	
	return(_color);
}

Ma dato che mi serviva la proprietà color dell' istanza di ColorTransform (_color) ho optato per incapsulare appunto la proprietà dell'istanza e non l'istanza della classe.

Il secondo punto è questo:

private function initListeners():void
{	
	color_picker.addEventListener(ColorPickerEvent.CHANGE,settaColore);	
	stage.addEventListener(MouseEvent.MOUSE_DOWN,azionaMouse);	
	stage.addEventListener(MouseEvent.MOUSE_UP,stoppaMouse);
}
private function settaColore(c:ColorPickerEvent):void
{	
	isOpen=false;	
	_color=new ColorTransform();	
	col=c.target.selectedColor;	
	for(var i:int=0;i < selectedClips_array.length;i++)	
	{				
		selectedClips_array[i].transform.colorTransform=_color;
	}
}

A parte i 2 listeners in ascolto su eventi del mouse, c'è un listener in ascolto sul componente ColorPicker e l'evento (CHANGE della classe ColorPickerEvent) viene dispacciato quando l' utente clicca un colore nel pannello colori del componente.

A quel punto il gioco è fatto, ho ottenuto un valore esadecimale che posso utilizzare quando e come voglio.

NB: Per utilizzare questo scipt, tenere un ColorPicker in libreria e al suo identificatore ( nel campo Class ) scrivere: fl.controls.ColorPicker

Allego i files sorgente: