|
|
I've been spending a decent amount of time lately with Flex skins (aka themes). While this is a great step forward from Flash this comes nowhere near the capabilities of raw HTML/CSS. My task was simple: create a custom background image for the Flex application. I'm working on a "Brushed Metal" theme and wanted to specify a bitmap for the background.
This process documents more of a "styling" element than skinning. I'll cover skinning in a future post when I get everything in place. If you've ever used CSS to specify a background image in a standard Web page then this process should seem very familiar. The difference with Flex is that the image is applied to the "Application" tag and not the "Body" tag. It looks something like this:
[mx:Style]
Application
{
background-image: "backgrounds/brushed_metal.jpg";
}
[/mx:Style]
Which yields the following output:
You can see that something doesn't look completely right as the image doesn't fill to the edges. The original is 500x500 pixels and that's what is being displayed as the background. If you're familiar with CSS you're aware of setting the background repeat so that the image will tile. Unfortunately we don't have this facility in Flex...at least not that I'm aware of. So we have to specify a background-size attribute:
[mx:Style]
Application
{
background-image: "backgrounds/brushed_metal.jpg";
background-size: "100%;
}
[/mx:Style]
Which yields the following output:
You'll notice that the background image actually stretches when the browser is resized. I wouldn't say that this is the most desired result, but if you choose your image wisely then everything should work out fairly well.
Posted by dennis baldwin at December 8, 2005 12:09 PM