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 600x300 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 217x174 px Rectangle and fill it with this color: #A6A6A6.

Now duplicate the rectangle (Cmd + D) make it 215x172 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 50x23 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 200x130 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.

1
2	public class Main extends Sprite
3	{

Step 11: Variables

We use three variables, explained in the code comments.

1
2	var bitmapData:BitmapData = new BitmapData(202,132); //A Bitmap Data object, the size is based on the color spectrum size
3	var colorTransform:ColorTransform = new ColorTransform();
4	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!