1. You have to complete the “Create a simple Color Picker” tutorial before continuing with this one.

2. Open Acrobat 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.

3. You can use your own button for getting the Color Picker on stage. Create a layer for the loading button, a layer for the actionscript and one that contains the background image. Your time line should look like this:



Make sure that the color picker component exists only on your document library and not on the stage.

4. Add a button to the stage on the button layer. A default Adobe Flash button from the Components panel under the User Interface category. Set it’s instance name to myButton (I’ve set it’s label to be Load):



5. On your actions layer type the following code (this code will load the color picker component on the Stage, with its initialState set to floatingEasy):

import flash.events.MouseEvent;
import com.jumpeye.Events.ColorPickerEvents;

myButton.addEventListener(MouseEvent.CLICK, clickHandler);
function clickHandler(evt:MouseEvent):void {
     if(myColorPicker == null) {
          var myColorPicker:ColorPickerProV3AS3 = new ColorPickerProV3AS3();
          stage.addChild(myColorPicker);
          myColorPicker.colorSource = "stage";
          myColorPicker.autoMode = false;
          myColorPicker.x = 50;
          myColorPicker.y = 50;

          myColorPicker.addEventListener(ColorPickerEvents.COLOR_SELECTED, colorSelectedHandler);
          function colorSelectedHandler(evt:ColorPickerEvents):void {
               var colorValue:Number = evt.newColor;
               trace(colorValue.toString(16).toUpperCase());
          }

          myColorPicker.addEventListener(ColorPickerEvents.BUTTON_CLICK, buttonClickHandler);
          function buttonClickHandler(evt:ColorPickerEvents)
          {
               myColorPicker.open("easy", stage, false, true);
          }

          myColorPicker.addEventListener(ColorPickerEvents.CLOSE_EASY, closeEasyHandler);
          function closeEasyHandler(evt:ColorPickerEvents):void {
               if (evt.source == "switchModeButton") {
                    myColorPicker.close("easy", true, true);
                    myColorPicker.open("pro", stage, false, true);
               }
               else {
                    myColorPicker.close("easy", true, false);
                    stage.removeChild(myColorPicker);
              }
          }

          myColorPicker.addEventListener(ColorPickerEvents.CLOSE_PRO, closeProHandler);
          function closeProHandler(evt:ColorPickerEvents):void {
               if (evt.source == "switchModeButton") {
                    myColorPicker.close("pro", true, true);
                    myColorPicker.open("easy", stage, false, true);
               }
               else {
                    myColorPicker.close("pro", true, false);
                    stage.removeChild(myColorPicker);
               }
          }
     }
}

When the button is pressed, the component is attached to the Stage, directly in the fixed easy mode. The autoMode property is set to false, so we can open and close the easy and pro movie clips ourselves and do not let the component to do it automatically. In this case, we have to listen for the closeEasy and closePro events, which are triggered when the movie clips should close (the movie clips will not actually close we have to do it ourselves). We also can find out the reason why the two movie clips should close: switching to another mode, pressing the buttons for closing or selecting a new color. If the movie clips are closing due to any other reason than switching between easy and pro modes, the component is removed from the Stage, so next time the myButton is pressed, it will be attached, again, to the Stage. If the switchModeButton is pressed, we have to explicitly close the current mode and open the other mode of the color picker. Please note that the scale mode for the Stage should be set to "showAll" for the color picking to work correctly.

6. Hit Ctrl+Enter to test your movie :