Problem using images in a button skin

Question

So, I have a weird problem. I need to be able to see a button in design mode. My button is a custom component (a ButtonBase) with a skin. So, I left is a tiny bit of the default skin so that you can see what it looked like in design mode. Now, the paths to the images that will be used for the various states of the button are binded to strings passed from another subcomponent. There was no other way to get what we needed done, so it stays messy. Anyway, I don't get things to display correctly. Here's the code, and after an image for what I'm getting:
[CODE]
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
                         xmlns:s="library://ns.adobe.com/flex/spark"
                         xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
                         xmlns:mx="library://ns.adobe.com/flex/mx"
                         minWidth="21" minHeight="21" alpha.disabled="0.5"
                         preinitialize="initImageVars()" creationComplete="init()">
    <!-- host component -->
    <fx:Metadata>
        <![CDATA[
        [HostComponent("customComponents.ToggleButtonCustom")]
        ]]>
    </fx:Metadata>
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="down" />
        <s:State name="selected" />
        <s:State name="disabled" />
        <s:State name="over" />
    </s:states>
    <fx:Script>
        <![CDATA[        
            import mx.controls.Alert;
            /* First thing's first: we need to initialize our global and accessable components. */
            [Bindable]
            public var upButtonPath:String = "";
            [Bindable]
            public var downButtonPath:String = "";
            [Bindable]
            public var activeButtonPath:String = "";
            [Bindable]
            public var disabledButtonPath:String = "";
            [Bindable]
            protected var label:String = "";
            private function initImageVars():void
                upButtonPath = "assets/" + this.hostComponent.upButtonPath;
                downButtonPath = "assets/" + this.hostComponent.downButtonPath;
                activeButtonPath = "assets/" + this.hostComponent.activeButtonPath;
                disabledButtonPath = "assets/" + this.hostComponent.disabledButtonPath;
            private function init():void
                /* Give values to public variables */
                //upButtonPath = "Up.png";
                //downButtonPath = "Down.png";
                //activeButtonPath = "Active.png";
                label = this.hostComponent.label;
            /* Define the skin elements that should not be colorized. For button, the graphics are colorized but the label is not. */
            static private const exclusions:Array = ["labelDisplay"];
            override public function get colorizeExclusions():Array {return exclusions;}
            override protected function initializationComplete():void
                useChromeColor = true;
                super.initializationComplete();
            private var cornerRadius:Number = 2;
        ]]>       
    </fx:Script>
    <!-- layer 1: fill -->
    <s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF"
                                                 color.down="0xAAAAAA"
                                                 color.selected="0xBBBDBD"
                                                 alpha="0.85" />
                <s:GradientEntry color="0xD8D8D8"
                                                 color.down="0x929496"
                                                 color.selected="0x9FA0A1"
                                                 alpha="0.85" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    <mx:ViewStack id="buttonImage" x="0" y="0"
                                selectedIndex="0" selectedIndex.down="1" selectedIndex.selected="2"    selectedIndex.disabled="3">
        <s:NavigatorContent id="upState">
            <mx:Image source="{upButtonPath}" width="500" height="500" />
        </s:NavigatorContent>
        <s:NavigatorContent id="downState">
            <mx:Image source="{downButtonPath}" />
        </s:NavigatorContent>
        <s:NavigatorContent id="activeSate">
            <mx:Image source="{activeButtonPath}" />
        </s:NavigatorContent>
        <s:NavigatorContent id="disabledState">
            <mx:Image source="{disabledButtonPath}" />
        </s:NavigatorContent>
    </mx:ViewStack>
    <s:Label id="labelDisplay" text="{label}"
                     textAlign="center"
                     verticalAlign="middle"
                     maxDisplayedLines="3"
                     horizontalCenter="0" verticalCenter="1"
                     left="10" right="10" top="2" bottom="2">
    </s:Label>
</s:SparkSkin>
[/CODE]
That gives me this image:
And if I use the following code to resize it, I get this:
[CODE]
/* From the component, called from init(), which is called on creationComplete */
private function resizeEverything():void
  var dummyImage:Image = new Image();
  var pathToDummy:String = "assets" + upButtonPath;
  dummyImage.source = pathToDummy;
  thisBtn.height = dummyImage.height;
  thisBtn.width = dummyImage.width;
  dummyImage = null;
[/CODE]
If you have any idea what to do with this, let me know. I set the buttons to the exact height and width of the images I'm using when I first call them. I don't know how else to manage this. I want the faded white to be an exact mirror of the image, so that designers (not me) can move them around on design mode. Thank you!

Answer 1

Figured it out. The images I was given had large amounts of padding, and when I tried to auto-resize the buttons, Flash could never grab the image and therefore couldn't size off it, so the size of the component was forced to 0,0. It's all good now.