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:
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);