AS3: addChild multiple instances of library mc not displaying

Question

I'm trying to create a small proof-of-concept wherein a TextField is attached to a mc stored in the library and instantiated (via addChild). I can get the script to work for one instance, but if I try to make four copies (as below), only the third(?) instance of the TextField is displayed. (image of actionscript deleted) Thank you for your time.

Code follows:

import flash.display.MovieClip;
flash.display.Sprite;

var i:uint = 0;
var str:String = ""; // to be used to give the textField some values
var aGroup:Sprite = new Sprite(); //used to be some holder other than stage to get all the addChild (don't know if this is absolutely necessary
var aUFO:Array = new Array(); // these are arrays that will hold the instantiated copies of the same object
var aField:Array = new Array();

//main process for creating instances
for (i=0; i<4; i++) {
    var mcUFO:Saucer = new Saucer(); //mcUFO resides in the library with a MovieClip "Saucer" linkage
    aGroup.addChild(mcUFO);
    aUFO[i] = mcUFO;

    aUFO[i].addChild(tFormula); //tFormula is a textField defined elsewhere (previous frame)
    aField[i] = tFormula;

    str = "FillText"+String(i); //used just to temporarily load the textField with some values
    aField[i].text = str;

    aField[i].x -= 21.5; //this is just a rough, quick offset of the textfield to a better postion within the mcuFO
    aField[i].y -= 8;

    var mcDome:Sprite = new Dome(); //mcDome exists in the library with a Sprite linkage
    mcUFO.addChild(mcDome);
    mcDome.x -= 54; //this is just a quick way to relatively reposition the dome over the mcUFO
    mcDome.y -= 35;
}

I then follow with a small code to reposition the four instances so that they form a 2x2 stack.

for (i=0; i<4; i++) {
    if ((i == 0) || (i ==1)) {
        aUFO[i].x = 200 + i*200;
        aUFO[i].y = 200;
    }else{
        aUFO[i].x = 200 + (i-2)*200;
        aUFO[i].y = 100;
    }
}

stage.addChild(aGroup);//I don't know if this sprite is necessary, but I read somewhere that we're not supposed to add instances directly onto stage, but rather add to a sprite and then addChild that to the stage

this.stop();

Answer 1

Your mistake is not understanding how instances work.

Library is not a storage, it's like a collection of blueprints. Every time you use the new operator, you create a new instance by the blueprint you have in Library (or the new instance of the class that is not associated with any particular Library object, like an empty new Sprite container).

On the other hand, everything you pre-designed on the stage exist as final instances. If you designed one TextField, there actually is nothing more than one TextField.

Imagine you have one apple (TextField instance) and a machine that produces (new Saucer) paper bags. You make a paper bag and put your apple in. You make another bag and put your apple into the second bag. Now you get the picture, right? The first bag is empty now, even though you didn't explicitly specify removing the apple from the first bag.

To solve the problem, you need to have a TextField already designed inside the Saucer thing in the Library. This way when you instantiate a new Saucer, you will have that TextField also instantiated to the new Saucer from the Library blueprint. Give that TextField an instance name (e.g. "Formula") and address it by it. Your code will look like that:

// Content container.
var aGroup:Sprite = new Sprite;

// The list of Saucers.
var aUFO:Array = new Array;

// The list of Saucer's TextFields.
var aField:Array = new Array;

// Instantiation loop.
for (var i:int = 0; i < 4; i++)
{
    // Create a new instance of Saucer object.
    var mcUFO:Saucer = new Saucer; 
    aGroup.addChild(mcUFO);
    aUFO[i] = mcUFO;

    // Obtain the unique TextField reference from the Saucer
    // you are currently working on.
    aField[i] = mcUFO.getChildByName("Formula");

    // Assign text to the TextField.
    aField[i].text = "FillText" + i;

    // No need, TextField is already positioned by design.
    // aField[i].x -= 21.5; // aField[i].y -= 8;

    // Instantiate a Dome from the library
    // (but you can do the same and pre-design Dome into the Saucer).
    var mcDome:Sprite = new Dome;
    mcUFO.addChild(mcDome);

    // Position the Dome.
    mcDome.x -= 54;
    mcDome.y -= 35;
}

Alternately, you can go all-scripty and create new TextField instances, but keep in mind that you will need to set every single property of that new instance, or you might not see any text or anything at all:

var textArea:TextField;

textArea = new TextField;

textArea.x = 10;
textArea.y = 10;

textArea.border = true;
textArea.wordWrap = false;
textArea.multiline = true;
textArea.selectable = true;
textArea.background = true;

var aFormat:TextFormat;

aFormat = textArea.getTextFormat();
aFormat.font = "_typewriter";
aFormat.size = 12;
aFormat.align = TextFormatAlign.LEFT;

textArea.setTextFormat(aFormat);
textArea.defaultTextFormat = aFormat;