Create a Custom Color Picker in Flash

Carlos Yanez on Nov 23rd 2009 with 36 comments

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 :P

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

Rollover to read this author's bio or click through to see a full list of posts by this author.

Carlos is a Web/Logo Designer, Flash Developer with passion for great designs and cool applications.  

Plus Premium
 
 
Add Comment

Discussion 36 Comments

  1. Mads says:
    November 23, 2009 at 4:09 am

    Always wondered how they did it! :) Thanks!

    Reply
  2. Anjum nawab says:
    November 23, 2009 at 7:21 am

    Hey Carlos Yanez… Very good and very details tut i love your tuts. Thanks DON Carlos Yanez :)

    Reply
  3. Rafael says:
    November 23, 2009 at 8:03 am

    Hello! Rafael directly of the Brazil!

    The tutorial is great man! Continue with most good works like this.

    See ya!

    Reply
  4. piyanistil says:
    November 23, 2009 at 1:25 pm

    great tutorial thanks

    Reply
  5. Георги says:
    November 23, 2009 at 10:54 pm

    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 :)

    Reply
  6. André says:
    November 24, 2009 at 3:10 am

    And once more a great tutorial here, thanks a lot and great work.

    Reply
  7. Daniel Apt says:
    November 24, 2009 at 1:07 pm

    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!

    Reply
  8. Erick says:
    November 24, 2009 at 4:05 pm

    I saw your website. You look nothing like your avatar. was that you when u were younger?

    Reply
  9. Tony says:
    November 25, 2009 at 1:10 am

    Simple, but useful tutorial !

    Reply
  10. ishan from india says:
    November 25, 2009 at 11:24 pm

    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

    Reply
  11. jono says:
    November 26, 2009 at 8:44 am

    or…just use flex and drag this component out.

    Reply
  12. Alice says:
    November 26, 2009 at 5:20 pm

    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.

    Reply
  13. flora says:
    November 27, 2009 at 7:11 am

    you are Very smart man…..

    Really Thank you :)

    Reply
  14. tutorial blog says:
    December 2, 2009 at 6:27 am

    thank for tutorial

    Reply
  15. Thumbnail says:
    December 13, 2009 at 10:54 am

    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 ?

    Reply
  16. keny says:
    January 26, 2010 at 7:42 pm

    this, is very good

    Reply
  17. mubaraq says:
    February 12, 2010 at 9:10 am

    gonna try this one soon. thanks for this tut! :)

    Reply
  18. GReg says:
    March 10, 2010 at 6:26 pm

    Im a novice at this….. How or what would i do to change the text to an image?

    Thanks

    Reply
  19. Lewis Cowles says:
    April 6, 2010 at 12:03 am

    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

    Reply
  20. Jason says:
    April 15, 2010 at 2:00 pm

    very neat tutorial. thanks!

    Reply
  21. tuio says:
    May 6, 2010 at 6:43 pm

    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 ?

    Reply
  22. Даниил Семин says:
    May 28, 2010 at 8:41 pm

    Оформление зачет :) Сами рисовали или тема?

    Reply
  23. Joe says:
    June 3, 2010 at 4:19 am

    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.

    Reply
  24. Nico Limpika says:
    June 9, 2010 at 4:05 pm

    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.

    Reply
  25. Nico Limpika says:
    June 9, 2010 at 4:06 pm

    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.

    Reply
  26. G3 says:
    August 11, 2010 at 2:24 am

    Hello,
    i used the color picker component. i want to restrict the colors dynamically. so i created xml file and loaded those colours into array. my application is working. but color component values which appear in text box is not changing. In run time this error is displayed though my application is working. Can i get the solution?

    Reply
  27. Farhan says:
    November 3, 2010 at 5:43 am

    Thanks a lot, it works for me great

    Reply
  28. Shaun Thomson says:
    December 1, 2010 at 10:44 pm

    Hi Carlos

    Thanks for the great tut.

    I’m trying to figure out how to integrate the color picker into a project ie call the external class from a project’s timeline.

    So as an experiment, I took one of the fla’s in your source, and tried to set it up as if it was a project accessing your Main.as file.

    I deleted Main as the fla’s class in the properties panel.

    I then put the following code on frame 1 of my timeline:

    import Main;

    var tester:Main = new Main();

    When I run it, I get errors saying Flash can’t find colorPicker or txt (even though they are in the project).

    I was wondering if you would be kind enough to briefly explain how to correctly integrate your class into a project?

    Thanks for your time and help.

    Shaun

    Reply
  29. BlacVipr says:
    October 26, 2011 at 11:12 am

    Hi Carlos
    Great tuts.But havin probs during executing the file.error at output given:ArgumentError: Error #2005: Parameter 0 is of the incorrect type. Should be type IBitmapDrawable.
    at flash.display::BitmapData/draw()
    at Main()

    can you solve this problem for me..
    Eagerly looking forward for comments…
    Thankyou pal

    Reply
  30. Will says:
    November 3, 2011 at 12:32 pm

    Great tut! If you could, I would a little help in the following:

    How to use color Picker with a inside Movie brought with addChild?

    I have the code:

    //
    meuColorPicker.selectedColor = 0xffffff;
    //
    meuColorPicker.addEventListener(ColorPickerEvent.CHANGE, corAlterada);
    ///
    var objeto:MovieClip = camiseta.baseCamiseta;
    ///
    function corAlterada(e:ColorPickerEvent):void {
    //
    var colorInfo:ColorTransform = objeto.transform.colorTransform;
    //
    colorInfo.color = meuColorPicker.selectedColor;
    //
    objeto.transform.colorTransform = colorInfo;
    }

    I want to use the colorPicker to change the color of a MovieClip inside a Sprite. In this case, called baseCamiseta.
    If a change the variable type of objeto to a Sprite, than the colorPicker works correctly, but it changes only the “father” element’s color. I want to change de color inside the Sprite camiseta.

    Why I am doing this? I have many objets in the Stage that I brought dynamicaly using (addChild)ren inside Sprites. Each Sprite has many children and I have to change the color of each one of them.

    Thank you so much!

    Reply
  31. Jovim Roy says:
    January 7, 2012 at 1:04 pm

    @ Alice can i Have the .fla file you have that you made in your work file?

    http://sushi.unedible.com/charactermakerbeta/bcm_iphone.swf

    i really have problem editing on whats the problem in saving my edited work

    hope you can help me. :D

    Reply

Add a Comment

To add a code snippet to your comment, please wrap your code like so: <pre name="code" class="html">YOUR CODE</pre>. You can replace the class name with "js," "css," "sql," or "php." If there are any "<" or ">" within your code, please search and replace them with: &lt; and &gt; respectively.