ActionScript 3 multiple instance, same name

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);
                }
        }
}

---

Right now you're using the colorBox variable to hold each box in the grid as it's created but it only holds one at a time so you're just getting the most recent. You need to move the addEventHandler code inside your loop so it's put onto every box.

As far as intended functionality, you'll probably want to use a mouseMove or dragOver to simulate painting - and in your event handlers switch over from colorBox to event.currentTarget.

Your scope is all mixed up. It looks like you're doing everything in the constructor, which is very bad. The constructor should just be for instantiating things and very basic setup. You should move all those other functions outside of the constructor.

Also, to answer your question, add the event listener inside the loop, and use event.currentTarget to get the right instance in the changeColor function.

THANK YOU! event.currentTarget was the key! It's working.

5Ton, please excuse my ignorance, but where's(what's) my constructor? Where exactly am I going wrong? I'm still learning this, and I'm trying to learn as elegant a code as I can. I know enough to be dangerous, as they say.

JD-

When you define a class, the function with the same name as the class name is the constructor. It is special because it is the function called to build your object when you call "new MyClass()". It is also never compiled, but always interpreted, which makes it much slower than other functions.

It is bad practice in general to have a single function do too much, and especially to have named functions defined inside other functions. It makes the scope very hard to figure out. Functions defined within other functions is a legitimate thing to do, but it's an advanced technique and you should understand things like variable scope and closures before you rely on it.

Unless I'm misreading your code above, your class has only a single method, which is the constructor. All you can do with it is new ClassBoxColor() and get the boxColor and lineColor variables.

Also, the boxColor and lineColor variables should be typed as uint, and remove the quotes from their values.

I have so much to learn.....

Thank you for your advice. I now have a good direction to continue my self education.