AS3 flash CC I want to set the width of the parent Movieclip of a Textfield

Question

I have dynamically created a bunch of textfields, the number of which depends on xml input. The textfields need to be button-enabled, so I thought the easiest solution is to put them in a movieclip and buttonMode that movieclip.

The hierarchy looks like this: main (extends MovieClip) -> klankoefening (a MovieClip) -> Textfieldparent (a MovieClip) -> Textfield

I have a variable maxw which contains the biggest textfield's width and I want all my Textfieldparents to have this width.

I'm trying to do it like this:

//generate textfields
keuzes = new XMLList(lijstOpties.categorie.(@cat == catname));
var nrs:int = keuzes.keuze.length(); //aantal keuzemogelijkheden
var maxw:int = 0; //grootste breedte tf, nodig voor bepalen breedte knoppen

for (var nr:int = 0; nr < nrs; nr++) { 
    var tf:TextField = createTextfield(werkfmt);
    tf.text = keuzes.keuze[nr].toString();
    tf.autoSize = "center";
    tf.background = true;
    tf.backgroundColor = 0xffcc33;
    tf.border = true;
    tf.borderColor = 0x000000;
    tf.name = "keuzetf";
    tf.selectable = false;
    tf.x = 0;
    tf.y = 0;

    if (tf.width > maxw) {maxw = tf.width;}

    var tfcontainer:MovieClip = new MovieClip();
    tfcontainer.buttonMode = true;
    tfcontainer.name = keuzes.keuze[nr].toString();
    tfcontainer.addChild(tf);

    klankoefening.addChildAt(tfcontainer,nr);
}

for (var an:int = 0; an < 3; an++) {
    var mcs:MovieClip = klankoefening.getChildAt(an) as MovieClip;
    mcs.width = maxw;
    trace ("mcs " + mcs.width);

    var mtf:TextField = mcs.getChildAt(0) as TextField;
            trace ("mtf " + mtf.text);
}

the trace results are

mcs 32.05
mcs 33
mcs 21.25

Which I find odd, because I stated in my second loop that the width for all Textfieldparents should be set to maxw. What is happening?

Answer 1

Consider drawing an underlaying Rectangle of desired width and height. You can use mcs.graphics to do that. The trick is, width of a DisplayObjectContainer is a calculated property, and changing it will likely result in changing scale. Say, a MC has two shapes as chilren, one at (1000,0) and another at (0,0), and both have width of 10 - the resultant width of that MC will be 1010. So, instead of changing width, simulate its change by drawing a rectangle on the MC.

mcs.graphics.clear();
mcs.graphics.lineStyle(0,0,0);
mcs.graphics.beginFill(0x808080,0); // bogus filled rect, to capture events
mcs.graphics.drawRect(0,0,maxw,maxh); // height is needed too
mcs.graphics.endFill();

Answer 2

After thinking a bit more about your problem, I think your issue is that the buttons you're adding the text to have a width entirely defined by the TextField, and because you're set the text to autoSize, it's snapping back to it's original width.

What you will need to do to make the width more indicative of what you need, and allow for easy clicking on the buttons is to create a transparent rectangle in the tfContainer mc, set the width of the tfContainer, and then add the text to the button.