Help with compiled Component that has attachMovie() to internal movie. Sizing not consistent!

Help with compiled Component that has attachMovie() to internal movie. Sizing not consistent!



After hours and hours trying to debug this (notice the debug var for testing), I'm reaching out for more experienced help/advice as to what I am doing wrong.

Basic issue:
I'm trying to make a v2 component, that includes within it an optional MC as background.
The internal MC has to be sized to fill in the full width/height of the control.

The problem:
As it stands, I get different results depending on whether I view the compiled component in the designer (looks ok) or whether I press ctrl-Enter and view it in the player -- when it doesn't work correctly. The internal MC (background image) is bigger than it should be!

What I thought i was suppossed to do:
In the resize method, the code that is setting up the sizing is currently done by the following (seems right in IDE, bug ignores it in runtime and makes it too big):

            background_mc._height = height;
            background_mc._width = width;


More Description of control in case you've read this far:
Basically its just a label that draws an rounded rectangle frame if no MC name is provided. If an MC name is provided, it does not draw the border, and just displays the MC as the background... other parameters are background color, borderColor, borderthickness, etc.  
Its meant to be half useful, half force me to learn v2 component design in flash.


Description of code:
I started from the tutorial at:
//See: http://www.ultrashock.com/ff.htm?http://www.ultrashock.com/tutorials/flashmx2004/components.php
And basically only did two major changes: added more parameters at the bottom, and rewrote the draw() method to handle the border and if/else clause to draw the border or resize the background MC. And added a debug var to add stuff to the text to see what was going on...

Note that if textSize=0, it sets the fontsize to 2/3 size of the control (I mention this because for seeing the debug output, this is too big to read...)




Finally, the code:
//See: http://www.ultrashock.com/ff.htm?http://www.ultrashock.com/tutorials/flashmx2004/components.php


import mx.core.UIComponent;

// We declare our class fully qualified. Also we
// make this class a child of the UIComponent class
// by using the extends keyword
class XAct.AS.Controls.LabelBox extends UIComponent{

      // These are required for createClassObject()
      static var symbolName:String = "XAct.AS.Controls.LabelBox";
      static var symbolOwner:Object = XAct.AS.Controls.LabelBox;

      // we declare our Bounding Box here so that we can
      // reference it in our code
      private var boundingbox_mc:MovieClip;
      private var background_mc:MovieClip;

      // this will be our TextField that we will use to display the text
      private var dynamicTextField:TextField = null;


      // private fields behind get/set parameters:
      private var _debug:Boolean = false;
      private var _backgroundMCName:String = null;
      private var _backColor:Number = 0x0F0FFF;
      private var _labelText:String = null;
      private var _textBold:Boolean = true;
      private var _textBorder:Boolean = true;
      private var _textSize:Number = 0;
      private var _textColor:Number;
      private var _borderThickness:Number=2;
      private var _borderRadius:Number = 8;
      private var _borderColor:Number=0;


      private var _depth:Number = 0;




      // This is our constructor. Most of the time you will
      // just leave this blank when developing UIComponents.
      // Instead we use the init() function to set up our component
      function TextBox(){};





      // This function is automatically called when our component
      // extends the UIComponent class.
      private function init():Void     {

            // we call the superclass' init function which is required
            // when subclassing UIComponent
            super.init();

            // Since we have a bounding box, we need to hide it and make sure
            // that its width and height are set to 0. Notice that we are not using
            // "this" as we used to in AS1. In AS2 the compiler automatically
            // references the class members.
            boundingbox_mc._visible = false;
            boundingbox_mc._width = 0;
            boundingbox_mc._height = 0;

  _xscale = 100;
  _yscale = 100;

      }

      // This function is also called automatically when our component
      // extends the UIComponent class.
      private function createChildren():Void     {
            // This method is useful for when you want to create/attach sub-objects.
            // This method only gets called once.

            // In our component the only child object we need to create
            // is the TextField. The rest
            // is handled by the draw function as we will see below.
            // createLabel() is a method provided by UIObject that we can use
            // when we want to create a TextField. This is recommended
            // over the use of createTextField() method we are accustomed to.


            //Stick background Image In:
//            if (_backgroundMCName){
//                  this.attachMovie(_backgroundMCName, "background_mc", _depth++);
//            }


            //Create Text Field, and set its Filters
                  dynamicTextField = createLabel("dynamicTextField",_depth++);
            dynamicTextField.setTextFormat(new TextFormat());
            dynamicTextField.autoSize = "center";

                 var _filter = new flash.filters.DropShadowFilter();
            var _filtersCollection : Array = dynamicTextField.filters;
            _filtersCollection.push(_filter);
            dynamicTextField.filters = _filtersCollection;




            };


