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:
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.
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 ]
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 ]
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.
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!