Advertisement
ActionScript

Create a Custom Color Picker in Flash

by

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.

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!

Related Posts
  • Code
    Android SDK
    Create a Music Player on Android: User Controls0d63m preview image@2x
    We are building a simple music player app for Android in this series. So far, we have presented a list of the songs on the device and allowed the user to make selections from it, starting playback using the MediaPlayer class in a Service class. In this final part of the series, we will let the user control playback, including skipping to the next and previous tracks, fast-forwarding, rewinding, playing, pausing, and seeking to particular points in the track. We will also display a notification during playback so that the user can jump back to the music player after using other apps.Read More…
  • Code
    Android SDK
    Create a Music Player on Android: Song Playback0d63m preview image@2x
    In this series, we are creating a music player on Android using the MediaPlayer and MediaController classes. In the first part, we created the app and prepared the user interface for playback. We presented the list of songs on the user device and specified a method to execute when the user makes a selection. In this part of the series, we will implement a Service class to execute music playback continuously, even when the user is not directly interacting with the application.Read More…
  • Code
    Android SDK
    Using the Accelerometer on Android06lom preview image@2x
    In this tutorial, we are going to explore how to use the accelerometer, one of the many hardware sensors of modern smartphones, in an Android application. I'll explain what an accelerometer is and why it may be something you want to take advantage of in your Android applications.Read More…
  • Game Development
    Implementation
    Write Once, Publish Everywhere With HaxePunk: Making a GamePreviewretinaimage
    You've probably had this experience before: you hear about an awesome game, but then you find out that it's only coming out on the one platform that you don't own. It doesn't have to be this way. In this tutorial, you will learn how to use Haxe to make a game in one development platform that can target multiple gaming platforms, including Linux, Mac, Windows, iOS, Android, and Flash.Read More…
  • Code
    JavaScript & AJAX
    Using CreateJS - EaselJSCreatejs retina preview
    In this tutorial we will be exploring the CreateJS suite of libraries. CreateJS is suite of JavaScript libraries and tools for building rich, interactive experiences with HTML5. The CreateJS suite is divided into four libraries.Read More…
  • Code
    Corona SDK
    Create a Collect-the-Pieces Game with CoronaCoronasdk collect preview@2x
    In this tutorial, I will show you how to create a collect-the-pieces game using the Corona SDK and the Lua programming language. We will explore how to use touch controls and events, create shapes using the graphics API, and we will also make use of physics collisions and timers. Let's get started.Read More…