Actionscript Cookbook

12.13. Program: Color Selector Component

In this program, you create a color selector component similar to the one that is available from the Tools panel when you click on either the stroke or fill color. To do this, follow these steps:

1. Create a new movie clip symbol named ColorSelector.

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

3. 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 ...