In the following example, I am using a png asset that I’ve created as the skin. When embedding it, I am defining a scale-9 grid:

border-skin: Embed(”hearts_skin.png”,
scaleGridLeft=”44″,
scaleGridRight=”360″,
scaleGridTop=”54″,
scaleGridBottom=”219″);

This ensures that the area of my skin that I want to have as a border for the TitleWindow stretches or shrinks correctly regardless of the content in my container. Next, I define where my content will live inside the TitleWindow by using the padding styles:

paddingTop: 55;
paddingLeft: 45;
paddingRight: 45;
paddingBottom: 40;

If you do not specify padding styles in the TitleWindow, your content will overlap with the title and/or close button.

Have fun with this example!

Demo: skinnedTitleWindow.swf

Source: skinnedTitleWindow.mxml, hearts_skin.png

In the example, you can click the button “add child to TitleWindow” to see the TitleWindow grow, but, it should keep the correct proportions of the borders.