I'm working with Flex 3.4 SDK.

I need to change the default close button image from a TitleWindow. So what I'm doing is defining a CSS selector, like this:

    close-button-skin: Embed('assets/close.png');
    border-color: #FFFFFF;
    corner-radius: 10;  
    closeButtonDisabledSkin: ClassReference(null);
    closeButtonDownSkin: ClassReference(null);
    closeButtonOverSkin: ClassReference(null);
    closeButtonUpSkin: ClassReference(null);

The problem is: the result image is totally squeezed beyond recognition. Probably because the image dimensions are 55x10 pixels (much wider than the default closebutton square-like dimensions) and flex forces it to fit that size.

Would anyone know how to go about fixing that?

+3  A: 

It seems like the width and height are set to 16 pixels in the Panel class' createChildren() method:

closeButton.explicitWidth = closeButton.explicitHeight = 16;

You could try setting the explicitWidth and explicitHeight to the values you need in your window. Don't forget to scope closeButton to mx_internal, and import and use that namespace.

import mx.core.mx_internal;

use namespace mx_internal;

// in creationComplete for instance
mx_internal::closeButton.explicitWidth = ...;
mx_internal::closeButton.explicitHeight = ...;
Christophe Herreman
That worked perfectly, thanks!What I chose to do was override createChildren() and changed closeButton.explicitWidth closeButton.explicitHeight.
Thank you! This was a problem that more than one person on my team had trouble with! It works very well.
Jim Carroll

If you want it more simple, do this,

Import the class

import mx.core.mx_internal;

Put these 3 lines in creationComplete handler

use namespace mx_internal;

closeButton.$width  = 24; //Change the button width to 24 pixels
closeButton.$height = 24; //Change the button height to 24 pixels