      // This function is called every time our component is invalidated.
      private function draw():Void    {
            // We get the appropriate background color from the style manager
            // the getStyle() method is provided to us by the framework. Make
            // sure to review the list of styles that the Macromedia components
            // support from the help as you will want your component to use the same
            // styleNames.

            this.clear();

            var W : Number = this._width;
            var H : Number = this._height;
            //this._xscale = 0;
            //this._yscale =0;
            //this.setSize(W,H);

            //HANDLE BACKGROUND COLOR OR MC:
            var tmpBackColor:Number;
            if(getStyle("backgroundColor")) {
                  tmpBackColor = getStyle("backgroundColor");
            }
            else {
                  tmpBackColor = _backColor;
            }


            //Only draw rectangle if no background image...
            if (!_backgroundMCName){
                  this.lineStyle(_borderThickness, _borderColor, 100, true, null, "none", "miter", 2);
                  drawRoundedRectangle(this, width, height, _borderThickness, _borderRadius, tmpBackColor, 100);
            }




            //HANDLE LABEL TEXT:

            var tmpTextSize:Number = _textSize;
                 var tmpTextFormat : TextFormat = dynamicTextField.getTextFormat();

                 if(!tmpTextSize){tmpTextSize=height * (2/3);}

            //Set the style of the textfield:
                 tmpTextFormat.bold = _textBold;
                 tmpTextFormat.color = _textColor;
                 tmpTextFormat.size = tmpTextSize;
                 //dynamicTextField.setTextFormat(tmpTextFormat); //Doesn't work
                 dynamicTextField.setNewTextFormat(tmpTextFormat);

                 //Set the border on textfield:
            dynamicTextField.border = _textBorder;

            //Set the Text after having set the Style:
            var tmpText  = (_debug!=true)?Text:

                              (Text + "\n" +
                              "\n"+
                              "width\\height: " + width + "\\" + height + "\n" +
                              "_width\\_height: " + _width + "\\" + _height + "\n" +
                              "_xscale\\_yscale: " + _xscale + "\\" + _yscale + "\n" +
                              "mc._width\\mc._width: "+ background_mc._width + "\\" + background_mc._height + "\n" +
                              "mc._xscale\\mc._yscale: "+ background_mc._xscale + "\\" + background_mc._yscale + "\n" +
                              "");
                 dynamicTextField.text = tmpText;

                 // We set the size of the Label so that it is viewable:
                 dynamicTextField.setSize(dynamicTextField.textWidth+1,dynamicTextField.textHeight+1);

                 // now we center our Label in the middle of our box
                 var tWidth:Number = width/2 - dynamicTextField.width/2;
                 var tHeight:Number = height/2 - dynamicTextField.height/2;
                 dynamicTextField._x = tWidth;
                 dynamicTextField._y = tHeight;


            //SETUP BACKGROUND IMAGE:


            //background_mc._xscale = 100 * (width / background_mc._width );
            //background_mc._yscale = 100 * (height / background_mc._height);

            background_mc._height = height;
            background_mc._width = width;


            if (_debug){


/*
                  //versus the _width/_height: (RED)
                  this.moveTo(1,1);
                  this.lineStyle(1, 0xFF0000);
                  this.lineTo(_width-1,1);
                  this.lineTo(_width-1,_height-1);
                  this.lineTo(1,_height-1);
                  this.lineTo(1,1);
*/
                  //Let's see what the width/height looks like...(BLUE)
                  this.moveTo(1,1);
                  this.lineStyle(1, 0x0000FF);
                  this.lineTo(width-1,1);
                  this.lineTo(width-1,height-1);
                  this.lineTo(1,height-1);
                  this.lineTo(1,1);
            }

           }

      // The size function is automatically called whenever our component is
      // resized.
           private function size():Void      {
                 // Since we don't have any special implementation
                 // for sizing. We can just invalidate the component
                 // invalidating the component will cause the component's
                 // draw() function to be called.



                 invalidate();
           };



      // This is our setter for the text property.
      // This will set the value and invalidate() the component
      // by adding the [Inspectable] meta-tag, the Flash IDE will
      // add an available text property to the property inspector

      //-------------------------------------------------
      //-------------------------------------------------
      [Inspectable (type=Boolean, defaultValue=True)]
           function set Debug(x:Boolean):Void     {
                 _debug = x;
                 invalidate();
      };

