Tuesday, 4 August 2009

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:


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 */


/* 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;

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.


  1. Thx for the post.

    I'm setting up a simple Flash file (AS3) & want to check a flashvar on the first frame of my movie. The flashvar would be Boolean to switch between two different values. If the flashvar is true the background MC would be purple. If the flashvar is false the background MC would be red.

    I'm new to AS3 and mainly just a designer (some familiarity w/ AS2 in the past). I'm not sure how exactly this should be constructed via code. I look at your reference, but the button thing has me thrown off since I'm just wanting to change color via the flashvars only.

    Thanks for any help you can lend.

  2. Hi Cam,

    The code on this post is AS2 not AS3 anyway. But basically you need to understand the following:

    1. Any variables set using FlashVars are imported just before the first frame of your Flash Movie, this means you can treat FlashVars variables as though you had defined them right at the top of your first frame.

    2. In your case I would get FlashVars to pass a number, say 0 or 1.

    3. After that all you need to do is set up an IF statement that checks whether you have a 0 or a 1. In pseudo code (a pidgeon English way of saying what you want the programe to do before you start coding) your code needs to check:

    IF variablename==1 then purple
    ELSE IF variablename<>1 then red

    That's the logic, but I am sure you can work out the AS required. get back to me if not. :-D

  3. In this solution:

    IF variablename==1 then purple
    ELSE IF variablename<>1 then red

    <> means 'not equal to'. Which means your FlashVars could pass a 0 a 2, 3, 4 or any number other than 1 and you would get red.

    You could just as easily try:

    IF variablename==1 then purple
    ELSE IF variablename==0 then red

    This means it would look specifically for a 1 or a 0. If it was passed a 2, it would not know what to do.

    Have a play and see what you come up with.