How to toggle color of a movieclip?

Question

Let's say I have a movie clip on stage. Every time this movie clip is clicked I want it to change color but if is click again I want it to recolor (becomes white again). To be more clear - it is white at the begin and with the first click I want it to become yellow, with the second click to become white again and with the third click to become yellow again and so on.

I just wrote the code for the first click but I can't think how to do the rest.

var myColorTransform:ColorTransform=transform.colorTransform;

half1a.addEventListener(MouseEvent.CLICK, changeColour);

function changeColour(event:MouseEvent):void
{
       myColorTransform.color = 0xD5E40D;
       half1a.transform.colorTransform=myColorTransform;
       addChild(half_number1a);
}

Answer 1

Or if you don't like typing to much:

var myColorTransform:ColorTransform=transform.colorTransform;

half1a.addEventListener(MouseEvent.CLICK, changeColour);
var cc:uint = 0; //current color.
var cl:Array = [0xFFFFFF, 0xD5E40D]; //list of all colors. 

function changeColour(event:MouseEvent):void
{
       myColorTransform.color = cl[cc = (++cc < cl.length)? cc : 0];
       half1a.transform.colorTransform=myColorTransform;
       addChild(half_number1a);
}

Explanation:

Little bit of explanation as after I saw comment I realized that this could be confusing to less experienced programmers and we want to teach each other here ant not to do job for someone else.

So what is going on here?

Basic setup

We declare some array with colors that we want cycle our movieclip with(by?).

var cl:Array = [0xFFFFFF, 0xD5E40D]; //list of all colors.

No we want to know which color we are now displaying so we declare another variable which will store index of current color.

var cc:uint = 0; //current color.

If you are already confused see Working with arrays

Basically (with current value of 0) we would access first item of the array 0xFFFFFF by this:

cl[cc];

The goal

Now all we need to do each time we click the movieclip is just move the index so that it points to next item(color) in our array. We could simply increment the value of our current color like that

myColorTransform.color = cl[++cc];

Notice here the difference between x++ and ++x. Adobe has great example of how this differs.

and it would work but only until we reach end of array (obviously we don't want to increment our index anymore, we want it to go back to 0) And all the rest is about doing just that - resting index to 0;

If you have no idea what this strange ()?:;syntax mean. You would probably want to check this this out - simply it's just if...else abbreviation but you may better think of it as a function returning some value.

So in out case cc = (++cc < cl.length)? cc : 0

Would be equivalet of writing something like this:

cc = nextIndex();

function nextIndex() {
    if (++cc < cl.length) return cc;
    else return 0; //else is redundant here - if "if" is ture then function will return "cc" and no other instruction are executed in this function.
}

Summary

So in summary what myColorTransform.color = cl[cc = (++cc < cl.length)? cc : 0]; line does is.

1. increment color index.

2. check if new index is smaller than length of color list.

   • if true, set cc to cc (leave as it is)

   • else, set cc back to 0

3. Pick color value from color list cl at index evaluated within [].

4. Set myColorTransform.color to picked value.

---

Answer to additional question.

From the point we've just ended the cc value is storing index of new color so you can simply use it to access cl again without redoing this crazy stuff. For example, if you want to have simply a single mc, you can just use visible property:

function changeColour(event:MouseEvent):void
{
    myColorTransform.color = cl[cc = (++cc < cl.length) ? cc : 0];
    half1a.transform.colorTransform = myColorTransform;
    half_number1a.visible = cl[cc] == 0xFFFFFF; //check if current color is white and set it's visible state accordingly
}

Note that if button is not added to stage fist, you wont see it, even if visible property is set to true.

More flexible solution

Or another way of doing this would to to create parallel or multidimensional array. In simple scenario like this, parallel array should be better choice as it's easier to track and you don't need to change anything you've already have. Basically the idea is to create another array where each value(in your case, movie clips is companion with color value at the same index:

var cl:Array = [0xFFFFFF,      0xD5E40D]; //list of all colors. 
var ml:Array = [half_number1a, null    ]; //movie clips list. 

So if you have something like this, now your changeColor function would look something like that:

function changeColour(event:MouseEvent):void
{
    myColorTransform.color = cl[cc = (++cc < cl.length) ? cc : 0];
    half1a.transform.colorTransform = myColorTransform;
    if (ml[cc]) addChild(ml[cc]); //add child if exist.
    if (ml[cc - 1]) removeChild(ml[cc - 1]); //remove previous child if exist.
}

And that's it. Just remember that you need to fist movie clip on stage before you call to removeChild()

The nice thing about this setup is that you can add as many colors and movieclips as you like just by pushing new values to arrays :)

Answer 2

I'd use ColorMatrixFilter: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/filters/ColorMatrixFilter.html

var aMatrix:Array = [
    0, 0, 0, 0, 0xD5,
    0, 0, 0, 0, 0xE4,
    0, 0, 0, 0, 0x0D,
    0, 0, 0, 1, 0 
];

var aYellow:ColorMatrixFilter = new ColorMatrixFilter(aMatrix);

// Make object yellow.
M.filters = [aYellow];

// Make object normal.
M.filters = null;

function toggleColor():void
{
    if (M.filters) M.filters = null;
    else M.filters = [aYellow];
}

Answer 3

Untested but you can try something like this...

var myColorTransform:ColorTransform=transform.colorTransform;

var nextColor : String = "yellow"; //set with expected Next Color

half1a.addEventListener(MouseEvent.CLICK, changeColour);

function changeColour(event:MouseEvent):void
{
       if (nextColor == "yellow") { myColorTransform.color = 0xD5E40D; nextColor == "white" }
       else if (nextColor == "white") { myColorTransform.color = 0xFFFFFF; nextColor == "yellow" }

       half1a.transform.colorTransform=myColorTransform;
       addChild(half_number1a);
}

Ideally you should use a Boolean to set a true/false state then use the If/Else to set colors. If true then make white or else if false then set yellow.