Changing
Colors Using ActionScript
 written by kirupa

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.
  1. 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:

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

  1. 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:

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

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

Did You Like This?

Getting Help

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out

Share

Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly at kirupa[at]kirupa.com.

Cheers!

Kirupa Chinnathambi

 

Add Your Comment (or post on the Forums)

add your comment

  

Read-only Archive of Old comments

Below is an archive of old comments made on this article. To create new comments click on the Start or Continue Discussion text above to add to this list.

blog comments powered by Disqus

 

 




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.