Box color Changing Game

Question

What I want to achieve through this code that whenever I click on any of the 16 boxes I get a red color but the next time I do so on any other(or the same) box I get a blue color. What this code does is that if I click any other box it first gives me a red color (always) and I get the next color only when I click the same box again, that is, all the boxes' colors are independent of each other. Please help, I am a beginner to actionscript. Thanks in advance.

var i=0;

box1.addEventListener(MouseEvent.CLICK, func1(i));
box2.addEventListener(MouseEvent.CLICK, func2(i));
box3.addEventListener(MouseEvent.CLICK, func3(i));
box4.addEventListener(MouseEvent.CLICK, func4(i));
box5.addEventListener(MouseEvent.CLICK, func5(i));
box6.addEventListener(MouseEvent.CLICK, func6(i));
box7.addEventListener(MouseEvent.CLICK, func7(i));
box8.addEventListener(MouseEvent.CLICK, func8(i));
box9.addEventListener(MouseEvent.CLICK, func9(i));
box10.addEventListener(MouseEvent.CLICK, func10(i));
box11.addEventListener(MouseEvent.CLICK, func11(i));
box12.addEventListener(MouseEvent.CLICK, func12(i));
box13.addEventListener(MouseEvent.CLICK, func13(i));
box14.addEventListener(MouseEvent.CLICK, func14(i));
box15.addEventListener(MouseEvent.CLICK, func15(i));
box16.addEventListener(MouseEvent.CLICK, func16(i))


function func1(i:int):Function{
    return function paint(e:MouseEvent):void{
        var myColorTransform:ColorTransform = new ColorTransform();
        if (i%4==0) {
            myColorTransform.color = 0xFF0000;
        }
        else if (i%4==1) {
            myColorTransform.color = 0x0000FF;
        }
        else if (i%4==2) {
            myColorTransform.color = 0x00FF00;
        }
        else if (i%4==3) {
            myColorTransform.color = 0xFFFF00;
        }
        box1.transform.colorTransform = myColorTransform;
        i++;
    }
}

function func2(i:int):Function{
    return function paint(e:MouseEvent):void{
        var myColorTransform:ColorTransform = new ColorTransform();
        if (i%4==0) {
            myColorTransform.color = 0xFF0000;
        }
        else if (i%4==1) {
            myColorTransform.color = 0x0000FF;
        }
        else if (i%4==2) {
            myColorTransform.color = 0x00FF00;
        }
        else if (i%4==3) {
            myColorTransform.color = 0xFFFF00;
        }
        box2.transform.colorTransform = myColorTransform;
        i++;
    }
}

function func3(i:int):Function{
    return function paint(e:MouseEvent):void{
        var myColorTransform:ColorTransform = new ColorTransform();
        if (i%4==0) {
            myColorTransform.color = 0xFF0000;
        }
        else if (i%4==1) {
            myColorTransform.color = 0x0000FF;
        }
        else if (i%4==2) {
            myColorTransform.color = 0x00FF00;
        }
        else if (i%4==3) {
            myColorTransform.color = 0xFFFF00;
        }
        box3.transform.colorTransform = myColorTransform;
        i++;
    }
}

function func4(i:int):Function{
    return function paint(e:MouseEvent):void{
        var myColorTransform:ColorTransform = new ColorTransform();
        if (i%4==0) {
            myColorTransform.color = 0xFF0000;
        }
        else if (i%4==1) {
            myColorTransform.color = 0x0000FF;
        }
        else if (i%4==2) {
            myColorTransform.color = 0x00FF00;
        }
        else if (i%4==3) {
            myColorTransform.color = 0xFFFF00;
        }
        box4.transform.colorTransform = myColorTransform;
        i++;
    }
}

