Create Solid Color Picker Class using flash AS3

please like and post your questions : http://www.facebook.com/pages/FlashCS5-Tutorials/176320862386436

in this tutorial you will learn how to create solid color picker from scratch using external class .

in order to complete this tutorial you need to understand the following :  

• Mouse.hide(): Hide the Mouse cursor when rollover the color boxes because we will use custom cursor.
• graphics: graphic object is a powerful classes to draw primitive shapes with different styles in any display object.
• dispatchEvent(): we will create custom event dispatcher so we can know when the user select color box.
• extends: if we have an external class and we need to use it as a display object then we need to extend it from a movieclip or a sprite classes.
• transform.colorTransform: in order to change the color of any movie clip, you  need to use color transform to apply new colors.
• mouseEnabled: some time we need to disable the mouse event on some object, and that is very helpful when you have nested movieclips and some of them are only used for graphics.
• Sprite:a new amazing  type in AS3 when you want to create display object without need for a timeline classes. 

create new movie clip on the stage and name it PacketContainer_mc then inside this movie create another movie and name it SelectedColor_mc and we will use this movie to show the current selected color.

then in the first frame on the stage copy and paste below code :

PacketContainer_mc.addEventListener(MouseEvent.MOUSE_DOWN,ShowSolidColor)

function ShowSolidColor(e)

{

var oSolidColorPicker = new SolidColorPicker(PacketContainer_mc,EyeDropper_mc,10)

oSolidColorPicker.x =PacketContainer_mc.x + PacketContainer_mc.width

oSolidColorPicker.y = PacketContainer_mc.y+PacketContainer_mc.height

oSolidColorPicker.addEventListener("onColorSelected",onColorSelected)

addChild(oSolidColorPicker)

}

function onColorSelected(e)

{

var oColorTransform = PacketContainer_mc.SelectedColor_mc.transform.colorTransform;

oColorTransform.color = e.currentTarget.SelectedColor;

PacketContainer_mc.SelectedColor_mc.transform.colorTransform = oColorTransform;

}

as you can notice when the user click the packet container movie we create new instant of our color picker class and pass following parameters

1.  PacketContainer_mc : some time you need to know which object refrence call this class.
2. EyeDropper_mc : our new custom cursor, you can find it in the library.
3. 10 : the size of each box in the color picker container matrix.

so when the user click any box in the matrix we fire up custom event and call the onColorSelected function where we apply the new color to the selected Color Movie .

before build color picker class you need to know that each color we represent by 6 hexa decimal 

characters and to build the huge number of boxes we need an easy way, so i found the most of the boxes colors are derived from the following numbers:

 ("00", "33", "66", "99", "CC", "FF");

so by having a combinations of the above number we can actually get  216 color for example 

003366,003399,0033cc,336699,...,....

and the rest of the boxes is a default color boxes like the black,red,green,....and these colors we need to pass it manually 000000,00ff00,ff0000 and they are only 12.

so now all we need is to draw these boxes and the deafulat color boxes, and add the rollover event listener on each box and draw an outline white boarder and show the custom cursor .

-----------------------------------------------------------------

Online Demo 

Source Code

please if you have any question about the code just contact me on abed_q@hotmail.com