Manipulating Colour in Flash - #2 - Dynamically Changing MovieClip Colour

Converting decimal colour values into hexadecimal is one part of the puzzle, but then we have to use the result to dynamically change the colour of a MovieClip.

One of the inconsistent(?), and certainly annoying things about Flash is the way you modify the colour of a MovieClip with Actionscript. We already know you can modify various attributes of a MovieClip such as _height, _width, _x, _y, _rotation... but there is no attribute for colour.

The Colour Object

What you have to do instead is create a create a colour Object which in turn controls the colour of the MovieClip. It's not difficult, take this as an example:

var my_color:Color = new Color(MovieClipName_mc);

In this code we call the object 'my_color' and in the parenthesis we specify the instance name of the MovieClip the colour object will be controlling the colour of, in this case a MovieClip called 'MovieClipName_mc' - you can of course name your MovieClip differently, provided you specify its name in the parenthesis as above.

Changing the Colour

We know the name of the colour object - 'my_color' - so now we can tell Flash the colour value of that object in hexadecimal (just as we would specify a colour in HTML). Here's the code:

my_color.setRGB(0xFFFFFF);

In HTML we prefix a hexadecimal colour value with '#' as in '#FFFFFF'. In Actionscript we prefix with '0x' as above '0xFFFFFF'.

FFFFFF of course represents the colour White (if white is a colour), if you change this value in the script above the MovieClip specified in the colour object will adopt the same colour.

Practical Use

That explains the principles of how we can use a colour object to control the colour of a MovieClip, but how about a practical example...

1. Create an object on the stage, select it and hit F8 to turn it into a MovieClip. Give the MovieClip the instance name of 'colourthing_mc'.

2. Create a new layer, name it 'Actions', then select the first frame of the layer.

3. Now create a Dynamic Text Box of the Input variety on the stage. In the properties panel set the variable to be '_root.usercolour', the reason for this will be explained in my comments below.

4. Now create a Button on the stage and give it the instance name 'calc_but'.

And that's the easy bit, now for the easy code:

/* This is one of those really silly things about Flash. Instead of having a colour attribute like they have _width and _height attributes, you have to create a colour Object which in turn controls the colour of a specified MovieClip. Here's how you do it: */

var my_color:Color = new Color(colourthing_mc);

/* This next step sets up for allowing the user to specify the colour of the MovieClip. */

/* First we create the user controlled variable */

var usercolour = "000000";

/* Then we create another variable that is the result of formatting 'usercolour' as required for Flash to understand it as a hexadecimal value by pre-pending it with '0x' */

var hexusercolour = "0x"+usercolour;

/* Then we setRGB of 'my_color' to that hexadecimal value */

my_color.setRGB(hexusercolour);

/* All that remains is to create a dynamic text box that allows the user to input their own hex value for the 'usercolour' variable and a button that will update the 'my_color' value with the user value from the text box, whenever it is clicked.

The important thing to remember when setting up the text input box, is to se the variable very precisely. If the variable it is updating is in the root timeline, then you must define the variable in the text box as '_root.variablename' not simply 'variablename'. In this case the variable for the text box must be '_root.usercolour'. */

/* This code then makes the button update the colour object with the user specified value. */

_root.calc_but.onPress = function () {
var hexusercolour = "0x"+usercolour;
my_color.setRGB(hexusercolour);
}

And that should be it.

Now we have been able to change the colour of an object through user input of the hex value. This could be developed further to allow the user to change the value by using sliders. This will require us to change 0-255 values into hex values on the fly. But knowing what we know from my previous post, this shouldn't be too hard.