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:

[vuelta]

Ciao,
Complimenti per il solito ottimo tutorial.
Mi chiedevo, come sarebbe possibile fare la stessa cosa senza usare il Component, ma usando ad esempio dei campioni?
Il funzionamento rimane lo stesso ma invece di scegliere tra i colori del color picker dovrei poter scegliere tra campioni di colori decisi da me (penso ad altre forme colorate).
Grazie!