Question

I’ve come across a problematic issue with some functionality I’m attempting to develop in ActionScript3 on the Flash Professional CS5 platform and was wondering if anybody could point me in the right direction with it?

Background

Within my ActionScript Class, I have written a MouseEvent function which dynamically adds multiple instances of the same MovieClip (user_shape) on to the stage in the formation of a shape that the user has designed in an earlier stage of the program.

This shape effect is achieved through a For Loop that loops through the entire length of a Multi-Dimensional Boolean based array looking for an instance of true (determined by the user’s actions earlier) and then adding a MovieClip to the stage if this is the case.

Each group of MovieClips added with a single click, while always having the same instance name (user_shape), is always assigned a unique ID, which I’ve set up by including a numerical variable that increments up by 1 each time I add the batch of ‘user_shape’ MovieClips through left click to the stage.

The user can pick from up to eight different colours to assign to their shape (via selection boxes) before adding it to the stage. For each of these eight colours I have added a numerical variable (shapeCounterBlue, shapeCounterRed etc.) which basically counts ++ every time I add a shape of a certain colour to the stage and likewise it counts — if I chose to remove a shape.

As a shape is added through my main function I attach a dynamic textField to each MovieClip and populate it with the variable counter number for the particular colour I have selected (see image below).

Problem

OK, so here is my issue. I need my unique number (displayed in white) for each coloured shape to dynamically re-populate and update when I remove a shape from the stage. As you can see in the image I’ve attached, if I were to remove the second blue shape, my third blue shape’s numbers would need to revert from 3 to 2.

Likewise if I had six red shapes on the stage and I decided to remove the third one, then shapes 4,5,6 (before 3 is deleted), would need to have their numbers changed to 3,4,5 respectively.

Or I could have four green shapes and remove the first shape; this would mean that shapes 2,3,4 would actually need to change to be 1,2,3.

You get the idea. But does anybody know how I could achieve this?

My problem has further been hampered by the fact that the textFields for each MovieClip are added dynamically through my For Loop to the user_shape Child. This means that within my AS class, I haven’t been able to publicly declare these textFields and access the values within them, as they only exist in the For Loop used in my add shape function and no where else.

Many thanks in advance.

Answer 1

as to the targeting dynamically created text fields. In your loop assign a name that you can later access.

for(i:int=0;i<myArray.length;i++){
  var txt:TextField = new TextField();
  txt.name = "txt_" + i;
  this.addChild(txt);
}

Then to access your textfields outside the loop target them like this:

var targetTxt:TextField = this.getChildByName("txt_10");

UPDATE

Ok so I had some time and went ahead and solved your entire problem

(Download Source FLA/AS files)

Ok so there are some MCs in the library that I call in my code. I created a Box MC that has a label textfield, a border, and a background MC that I can target to color.

I created a countColors() that loops over all the boxes once you have click on one (triggered from a mouseEvent within each box). It counts the different colors totals in an array and then sends a custom event to let all the boxes know they can fetch the color totals to update their labels.

I hope this helps.

main.as

package  {

import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.events.Event;

public class main extends MovieClip {

    public static var ROOT:MovieClip;
    public var totalBoxes:int = 100;
    public var boxContainer:Sprite;
    public static var colorArray:Array = [0xFF0000, 0x0000FF, 0x00FF00];
    public static var colorCount:Array = [0,0,0];
    public static var currentColor = 0;

    public function main() {

        // set ref to this
        ROOT = this; // so I can get back to it from the boxes

        // color selection
        redBtn.addEventListener(MouseEvent.CLICK, chooseColor);
        blueBtn.addEventListener(MouseEvent.CLICK, chooseColor);
        greenBtn.addEventListener(MouseEvent.CLICK, chooseColor);

        // add box container to stage
        boxContainer = new Sprite();
        boxContainer.x = boxContainer.y = 10;
        this.addChild(boxContainer);

        var row:int=0;
        var col:int=0;
        for(var i:int=0; i < totalBoxes; i++){

            var box:Box = new Box();
            box.x  = col * box.width;
            box.y = row * box.height;
            box.name = "box_" + i;
            box.ID = i;
            box.updateDisplay();
            boxContainer.addChild(box);


            if(col < 9){
                col++;
            }else{
                col = 0;
                row++;
            }
        }

    }

    private function chooseColor(e:MouseEvent):void
    {

        var btn:MovieClip = e.currentTarget as MovieClip;

        switch(btn.name)
        {
            case "redBtn":
                currentColor=0;
                break;
            case "blueBtn":
                currentColor=1;
                break;
            case "greenBtn":
                currentColor=2;
                break;  
        }

        // move currentColorArrow
        currentColorArrow.x = btn.x;

    }

    public function countColors():void
    {
        colorCount = [0,0,0]; // reset array
        for(var i:int=0; i < totalBoxes; i++){
            var box:Box = boxContainer.getChildByName("box_" + i) as Box;
            if(box.colorID > -1)
            {
                colorCount[ box.colorID ]++;
            }
        }

        // send custom event that boxes are listening for
        this.dispatchEvent(new Event("ColorCountUpdated"));
    }
}

}

Box.as

package  {

import flash.display.MovieClip;
import flash.geom.ColorTransform;
import flash.events.MouseEvent;
import flash.events.Event;


public class Box extends MovieClip {

    public var ID:int;
    public var colorID:int = -1;
    private var active:Boolean = false;
    private var bgColor:Number = 0xEFEFEF;

    public function Box() {

        this.addEventListener(MouseEvent.CLICK, selectBox);
        main.ROOT.addEventListener("ColorCountUpdated", updateCount); // listen to root for custom event to update display

    }

    public function updateDisplay() {

        if(active == false){
            boxLabel.htmlText = "<font color='#000000'>"+ ID +"</font>";
        }else{
            boxLabel.htmlText = "<font color='#FFFFFF'>"+ main.colorCount[colorID] +"</font>";
        }

        var myColorTransform = new ColorTransform();
        myColorTransform.color = bgColor;
        boxBG.transform.colorTransform = myColorTransform;

    }

    private function selectBox(e:MouseEvent):void
    {   

        // set bgColor
        if(active == false){
            bgColor = main.colorArray[main.currentColor];
            colorID = main.currentColor;
        }else{
            bgColor = 0xEFEFEF;
            colorID = -1;
        }

        // set active state
        active = !active // toggle true/false
        main.ROOT.countColors();
    }

    private function updateCount(e:Event):void
    {
        updateDisplay();
    }

}

}