Flash CS3 - Flash CS4

Free tutorials and scripts for all.
Actionscript 3.0

ColorPicker - Flash CS3 Component

This is a discussion on ColorPicker - Flash CS3 Component within the Tutorials forums, part of the Flash English category; Flash CS3 includes something new: the ColorPicker . Substantially it's a very clever component that allows the user to choose ...


Go Back   Forum Flash CS3 Flash CS4 > Flash CS3 Flash CS4 > Flash English > Tutorials

Register FAQ Members List Calendar Search Today's Posts Mark Forums Read
  #1 (permalink)  
Old 08-10-07, 16:14
Administrator
 
Join Date: Jul 2007
Location: Cesena
Posts: 4,535
Rep Power: 6
Flep is on a distinguished road
ColorPicker - Flash CS3 Component

Flash CS3 includes something new: the ColorPicker .
Substantially it's a very clever component that allows the user to choose a colour from a well made palette.
It's not a difficult component to manage, as the ColorPicker events and methods are quite self-explanatory.
I've created a little application as example.
Let's see in detail how it works'
Here is the class I've written:
Code:
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;
			}
		}
	}
}
Here is the result:







Apart from some conditional logic, I'd like to draw the attention to a couple of points.
The first one is the getter/setter used in this part:
Code:
private var _color:ColorTransform;
public function set col(c:Number):void
{
	_color.color=c;
}
public function get col():Number
{
	return(_color.color);
}
Normally I'd have used the getter/setter like so:
Code:
private var _color:ColorTransform;
public function set col(c:ColorTransform):void
{
	_color=c;
}
public function get col():ColorTransform
{
	return(_color);
}
But because I needed the colour property of the ColorTransform instance (_color), I've opted to encapsulate the actual instance's property and not the instance itself.

The second point is the following:
Code:
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;
	}
}
Apart from the 2 listeners watching the mouse events, there's another listener watching the ColorPicker and the event (CHANGE of the ColorPickerEvent class) is dispatched when the user clicks a color on the component's color panel.
That's it,! A hexadecimal value is then obtained, which I can use whichever way I like.

Stay tuned !
__________________

 


I recommend: Essential Actionscript 3.0

- I do not reply technicians pvt messages. Open a thread !
- Non rispondo ai messaggi privati con domande tecniche. Apri una discussione sul forum !

Last edited by Flep; 28-08-08 at 06:55..
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

Reply

Bookmarks

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is On
Trackbacks are On
Pingbacks are On
Refbacks are On
Forum Jump

Similar Threads

Thread Thread Starter Forum Replies Last Post
ProgressBar Component of Flash CS3 Flep Tutorials 2 09-12-08 18:35
RadioButton component of Flash CS3 Flep Tutorials 1 05-08-08 09:52
The Slider component of Flash CS3 Flep Tutorials 14 07-07-08 23:41
Using NumericStepper - Flash CS3 component Flep Tutorials 1 09-02-08 18:12
Componente ColorPicker Flash CS3 Flep Articoli e tutorials 0 19-09-07 15:19


All times are GMT. The time now is 13:35.

Powered by vBulletin version 3.7.4
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC4
Forum SiteMap