Create a new movie clip symbol named ColorSelector.

Open the Linkage properties for ColorSelector using the Library panel's pop-up Options menu. Export the symbol for ActionScript and give it a linkage identifier of ColorSelectorSymbol.

On the first frame of the default layer of ColorSelector, add the following code:

#initclip

function ColorSelectorClass (  ) {

  // Define color transform object properties. resetTransform resets a movie
  // clip's colors back to the symbol's original values. selectTransform sets the
  // movie clip's colors to white.
  this.resetTransform = {ra: 100, rb: 0, ga: 100, gb: 0, ba: 100, bb: 0, aa: 100, 
                         ab: 0};
  this.selectTransform = {ra: 100, rb: 255, ga: 100, gb: 255, ba: 100, bb: 255, 
                          aa: 100, ab: 0};

  // The num property is used to count the number of color swatches.
  this.num = 0;

  // The selectedColor property is the RGB value 
  // of the color selected by the user.
  this.selectedColor = 0;

  // Call the startListeners(  ) method to watch the selectedColor property. This
  // custom handler is implemented in Recipe 12.11.
  this.startListeners("selectedColor");

  // Create a movie clip to hold all the color swatches and initially set it to
  // be invisible. Set the y position of the swatches_mc movie clip to 15 so that
  // it appears below the button (see code that follows).
  this.createEmptyMovieClip("swatches_mc", 1);
  this.swatches_mc._visible = false;
  this.swatches_mc._y = 15;

  // Create the button movie clip that opens and closes the color selector. Draw
  // a square within it and add a text field with a c for color.
  this.createEmptyMovieClip("open_btn", 2);
  this.open_btn.lineStyle(0, 0x000000, 100);
  this.open_btn.beginFill(0xFFFFFF, 0);
  this.open_btn.drawRectangle(15, 15, 0, 0, 7.5, 7.5);
  this.open_btn.endFill(  );
  this.open_btn.createTextField("label_txt", 1, 0, 0, 0, 0);
  this.open_btn.label_txt.autoSize = true;
  this.open_btn.label_txt.text = " c";
  this.open_btn.label_txt.selectable = false;

  // When the button is pressed, toggle the visibility of the swatches.
  this.open_btn.onRelease = function (  ) {
    this._parent.toggle(  );
  };

  var swatch, r, g, b, rgb;

  // Create the swatches. There are 216 swatches total--six blocks of six-by-six
  // swatches. Create three nested for loops to accomplish this.
  for (var redModifier = 0; redModifier < 6; redModifier ++) {
    for (var blueModifier = 0; blueModifier < 6; blueModifier++) {
      for (var greenModifier = 0; greenModifier < 6; greenModifier++) {

        // The red, green, and blue values of each swatch follow a pattern that 
        // you can see for yourself if you experiment with the color selector in
        // the Flash authoring environment. This code follows the same pattern. 
        r = 0x33 * redModifier;
        g = 0x33 * greenModifier; 
        b = 0x33 * blueModifier;
        rgb = (r << 16) | (g << 8) | b;

        // Create each swatch with the createSwatch(  ) 
        // method (see the following code).
        swatch_mc = this.createSwatch(rgb);

        // Move each swatch to its correct position.
        swatch_mc._y = 10*blueModifier;
        swatch_mc._x = 10*greenModifier + (redModifier*60);
        if (redModifier >= 3) {
          swatch_mc._y += 60;
          swatch_mc._x -= 180;
         }
      }
    }
  }
}

// Component classes must inherit from MovieClip.
ColorSelectorClass.prototype = new MovieClip(  );

ColorSelectorClass.prototype.toggle = function (  ) {
  this.swatches_mc._visible = !this.swatches_mc._visible;
};

ColorSelectorClass.prototype.createSwatch = function (rgb) {

  // Create the movie clips for the swatches. Each swatch name and depth must be
  // unique. Accomplish this by using the value of the num property, which is
  // incremented each time a new swatch is created.
  var swatch_mc = this.swatches_mc.createEmptyMovieClip(
                    "swatch" + this.num + "_mc", this.num);

  // Within the swatch_mc clip, create outline_mc and fill_mc movie clips so that
  // the outline color can be controlled without affecting the fill color. This
  // is important for the rollover effect.
  swatch_mc.createEmptyMovieClip("outline_mc", 2);
  swatch_mc.createEmptyMovieClip("fill_mc", 1);

  // In the outline_mc clip, draw a square outline.
  swatch_mc.outline_mc.lineStyle(0, 0x000000, 100);
  swatch_mc.outline_mc.drawRectangle(9, 9, 0, 0, 5, 5);

  // In the fill_mc clip, draw a filled square.
  swatch_mc.fill_mc.lineStyle(0, 0x000000, 0);
  swatch_mc.fill_mc.beginFill(rgb, 100);
  swatch_mc.fill_mc.drawRectangle(10, 10, 0, 0, 5, 5);
  swatch_mc.fill_mc.endFill(  );

  // Set an rgb property for the swatch to be 
  // equal to the value of the fill color.
  swatch_mc.rgb = rgb;

  // Create a Color object to control the outline color. 
  // On rollover, set the color transform to the selectTransform 
  // object to turn the outline white. On rollout use the
  // resetTransform object to set the color back to the original value.
  swatch_mc.col = new Color(swatch_mc.outline_mc);
  swatch_mc.onRollOver = function (  ) {
    this.col.setTransform(this._parent._parent.selectTransform);
  };
  swatch_mc.onRollOut = function (  ) {
    this.col.setTransform(this._parent._parent.resetTransform);
  };

  // When the swatch is clicked, set the selectColor property of the color
  // selector component instance to the value of the swatch's rgb property. The
  // selectColor property is listened to, so the onSelectedColorChange(  ) method
  // of any listener objects is automatically invoked.
  swatch_mc.onRelease = function (  ) {
    this._parent._parent.selectedColor = this.rgb;
    this._parent._parent.toggle(  );
  };

  // Increment num (used to generate unique names and depths).
  this.num++;

  // Return a reference to the swatch_mc clip.
  return swatch_mc;
};

// Register the class to the ColorSelectorSymbol linkage identifier.
Object.registerClass("ColorSelectorSymbol", ColorSelectorClass);

#endinitclip

On the main timeline, add the following code to the first frame of the default layer. This code adds an instance of the component to the Stage.

// You must include DrawingMethods.as (from Chapter 4) and Object.as (from
// Recipe 12.11) in any movie in which you use the color selector component.
#include "DrawingMethods.as"
#include "Object.as"

// Add an instance of the component.
_root.attachMovie("ColorSelectorSymbol", "colorSelector", 1);

// Create a listener object with the onSelectedColorChange(  ) method.
colorListener = new Object(  );
colorListener.onSelectedColorChange = function (oldVal, newVal) {

  // When the color is selected, this method is called and the hexadecimal value
  // is displayed in the Output window.
  trace(newVal.toString(16));
};

// Add the listener to the color selector.
colorSelector.addListener(colorListener);