Changing

An interesting concept I learned a few weeks ago involves Flash's use of color. While browsing through the ActionScript reference from Colin Moock's excellent book, I found Flash's ability to apply colors to movie clips by using only programming. I had, for so long, modified the colors of movie clips by using either the timeline or the set property command.

This tutorial will teach you how to apply colors to movie clips. Best of all, you will be applying the colors using nothing but ActionScript. Roll the mouse over the colored buttons in the following animation to see what I am referring to:

[ roll mouse over the colored squares on the right ]

To make your strenuous programming life easier, I have provided an incomplete source file for you to work on. Don't worry, the source file does not include the ActionScript necessary to make the animation work! Click the link in the table to download the incomplete FLA file for this tutorial:

Download Incomplete FLA

Here is how to change the color using programming:

1. Make sure you open the color_tutorial.fla file you downloaded.
    
2. You will see a movie clip on the left with a cluster of random movie clips. Select the movie clip and select the Instance tab. In the Name field, enter the word shapes.

3. Now that you gave the movie clip a name, it is time to add the action to make the buttons work. Right click on the first button and select Actions. Copy and paste the code from the following box into the Object Actions window that should appear:

on (rollOver) { var colorful = new Color("_root.shapes"); colorful.setRGB(0x003366); }

[ copy and paste the above code in the Object Actions window ]

4. Right click on the second button on the top row and select Actions again. Copy and paste the code from the following box into the Object Actions window:

on (rollOver) { var colorful = new Color("_root.shapes"); colorful.setRGB(0x006699); }

[ copy and paste the above code in the Object Actions window ]

5. That is all there is to the code. Preview the animation and the first two buttons will enable the color of the movie clip to be changed.

Do you see a pattern develop? You should; the code for each of the buttons is going to be nearly exactly the same. The only difference that will be visible is the hexadecimal color value after .setRGB; the hexadecimal color value is the numerical equivalent of colors. i.e. 0x006699. The next section will deconstruct the code for you.

How Does the Code Work?
The following section will basically deconstruct how the code you copied and pasted enables the color to change.

on (rollOver) {
   var colorful = new Color("_root.shapes");
   colorful.setRGB(0x003366);
}
 

The first line is the On handler for the button. The code following this statement will be enabled and executed when the mouse simply hovers over the button. You can access these options by going to Basic Actions | On Mouse Event from the Object Actions window.

on (rollOver) {
   var colorful = new Color("_root.shapes");
   colorful.setRGB(0x003366);
}

In this line, I am creating a new color object. I'm calling the color object I am creating "colorful". The words new Color("_root.shapes"); are telling flash to create a new color object based upon the movie clip called 'shapes'. This line of code is very similar to declaring a variable and giving it a value. Of course, in Flash, you don't have to declare variables before using them.

on (rollOver) {
   var colorful = new Color("_root.shapes");
   colorful.setRGB(0x003366);
}

The color object colorful is being given a color value. Because the object, colorful, is referring to the shapes movie clip stored on the main timeline, the color featured after Flash's setRGB function will be applied.

Finding the Hexadecimal Color Values
Before I wrote this tutorial, people have often e-mailed me for a method of determining the hexadecimal color values for a color. There are two ways you can find the hexadecimal value for a color. The easiest way would be to visit the following URL and determine the hexadecimal value for a color you see: http://www.mrs.umn.edu/committees/wwwac/toolbox/color.html

The other method involves using Flash's color picker tool. When you press the line or background color menu in Flash 5's toolbox on the left, you will see a small color picker that follows your mouse pointer. Click on any color that you want the value for, and Flash will display the appropriate hexadecimal value in the color menu. In case you don't know what I am talking about, the following image should help:

[ flash displays the hexadecimal value for a color that you choose ]

You can place your mouse cursor inside the hexadecimal color value field in the background menu (see image above) and copy and paste its contents into the Object Actions window.

Downloads
Never to leave you surprised or confused, I have provided the final source file for this tutorial. If you still have questions, you can post them in the forum by clicking the Message Board link near the bottom of the page.

Final Source for this Tutorial

Conclusion
Wait? Are we done? Don't we have like another 10 or so buttons that have not been coded for? The code for the remaining buttons is nearly the same as the first two buttons. The only modification is the hexadecimal color value. Once you find out the hexadecimal color value of the button, you can copy and paste the same code from either button 1 or button 2 and incorporate the new hexadecimal value. If you are still confused, open the final source for the tutorial from the above link. That is all there is to adding color using ActionScript in Flash.

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!