Question on dynamically sizing a button with textField

Question

Hi Stackers! My question today is dealing with a dynamically generated button with a textField.

I have the button copy in XML and I need to add a buffer of 10 pixels to either side of the textField. I tried to CENTER my textFormat, but then I could not see my text because the button is for some strange reason 545.45 instead of 88 like it should be. When I change the alignment to LEFT then I can see my text, but still the larger issue is my button size is horribly off... Hoping to get pointed in the right direction :)

Here you can see the button with border set to true:

My PlayerControls.as class:

w & h = overall width/height passed from document class
color = HEX for button later
extraBtn = boolean to set special button on/off
extraTxt = the copy for the textField on the special button

public function drawControls(w, h, color, extraBtn, extraTxt):void {            
    sizeW    = w;
    sizeH    = h;
    videoW   = sizeW - 16;
    xmlColor = color;

    controls = new EmptyMov();

// Special Button Settings ··································
if (extraBtn)   {
    trace("extraTxt = "+extraTxt);

    sCopy.defaultTextFormat = Fonts.SpecialCopy;
    sCopy.border            = false;
    sCopy.embedFonts        = false;
    sCopy.gridFitType       = "SUBPIXEL";
    sCopy.sharpness         = 100;
    sCopy.antiAliasType     = flash.text.AntiAliasType.ADVANCED;
    sCopy.selectable        = true;
    sCopy.mouseEnabled      = true;
    //sCopy.x                 = 0;
    //sCopy.y                 = 0;
    sCopy.width             = sCopy.width; //≈
    sCopy.height            = 20;
    sCopy.text              = extraTxt;

    btn_Extra       = new Btn_Extra();
    btn_Extra.width = (sCopy.width + 20);
    btn_Extra.x     = (videoW - btn_Extra.width);

    btn_Extra.addChild(sCopy);

    trace("sCopy.width + 20  = "+(sCopy.width + 20));
    trace("sCopy.width       = "+sCopy.width);
    trace("btn_Extra.width   = "+btn_Extra.width);
}
else if (!extraBtn) {
    trace("No special button");
}

// Timeline Background ····································
timelineBG       = new TimelineBG();
timelineBG.width = (sizeW - 16);

// Add buttons ············································
addChild(controls);
controls.addChild(timelineBG);
controls.addChild(btn_Extra);
}

This is what Traces out:

---

------------------------------
extraTxt = StackOverflow
sCopy.width + 20  = 120    // 20 = 10 pixels on both sides for spacing
sCopy.width       = 100    // says width is 100
btn_Extra.width   = 545.45 // WTF?

---

My Fonts.as class:

    SpecialCopy.font  = "Arial";
    SpecialCopy.size  = 11;
    SpecialCopy.bold  = true;
    SpecialCopy.color = 0xFFFFFF;
    SpecialCopy.align = TextFormatAlign.LEFT;

Oh btw off-topic, but I've been jamming to this song about Flash on repeat for a while now lol!

Answer 1

Did you try using the autoSize property of the text field? You can set the autoSize property to TextFieldAutoSize.CENTER, which will resize the width of the text field to the width of the text without changing the x value of the center point. This only works for single line text fields (multiline = false).
– wpjmurray

Thanks wpjmurray!