Create a Custom Color Picker in Flash
A Color Picker is an application, usually found within graphics software and online, used for the purposes of color management, creating color schemes, picking colors, and more.
In this tutorial, I’ll teach you how to create a custom Color Picker in Flash using ActionScript 3.0.
Step 1: Brief Overview
Using an existing image, we’ll extract the color values using the ColorTransform class and the Mouse position, then we can apply the returned value to any DisplayObject.
Step 2: Starting
Open Flash and create a new Flash File (ActionScript 3).
Set the stage size to 600×300 and set the background color to #D2D1D0.
Editor’s note: Nice screenshot Carlos 
Step 3: Color Picker Box
We’ll create a box that will contain all the elements of the Color Picker.
Draw a 217×174 px Rectangle and fill it with this color: #A6A6A6.
Now duplicate the rectangle (Cmd + D) make it 215×172 px and fill it with: #FAFAFA.
Repeat the process and fill the new rectangle with: #E0E0E0.
This will be the background of the Color Picker.
Step 4: Color Indicators
This Color Picker has two color indicators, one displays the active color and the other one the color that is currently being returned by the Mouse movement.
Select the Rectangle Tool (R) and create two 50×23 px rectangles using any color, I used black to contrast against the background. Convert each rectangle to MovieClip (F8) and set the instance names to "color" and "selectedColor".
Step 5: Text Indicators
We want to know the hexadecimal value of the colors displayed by the Color Picker, dynamic textfields will do the job.
Select the Text Tool (T) and create two Dynamic TextFields beside each color rectangle. I used this text format: Helvetica Neue 11pt, #353535. Remember to embed the numbers and the "#" sign in the properies menu.
Name the fields "colorHex" for the left one, and "sColor" for the right one.
Step 6: Color Spectrum
We’ll need a Color Spectrum to create the Color Picker. In my example I used this image from ColorTools.
Resize the image to 200×130 px and draw a linear gradient from black to white on the side to add a gray scale.
Convert the full spectrum to a MovieClip and name it "spectrum".
Convert all the clips to a single MovieClip and set the instance name to "colorPicker".
Step 7: Target
Now we need an object to apply the data obtained from the Color Picker. Any DisplayObject will work, in this case I will use some text.
The TextField instance name is "txt".
Step 8: ActionScript
Create a new ActionScript document and save it as "Main.as".
Step 9: Required Classes
These are the classes that we’ll use in this class. For specific help on each class please refer to the Flash Help (F1).
package
{
import flash.display.Sprite;
import flash.display.BitmapData;
import flash.geom.ColorTransform;
import flash.events.MouseEvent;
Step 10: Declaring and Extending the Class
This code will declare and extend the class, we extend using the Sprite class since we are using some of its properties and methods.
public class Main extends Sprite
{
Step 11: Variables
We use three variables, explained in the code comments.
var bitmapData:BitmapData = new BitmapData(202,132); //A Bitmap Data object, the size is based on the color spectrum size var colorTransform:ColorTransform = new ColorTransform(); var hexColor:*; //This variable will store the bitmap color data
Step 12: Main Function
This is the Main function.
public function Main():void
{
bitmapData.draw(colorPicker.spectrum); //Passes the bitmap data of the spectrum to the variable
/* Function listeners */
colorPicker.spectrum.addEventListener(MouseEvent.MOUSE_MOVE, updateColorPicker);
colorPicker.spectrum.addEventListener(MouseEvent.MOUSE_UP, setValue);
}
Step 13: Update Color Picker
This function will handle the color changes when the user moves the Mouse.
private function updateColorPicker(e:MouseEvent):void
{
/* Gets the color from the pixel where the mouse is and passes the value to the colorTransform variable */
hexColor = "0x" + bitmapData.getPixel(colorPicker.spectrum.mouseX,colorPicker.spectrum.mouseY).toString(16);
colorTransform.color = hexColor;
/*Sets the color transform data to the "color" clip and the "colorHex" field in the ColorPicker */
colorPicker.color.transform.colorTransform = colorTransform;
colorPicker.colorHex.text = "#" + bitmapData.getPixel(colorPicker.spectrum.mouseX,colorPicker.spectrum.mouseY).toString(16).toUpperCase();
}
Step 14: Set the Value
This function sets the value to the activeColor MovieClip and the sColor TextField in the Color Picker, aswell as the user selected target.
private function setValue(e:MouseEvent):void
{
txt.textColor = hexColor; //This is the target
colorPicker.selectedColor.transform.colorTransform = colorTransform;
colorPicker.sColor.text = colorPicker.colorHex.text;
}
Step 15: Document Class
Go back to the .Fla file and in the Properties Panel add "Main" in the Class field to make this the Document Class.
Conclusion
Now you can choose your favorite color palette or color spectrum and implement it in a customized Color Picker developed with ActionScript 3.0. Try it!
I hope you liked this tut, thanks for reading!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Carlos Yanez
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
How to Write Great Copy for the Web
Add great content to your web projects with this easy to read guide to writing great web copy. Develop the skills to give your work a more professional edge.
Graphic Volcano - More
Active Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+ mobiletuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Activetuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Always wondered how they did it!
Thanks!
Well there’s a built in Color Swatch component, but it doesn’t look as nifty as the one used in this tutorial
Hey Carlos Yanez… Very good and very details tut i love your tuts. Thanks DON Carlos Yanez
Hello! Rafael directly of the Brazil!
The tutorial is great man! Continue with most good works like this.
See ya!
great tutorial thanks
You are in the image below?
Good tut, great job.
A little bit late for me, because a couple of days back I did it in my own. Even the Color Spectrum I did with code, so the result swf was as tiny as a 3 kb
And once more a great tutorial here, thanks a lot and great work.
Great tutorial,
A very useful result.
I however do find that you should have mentioned the Color Swatch component, just to make clear that if you’d need a quick simple color picker, the component might have done fine.
Nevertheless, a very good tutorial, keep up the good work!
I saw your website. You look nothing like your avatar. was that you when u were younger?
Simple, but useful tutorial !
Since i am a newbie in flash ,a bit went off the head but i will surely give a try
Tialhanks for writing this tutor
or…just use flex and drag this component out.
This was working great until I couldn’t select colors on the bottom half of the spectrum.
Example here: http://sushi.unedible.com/charactermakerbeta/bcm_iphone.swf
(click colors)
Could it be that I’m using more than one picker? It was working a minute ago, I don’t know what I changed that could have anything to do with it.
Nevermind, it had something to do with resizing.
Nevermind again, it turns out I do have an issue. The script stops working when I add another frame to the timeline. Help, anyone?
you are Very smart man…..
Really Thank you
thank for tutorial
Sometimes i get a wrong output ?
like #0 or #447B, and that can’t be right….
is there a solution for that ?
or is it just me sucking at flash ?
this, is very good
gonna try this one soon. thanks for this tut!
Im a novice at this….. How or what would i do to change the text to an image?
Thanks
Hi, If you check flashkit for components I already have an FLA source for people which shows how to create the gradient in pure code and d the color picking, I think it’s from 2008 maybe even further back… also If I remember rightly you need to check that the cursor is not leaving the entire flash movie by adding a callback to js because otherwise you get some not so neat emergent behaviour
very neat tutorial. thanks!
I got a problem in line 10 : Main.as, Line 10 1114: The public attribute can only be used inside a package. public class Main extends Sprite
Can anybody help me ?
Оформление зачет
Сами рисовали или тема?
Hi, Awesome tut.
In the CS3 version however I’m getting the following errors:
1046: Type was not found or was not a compile-time constant: MovieClip.
Check the link below for more complete information on converting. Thank you for posting this. However your method for getting the hex in the 6 digit format will not always work. For example uint(1022).toString(16) gives you 3FE. On which side do you put the 0s? you always put them on the right side but in this case they should be on the right. This caused me much pain and as a service to others, I am providing a link to a blog post that explains this in more detail.
correctly getting the 6 digit color value (example: #03ff00)
http://www.actionscript-flash-guru.com/blog/36-uint-to-6-digit-rgb-hex–actionscript-30-as3
Thanks so much for your post it got me on the right track, I couldn’t have done it without you.
correction to my above comment:
you always put them on the right side but in this case they should be on the right.
should be
you always put them on the right side but in this case they should be on the LEFT.