Happy Valentines Day, everyone! In celebration of the day, I thought I’d put together a very cheesy, border skin with a lot of hearts to use for a TitleWindow. It’s pretty simple to use a border skin with a TitleWindow, but, in my opinion, it’s not obvious what you have to do to make your content layout correctly.

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.