function func5(i:int):Function{
    return function paint(e:MouseEvent):void{
        var myColorTransform:ColorTransform = new ColorTransform();
        if (i%4==0) {
            myColorTransform.color = 0xFF0000;
        }
        else if (i%4==1) {
            myColorTransform.color = 0x0000FF;
        }
        else if (i%4==2) {
            myColorTransform.color = 0x00FF00;
        }
        else if (i%4==3) {
            myColorTransform.color = 0xFFFF00;
        }
        box5.transform.colorTransform = myColorTransform;
        i++;
    }
}

function func6(i:int):Function{
    return function paint(e:MouseEvent):void{
        var myColorTransform:ColorTransform = new ColorTransform();
        if (i%4==0) {
            myColorTransform.color = 0xFF0000;
        }
        else if (i%4==1) {
            myColorTransform.color = 0x0000FF;
        }
        else if (i%4==2) {
            myColorTransform.color = 0x00FF00;
        }
        else if (i%4==3) {
            myColorTransform.color = 0xFFFF00;
        }
        box6.transform.colorTransform = myColorTransform;
        i++;
    }
}

function func7(i:int):Function{
    return function paint(e:MouseEvent):void{
        var myColorTransform:ColorTransform = new ColorTransform();
        if (i%4==0) {
            myColorTransform.color = 0xFF0000;
        }
        else if (i%4==1) {
            myColorTransform.color = 0x0000FF;
        }
        else if (i%4==2) {
            myColorTransform.color = 0x00FF00;
        }
        else if (i%4==3) {
            myColorTransform.color = 0xFFFF00;
        }
        box7.transform.colorTransform = myColorTransform;
        i++;
    }
}

function func8(i:int):Function{
    return function paint(e:MouseEvent):void{
        var myColorTransform:ColorTransform = new ColorTransform();
        if (i%4==0) {
            myColorTransform.color = 0xFF0000;
        }
        else if (i%4==1) {
            myColorTransform.color = 0x0000FF;
        }
        else if (i%4==2) {
            myColorTransform.color = 0x00FF00;
        }
        else if (i%4==3) {
            myColorTransform.color = 0xFFFF00;
        }
        box8.transform.colorTransform = myColorTransform;
        i++;
    }
}

function func9(i:int):Function{
    return function paint(e:MouseEvent):void{
        var myColorTransform:ColorTransform = new ColorTransform();
        if (i%4==0) {
            myColorTransform.color = 0xFF0000;
        }
        else if (i%4==1) {
            myColorTransform.color = 0x0000FF;
        }
        else if (i%4==2) {
            myColorTransform.color = 0x00FF00;
        }
        else if (i%4==3) {
            myColorTransform.color = 0xFFFF00;
        }
        box9.transform.colorTransform = myColorTransform;
        i++;
    }
}

function func10(i:int):Function{
    return function paint(e:MouseEvent):void{
        var myColorTransform:ColorTransform = new ColorTransform();
        if (i%4==0) {
            myColorTransform.color = 0xFF0000;
        }
        else if (i%4==1) {
            myColorTransform.color = 0x0000FF;
        }
        else if (i%4==2) {
            myColorTransform.color = 0x00FF00;
        }
        else if (i%4==3) {
            myColorTransform.color = 0xFFFF00;
        }
        box10.transform.colorTransform = myColorTransform;
        i++;
    }
}

function func11(i:int):Function{
    return function paint(e:MouseEvent):void{
        var myColorTransform:ColorTransform = new ColorTransform();
        if (i%4==0) {
            myColorTransform.color = 0xFF0000;
        }
        else if (i%4==1) {
            myColorTransform.color = 0x0000FF;
        }
        else if (i%4==2) {
            myColorTransform.color = 0x00FF00;
        }
        else if (i%4==3) {
            myColorTransform.color = 0xFFFF00;
        }
        box11.transform.colorTransform = myColorTransform;
        i++;
    }
}

function func12(i:int):Function{
    return function paint(e:MouseEvent):void{
        var myColorTransform:ColorTransform = new ColorTransform();
        if (i%4==0) {
            myColorTransform.color = 0xFF0000;
        }
        else if (i%4==1) {
            myColorTransform.color = 0x0000FF;
        }
        else if (i%4==2) {
            myColorTransform.color = 0x00FF00;
        }
        else if (i%4==3) {
            myColorTransform.color = 0xFFFF00;
        }
        box12.transform.colorTransform = myColorTransform;
        i++;
    }
}

