Manipulating Color Attributes Flash

The new Color Object in Flash 5 gives you unprecedented control of your Movie Clip Objects. By controlling the color (and transparency) of your artwork with ActionScript’s Color Object, you can:

  • Create on-the-fly color schemes or “skins” for Flash interfaces.
  • Enable users to select and view color preferences for showcased products on an e-commerce site.
  • Instantly change the color attributes of a Flash design-in-progress for a client.

Because color is controlled through the Color Object, we’ll quickly review the unique methods available to this object. Refer below for more information. Note that this table is organized by order of practical use.

Methods for colour object

Methods for colour object

Creating a Color Object
To manipulate the color attributes of a Movie Clip instance, you need to create a new Color Object that references the Movie Clip instance. In the following steps, you learn to use the constructor for the Color Object.

  1. Select the instance of the dog graphic on the Stage. Open the Instance Panel and name this Movie Clip instance dog.
  2. Open the Button library (Window➪Common Libraries➪Buttons) and drag an instance of a Button symbol onto the Stage. In this example, we used the Grey button-stop in the (rectangle) Button Set.
  3. Select the Button instance on the Stage, and open the Actions Panel. In Expert Mode, type the following actions:
  4. With the on(release) handler, this Button instance’s actions create a new Color Object called redSolid, which refers to the _root.dog Movie Clip instance we made in step 1. Once the redSolid Object is initiated, we can access methods of the Color Object, such as setRGB. In this example, we changed the color of the Movie Clip instance to pure red, designated by FF in hexadecimal.

  5. Save the movie as a new .FLA file, and test the movie. Click the Button instance on the Stage. The color of the dog Movie Clip should change to bright red. Close the test .SWF, and return to the Flash authoring environment.
  6. To see the getRGB method in action, let’s create some trace messages for the Output window. Select the Button instance on the Stage, and open the Actions Panel. Add the following line of code to the end of the nest of actions inside the on(release) handler:
  7. trace(“redSolid’s RGB numeric value = “ + redSolid.getRGB());
  8. Save the .FLA file and test the movie. When you click the button, the Output window should open and display the following text:
  9. redSolid’s RGB numeric value = 16711680
  10. To change this value back to the hexadecimal value that we entered in the setRGB method, we need to convert the value to base 16. Add the following action to the on(release) action nest:
  11. Save the .FLA file and test the movie. When you click the button, the Output window should open and display the new value:
  12. However, you won’t need to convert getRGB’s native return value to set another Color Object equal to a previous setRGB value. Duplicate the dog Movie Clip instance on the Stage, and name the new instance dog2. Duplicate the Button instance on the Stage. Change the new Button instance actions to:
  13. Save the FLA file and test the movie. When you click the first button, the dog Movie Clip instance turns red. When you click the second button, the dog2 Movie Clip instance turns red.
  14. Now that you’ve had some experience with the Color Object’s setRGB and getRGB methods, let’s move on to the more complex colorTransformObject. We’ll use the.FLA file from this exercise, so keep the dogs on the Stage!

Creating a Transform Object
The two remaining methods of the Color Object, setTransform and getTransform, require a more thorough understanding of RGB color space. Before the setTransform method can be used with a Color Object, we need to create a generic object using the object constructor. This generic object will become a colorTransformObject once we have assigned color properties to the generic object.

The properties of the colorTransformObject are:

  • ra, the Red channel percentage
  • rb, the Red Channel offset
  • ga, the Green channel percentage
  • gb, the Green channel offset
  • ba, the Blue channel percentage
  • bb, the Blue channel offset
  • aa, the Alpha channel percentage
  • ab, the Alpha channel offset

The a properties are percentage-based, ranging in value from –100 to 100. The b properties are offset-based, ranging from –255 to 255 (derived from 24-bit RGB color space, in which each 8-bit color channel can have a range of 256 values). While these properties and values may seem complex, refer to the Advanced options of the Effect Panel for guidance. With the Advanced option chosen in the Effect Panel drop-down menu, the left-hand color controls are percentage-based, while the right-hand controls are offset-based. Admittedly, color is difficult to visualize from numbers. To accurately predict the color changes with setTransform, we’ll use the Effect Panel to help us out.

  1. Using the same .FLA file from the previous exercise, select the original dog Movie Clip instance on the Stage. Open the Effect Panel (Window➪Panels➪ Effect), and select the Advanced option in the drop-down menu. Enter the following value on the left-hand side: –100% Blue. On the right-hand side, enter these values: 37 G and 255 B. With these values, the dog instance should be a monochrome blue with yellow eyes. Normally, you would want to write these values down so that you had them to use later. Because you have them printed here, erase them by choosing None from the Effect Panel drop-down menu.
  2. Duplicate one of the existing Button instances on the Stage. On this new instance, we’ll create some code that will initiate a new Color Object, and a new colorTransformObject. The colorTransformObject will be given properties that have the same values as those determined in Step 1. Then, we’ll execute the setTransform method for the Color Object, using the colorTransformObject’s data for the color change. Select the new Button instance, and add the following code in the Actions Panel:
  3. In the preceding code, we created two objects: dogColor and rabidLook. rapidLook is assigned the ba, bb, and gb color Transform Object properties. Each of these properties is given the values we determined in Step 1. Then, we specified that the rabidLook Object be used as the target for dogColor’s setTransform method.

  4. Save the Flash movie file, and test the movie. Click the new Button instance that you added in Step 2. The colors of the dog Movie Clip instance should change to match those we saw in Step 1. Close the .SWF file, and return to the Flash authoring environment.
  5. Now let’s create a button that restores the original look of the dog Movie Clip instance. The code structure resembles that of Step 2, but we use a different way to assign color properties to the colorTransformObject. Duplicate the button created in Step 2, open the Actions Panel, and change the ActionScript code to:
  6. In the restoreLook Object, we defined all the default properties using name/value pairs separated by the colon character ( : ). Notice that all the properties of the restoreLook Object can be declared and given values within a {} nesting.

  7. Save the .FLA file, and test the movie. Click the Button instance you created in Step 2. After the dog Movie Clip instance changes color, click the Button instance you created in Step 4. Voila! The dog Movie Clip instance reverts to its original color. Click the first Button instance that you created in the previous section. This Button instance (which uses the setRGB method) changesthe appearance of the dog Movie Clip instance to a solid red color. Now click the Button instance with the restoreLook Object the dog Movie Clip instance reverts to its original look!
  8. While the setRGB method can alter basic color properties of Movie Clip Objects, the setTransform method is the color-control powerhouse. Any look that you can accomplish with the Effect Panel, you can reproduce with the setTransform method and the color Transform Object.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Flash Topics