Kevin Hoyt

Here’s the problem. You have an image that measures 100 pixels wide by 100 pixels high. You want to use that as the border for content that measures 300 pixels wide by 300 pixels high. What do you do? Well, you chop that image up and then try to position the corners in the appropriate space without distorting them, and then fill out the rest with the parts that won’t be distorted by stretching. Or, you have your software do that for you. This is what’s called 9-slice in Flash Player, and is coming to a browser near you via the CSS 3 specification.

Before we get into the details, let’s revisit the whole “chop that image up” statement. Below is an example of an image that represents the “skin” or border appearance of a panel control in my application. The image itself measures 104 x 126 pixels. That doesn’t mean that all your panels need to be 104 x 126, just that you’ll probably have to do some additional work to get it to fit.

The popular convention is to chop off the segments that need to stay the same, and can’t be distorted. Then you can take the areas that can be repeated, or stretched, without distortion impacting how they look. This is generally accomplished by slicing the image up into three top segments, three middle segments, and three bottom segments using your favorite image editor. The result is nine separate images. We can then reassemble the image files to fit whatever size we may need, and the result will appear to not have been distorted.

In the case of Flash, this technique was added as a feature with Flash Player 8 called 9-slice. Using tooling or ActionScript, you can specify where the slice guidelines fall, and then Flash will handle slicing the guides, stretching the images appropriately, and then reassemble all the parts at the final dimensions. In Flash CS4 you can find this on your symbol properties, and then selecting to enable “9-slice.” You will then see slicing guides on your symbols. Try it! Take the transform tool and resize a rounded rectangle. If you’ve set the guides correctly, the rounded corners will retain their radius.

In HTML/CSS there’s no such feature. Well, there was no such feature until browsers started implementing CSS 3. CSS 3 includes a variety of new background and border features, one of which is the “border-image” property. The border image property expects you to (a) specify border widths and then (b) specify an image to use. You’ll also tell CSS where you want the slicing to occur on the border image. You can even tell CSS how you want the parts that do get distorted to actually distort.

/* top right bottom left */	
#chrome {
	position: absolute;
	bottom: 0px;
	left: 0px;
	right: 0px;
	top: 0px;
	border-width: 59 17 17 17; 
	-webkit-border-image: url(images/desktop_panel.png) 59 17 17 17 stretch stretch;	
}

CSS 3 isn’t complete. It’s also not broadly available as browsers that support it haven’t been on the market that long. That doesn’t mean that this is just wasted knowledge - especially as it pertains to Adobe AIR. One of the browsers that does support this functionality already is Safari. Safari uses WebKit as it’s rendering engine. The same WebKit in built into Adobe AIR. That means you can use this style property in Adobe AIR (as well as many others you’ll find in the CSS 3 specification).

One of my favorite way to use this is to skin custom window chrome and custom button chrome. Going all the way back to that panel image I mentioned earlier, even though it is only 104 x 126 pixels, I can now have the browser slice and dice it to fit whatever size the window of my AIR application may be (certainly larger than 104 x 126). I also don’t particularly like the AIR default button look/feel, nor do I like making a fixed size/labeled image for every button in my application. Using CSS 3 border image, I can take an image and apply it to fit any size of button.

(download this custom chrome template)

The big picture here is that Flash Player has been slicing images for a while now. We’re now seeing that innovation roll into standards. Somebody had to go first, and Flash took that step. It was the same with the image tag in HTML, which at the time was hotly debated when it was added by Netscape. It’s also important to remember though that standards invite a larger group to contribute to an innovation. CSS 3 as an example accounts for several manners of treating the way the slices are applied to a border (stretch, repeat and round) which Flash does not. It’s important to recognize that standards and proprietary innovation both have their place.

This entry was posted on Monday, October 6th, 2008 at 1:04 pm and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.