Question

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:

TitleWindow{
    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 55×10 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?

Answer 1

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 = ...;