function func13(i:int):Function{
    return function paint(e:MouseEvent):void{
        var myColorTransform:ColorTransform = new ColorTransform();
        if (i%4==0) {
            myColorTransform.color = 0xFF0000;
        }
        else if (i%4==1) {
            myColorTransform.color = 0x0000FF;
        }
        else if (i%4==2) {
            myColorTransform.color = 0x00FF00;
        }
        else if (i%4==3) {
            myColorTransform.color = 0xFFFF00;
        }
        box13.transform.colorTransform = myColorTransform;
        i++;
    }
}

function func14(i:int):Function{
    return function paint(e:MouseEvent):void{
        var myColorTransform:ColorTransform = new ColorTransform();
        if (i%4==0) {
            myColorTransform.color = 0xFF0000;
        }
        else if (i%4==1) {
            myColorTransform.color = 0x0000FF;
        }
        else if (i%4==2) {
            myColorTransform.color = 0x00FF00;
        }
        else if (i%4==3) {
            myColorTransform.color = 0xFFFF00;
        }
        box14.transform.colorTransform = myColorTransform;
        i++;
    }
}

function func15(i:int):Function{
    return function paint(e:MouseEvent):void{
        var myColorTransform:ColorTransform = new ColorTransform();
        if (i%4==0) {
            myColorTransform.color = 0xFF0000;
        }
        else if (i%4==1) {
            myColorTransform.color = 0x0000FF;
        }
        else if (i%4==2) {
            myColorTransform.color = 0x00FF00;
        }
        else if (i%4==3) {
            myColorTransform.color = 0xFFFF00;
        }
        box15.transform.colorTransform = myColorTransform;
        i++;
    }
}

function func16(i:int):Function{
    return function paint(e:MouseEvent):void{
        var myColorTransform:ColorTransform = new ColorTransform();
        if (i%4==0) {
            myColorTransform.color = 0xFF0000;
        }
        else if (i%4==1) {
            myColorTransform.color = 0x0000FF;
        }
        else if (i%4==2) {
            myColorTransform.color = 0x00FF00;
        }
        else if (i%4==3) {
            myColorTransform.color = 0xFFFF00;
        }
        box16.transform.colorTransform = myColorTransform;
        i++;
    }
}

Answer 1

To do this, you have to declare i object-wide, and also don't use 16 functions, just make one function and employ Event.target property to find out which box was clicked, then change its colorTransform. Also, it'll be better if you would use 4 static color transform objects instead of creating one each time you click, but this can wait.

static var cts:Vector.<ColorTransform>=Vector.<ColorTransform>([]);
cts.push(new ColorTransform(0,0,0,1,0xFF,0,0,0));
cts.push(new ColorTransform(0,0,0,1,0,0,0xFF,0));
cts.push(new ColorTransform(0,0,0,1,0,0xFF,0,0));
cts.push(new ColorTransform(0,0,0,1,0xFF,0xFF,0,0));
// these are short forms of color transform initialization, 
// instead of making one and assigning "color", you pass required parameters
// at its creation time.
// add more in case you need
static var nextTransform:int=0;
function paint(e:Event):void {
    var dest:DisplayObject = e.target as DisplayObject;
    if (!dest) return; // should never trigger, but a good precaution anyway
    dest.transform.colorTransform = cts[nextTransform]; 
    nextTransform++;
    if (nextTransform>=cts.length) nextTransform=0;
}

In case you need this function to behave as it was originally, you should cast dest to MovieClip or the class your boxes are instead of DisplayObject, and employ dest.nextTransform in place of nextTransform everywhere within this function.

Also, for your own education, you should try and find out how does this code behave in case you'd decide to add more colors, and why would you have to change so much in your original code if so.