Hello,

I'm trying to create a grid where the users can 'draw' across it and change the colors of the grid squares to a chosen color.

In the following code, I'm creating the grid with squares. I've got the functionality 'working', but it's only working on the last square instanced.

How do I get it to work on all the squares, not just the last one?

Thank you for any help you can give me.

JD-

Code:
package {
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.text.TextField;


public class ClassBoxColor extends MovieClip {
        public var boxColor = "0xFFFFFF";
        public var lineColor = "0x666666";

        public function ClassBoxColor() {

                // ****Create the Grid****
                var xpos:Number;
                var xposStart:Number = 20;      // Initial Placement of grid along x axis
                var ypos:Number = 100;          // Initial Placement of grid along y axis
                var xNum:Number = 10;           // Size of Grid across in squares
                var yNum:Number = 10;           // Size of Grid across in squares

                for (var yaxis:Number = 1; yaxis <= yNum; yaxis++) {
                        xpos = xposStart;
                        for (var xaxis:Number = 1; xaxis <= xNum; xaxis++) {
                                // Draw the square
                                var colorBox:Sprite = new Sprite();
                                colorBox.graphics.beginFill(boxColor, 1 );
                                colorBox.graphics.lineStyle(1, lineColor);
                                colorBox.graphics.drawRect(0,0,20,20);
                                colorBox.x = xpos;
                                colorBox.y = ypos;
                                colorBox.buttonMode = true;
                                addChild(colorBox);
                                xpos += 20;
                        }
                        ypos += 20;
                }

                // LISTENERS

                Grey_btn.addEventListener(MouseEvent.CLICK, setGrey);                   // This button instance is onstage
                DarkGrey_btn.addEventListener(MouseEvent.CLICK, setDarkGrey);   // This button instance is onstage

                stage.addEventListener(MouseEvent.MOUSE_DOWN, drawColor);
                stage.addEventListener(MouseEvent.MOUSE_UP, stopDrawColor);
                colorBox.addEventListener(MouseEvent.CLICK, changeColor);

                // FUNCTIONS & ACTIONS

                Grey_btn.buttonMode = true;
                DarkGrey_btn.buttonMode = true;

                CurrentBoxColor_txt.text = boxColor;// Display the currently selected color in the CurrentBoxColor_txt instance textfield that is onstage

                function setGrey(event:MouseEvent):void {
                        boxColor = "0xCCCCCC";
                        CurrentBoxColor_txt.text = boxColor;
                }
                function setDarkGrey(event:MouseEvent):void {
                        boxColor = "0x666666";
                        CurrentBoxColor_txt.text = boxColor;
                }
                function changeColor(event:MouseEvent):void {
                        colorBox.graphics.clear();
                        colorBox.graphics.lineStyle(1, lineColor);
                        colorBox.graphics.beginFill(boxColor, 1);
                        colorBox.graphics.drawRect(0,0,20,20);
                        colorBox.graphics.endFill();
                }
                function drawColor(event:MouseEvent):void {
                        //colorBox.addEventListener(MouseEvent.MOUSE_DOWN, changeColor);
                        colorBox.addEventListener(MouseEvent.ROLL_OVER, changeColor);
                }
                function stopDrawColor(event:MouseEvent):void {
                        //colorBox.removeEventListener(MouseEvent.MOUSE_DOWN, changeColor);
                        colorBox.removeEventListener(MouseEvent.ROLL_OVER, changeColor);
                }
        }
}