This actually relates back to something I did a while ago but I was thinking about it earlier today. As a rule there tends to be some confusion about the relationship of Flex to Flash and how they can live together in harmony…but I wont get into all that. What I will say is that there are a lot of features in Flash that are very useful to know about if you’re a Flex developer. Scale9 is one them.

If you’ve done any skinning in Flex using Flash then I’m sure you know that you can maintain an .fla with all of your skins as symbols in the library (provided the swf is as2/avm1 and you’ve provided a linkage identifier to export). The nice thing about vector skins of course is that they scale losslessly (if that’s an actual word) and if you have components that need to change in size this is key. Say an artist hands you a skin designed in a way that requires border style scaling; that is, a skin that can re-size while leaving its corners intact. If you’ve had a look at the halo theme’s programmatic border skins in Flex you’ll see code that does just this. What some might not realize is that Flash has the capability to do what is called “Scale9″ slicing which does something similar..and this can be used in Flex skins.

You enable Scale9 slicing in the properties panel of a symbol.

Once enabled then move the guides to the appropriate position for your graphic. Scale9 uses guides to define 9 boxes (3×3) for a symbol. The contents of the inner box get scaled. The contents of the outer boxes stay intact.

That’s it. Now when you use embed this symobol and use it as a skin in Flex it will keep the same behavior.

Let me note quickly that I’m using a frame-like graphic in the example here but that’s not to imply that this is an easy method to create border skins (the process of which is a bit different and requires creating a custom border class or creating a custom container with the Flex component kit for Flash CS3).

I should also mention that there does exist a method to define a Scale9 grid in directly in Flex, which I’m including for you glutton for punishment types.

 
Button
{
disabledSkin: Embed
   (source="images/Button_disabledSkin.png",
            scaleGridLeft="4",
            scaleGridTop="4",
            scaleGridRight="78",
            scaleGridBottom="18");
}

However, as you might guess this is very difficult to visualize so I really recommend using Flash here if you have it.

ian News