1. Install the ColorPickerProV3.mxp file. If your Adobe Flash CS3 is opened, please close it first and then double click on the mxp file. Follow the installation instructions. If you have trouble installing the component, see How to install a MXP file tutorial.

2. Open Adobe Flash CS3, create a new file (File/New/Flash Document) and look for the Color Picker component in the Components window (Ctrl+F7 on Windows; Command+F7 on Mac) on the V3 Components - Jumpeye category.

3. Set your Flash document to 400px width and 300px height and 28 fps frame rate as in the image below.



Click OK and save the file. I also added an image to the background on its separate layer

4. Drag the Color Picker on stage from the Components (Ctrl+F7 or Comman¬d+F7 on Mac).



5. Insert an instance name for the color picker on stage so you can use it in Action Script later.



6. Select the color picker on the stage and set its properties in the Component Inspector like below.



7. Add another layer and name it actions. Here is where we are going to type some Action Script for our color picker to trace a response when we’ll choose a color (showing us the hexadecimal numeric value of the selected color). This is how the layer stack should look like:



8. On the actions layer type the following code :

import com.jumpeye.Events.ColorPickerEvents;

myColorPicker.addEventListener(ColorPickerEvents.COLOR_SELECTED, cSelectedHandler);
function cSelectedHandler(evt:ColorPickerEvents):void {
     trace(evt.newColor.toString(16).toUpperCase());
}

9. Hit Ctrl+Enter to test your movie (or Command+Enter on Mac):



10. Click the dropdown arrow for the colors palette to be displayed. If you move the mouse cursor over the Stage, outside the color picker, you’ll notice that the component picks up the color found under the tip of the mouse cursor.



11. If you click a desired color from any part of the stage or the color palette, the Output window will pop up displaying the hexadecimal value of the selected color :