Recipe 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 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
  4. 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);


ActionScript Cookbook
ActionScript 3.0 Cookbook: Solutions for Flash Platform and Flex Application Developers
ISBN: 0596526954
EAN: 2147483647
Year: 2005
Pages: 425

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net