The following example shows how you can change the appearance of the close button in a TitleWindow container in Flex by setting the closeButtonSkin style (or the closeButtonUpSkin, closeButtonOverSkin, closeButtonDownSkin, closeButtonDisabledSkin styles individually).

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/31/changing-the-close-button-skin-on-a-flex-titlewindow-container/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        TitleWindow {
            closeButtonSkin: Embed("cancel.png");
            /* Set values from defaults.css to null. */
            closeButtonDisabledSkin: ClassReference(null);
            closeButtonDownSkin: ClassReference(null);
            closeButtonOverSkin: ClassReference(null);
            closeButtonUpSkin: ClassReference(null);
        }
    </mx:Style>

    <mx:TitleWindow id="titleWindow"
            title="TitleWindow"
            status="status message"
            showCloseButton="true"
            width="100%"
            height="100%" />

</mx:Application>

View source is enabled in the following example.

If you want to use a different image for each state (up, over, down, disabled), you can either set each skin separately, as seen in the following snippet:

<mx:Style>
    TitleWindow {
        closeButtonUpSkin: Embed("bullet_green.png");
        closeButtonOverSkin: Embed("bullet_yellow.png");
        closeButtonDownSkin: Embed("bullet_red.png");
        closeButtonDisabledSkin: Embed("bullet_white.png");
    }
</mx:Style>

Or, you can specify a SWF file and symbol name for the close button skins, as seen in the following snippet:

TitleWindow {
    closeButtonDisabledSkin: Embed(source="Assets.swf", symbol="CloseButtonDisabled");
    closeButtonDownSkin: Embed(source="Assets.swf", symbol="CloseButtonDown");
    closeButtonOverSkin: Embed(source="Assets.swf", symbol="CloseButtonOver");
    closeButtonUpSkin: Embed(source="Assets.swf", symbol="CloseButtonUp");
}

Or, you can create a Flex Componet skin using the Flex Component Kit and Flash CS3 where the movie clip symbol in the library has the following frame labels: up, over, down, disabled, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/31/changing-the-close-button-skin-on-a-flex-titlewindow-container/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        TitleWindow {
            closeButtonSkin: Embed(skinClass="BulletSkins");
            /* Set values from defaults.css to null. */
            closeButtonDisabledSkin: ClassReference(null);
            closeButtonDownSkin: ClassReference(null);
            closeButtonOverSkin: ClassReference(null);
            closeButtonUpSkin: ClassReference(null);
        }
    </mx:Style>

    <mx:TitleWindow id="titleWindow"
            title="TitleWindow"
            status="status message"
            showCloseButton="true"
            width="100%"
            height="100%" />

</mx:Application>

View source is enabled in the following example.