           // This is a getter for the text property. Our user can
           // use this property to retrieve the current value of the text
           function get Debug():Boolean     {
                 return _debug;
           }
      //-------------------------------------------------
      //-------------------------------------------------
      [Inspectable (type=String, defaultValue="---"]
           function set Text(x:String):Void     {
                 _labelText = x;
                 invalidate();
      };

           // This is a getter for the text property. Our user can
           // use this property to retrieve the current value of the text
           function get Text():String {
                 return _labelText;
           }
      //-------------------------------------------------
      [Inspectable (type=Color , defaultValue=0x0F0FFF)]
      function set TextColor(x:Number):Void     {
            _textColor = x;
            invalidate();
      };

      // This is a getter for the text property. Our user can
      // use this property to retrieve the current value of the text
      function get TextColor(): Number     {
            return _textColor;
      }
      //-------------------------------------------------
      [Inspectable (type=Number, defaultValue=0)]
      function set TextSize(x:Number):Void     {
            _textSize = x;

            invalidate();
      };

      // This is a getter for the text property. Our user can
      // use this property to retrieve the current value of the text
      function get TextSize(): Number     {
            return _textSize;
      }
      //-------------------------------------------------
      [Inspectable (type=Boolean, defaultValue=True)]
           function set TextBold(x:Boolean):Void     {
                 _textBold = x;
                 invalidate();
      };

           // This is a getter for the text property. Our user can
           // use this property to retrieve the current value of the text
           function get TextBold():Boolean     {
                 return _textBold;
           }
      //-------------------------------------------------
      [Inspectable (type=Boolean, defaultValue=True)]
           function set TextBorder(x:Boolean):Void     {
                 _textBorder = x;
                 invalidate();
      };

           // This is a getter for the text property. Our user can
           // use this property to retrieve the current value of the text
           function get TextBorder():Boolean     {
                 return _textBorder;
           }
      //-------------------------------------------------
      [Inspectable (type=Color , defaultValue=0x0F0FFF)]
      function set BackColor(x:Number):Void     {
            _backColor = x;
            invalidate();
      };

      // This is a getter for the text property. Our user can
      // use this property to retrieve the current value of the text
      function get BackColor(): Number     {
            return _backColor;
      }
      //-------------------------------------------------
      //-------------------------------------------------
      [Inspectable (type=Number , defaultValue=2)]
      function set BorderThickness(x:Number):Void     {
            _borderThickness = x;
            invalidate();
      };

      // This is a getter for the text property. Our user can
      // use this property to retrieve the current value of the text
      function get BorderThickness(): Number     {
            return _borderThickness;
      }
      //-------------------------------------------------
      [Inspectable (type=Number , defaultValue=8)]
      function set BorderRadius(x:Number):Void     {
            _borderRadius = x;
            invalidate();
      };

      // This is a getter for the text property. Our user can
      // use this property to retrieve the current value of the text
      function get BorderRadius(): Number     {
            return _borderRadius;
      }
      //-------------------------------------------------
      [Inspectable (type=Color , defaultValue=0x0F0FFF)]
      function set BorderColor(x:Number):Void     {
            _borderColor = x;
            invalidate();
      };

      // This is a getter for the text property. Our user can
      // use this property to retrieve the current value of the text
      function get BorderColor(): Number     {
            return _borderColor;
      }
      //-------------------------------------------------
      //-------------------------------------------------
      [Inspectable (type=String, defaultValue=""]
      function set BackgroundMCName (x:String): Void{

            _backgroundMCName = x;
            if (_backgroundMCName){
                  this.attachMovie(_backgroundMCName, "background_mc", -1);
            }else{
                  background_mc.unloadMovie();
            }

            invalidate();
      }

      function get BackgroundMCName():String{
            return _backgroundMCName;
      }

      //-------------------------------------------------
      //-------------------------------------------------


      function drawRoundedRectangle(target_mc:MovieClip, boxWidth:Number, boxHeight:Number, lineThickness, cornerRadius:Number, fillColor:Number, fillAlpha:Number):Void {
          with (target_mc) {

                //public lineStyle(lineThickness, lineColor, alpha:Number, pixelHinting:Boolean, noScale:String, capsStyle:String, jointStyle:String, miterLimit:Number);

            if (lineThickness <0){lineThickness =0;}

                var OFF:Number = lineThickness/2;


            var RADIUS = cornerRadius + OFF;


            beginFill(fillColor, fillAlpha);

            moveTo(RADIUS, 0 + OFF);

            lineTo(width - RADIUS, 0 + OFF);
            curveTo(boxWidth-OFF, 0+OFF, boxWidth-OFF, 0 + RADIUS);

            lineTo(boxWidth-OFF, boxHeight - RADIUS);
            curveTo(boxWidth-OFF, boxHeight-OFF, boxWidth - RADIUS, boxHeight-OFF);

            lineTo(0 + RADIUS, boxHeight-OFF);
            curveTo(0+OFF, boxHeight-OFF, 0+OFF, boxHeight - RADIUS);

            lineTo(0+OFF, RADIUS);
            curveTo(0+OFF, 0+OFF, RADIUS, 0+OFF);

            endFill();
          }
}


};