I have been working with Degrafa in my spare time… all of that spare time that I have.
I am quite impressed. Not only by the framework and how scalable, flexible, and powerful it is, but also by its ease of use for even a designer such as myself. It does have some complicated aspects, but for the most part, it is fairy easy to grasp once you get your feet wet.
My first implementation was some additive work to Juan Sanchez’s scrollBar track to Discovery Live Earth that he helped me out with. That wasn’t much, as I just looked at what Juan had written and made some slight adjustments and color changes.
Now, I’m attempting to create a whole Flex theme using Degrafa. It has been challenging, but it is a great way to gain insight about Degrafa and skinning for Flex.
I highly recommend creating a complete theme for Flex to learn some of the basics and advance aspects of skinning. If you have the ability to, then you should also build a test application in Flex to test the skins and most importantly, to review the states of the components. I will post the code for a test application soon, as I made one for my own use.
You do not have to use Degrafa, you can use one of the many forms of skinning, from vector swfs in Flash or Illustrator, to bitmaps in Photoshop or Fireworks, and if you want, you can make a simple CSS based one rather quickly using one of the Flex Style Explorer.
Click Here is the Flex 3 Style Explorer
(please note that Adobe still hasn’t updated the title in the html page from Flex 2)
An easy way to get into skinning for Flex, is to download the Flex Skinning Extensions. You will need an Adobe account, which is FREE.
Click Here to get Extensions!
Keep in mind, that there are a couple techniques which are slightly more optimal and what I favor. I prefer to use stateful skins using Flash. By using stateful skins, you can create all of the states of your skin within one symbol (MovieClip), so it is self contained and easier to manage. You can even add animations and transitions to give it a little more flavor.
Not only are stateful skins great to work with for those reasons, but since it is in Flash, you can make them vector. Very optimal for performance, and scaling with scale9 enabled on your symbols. One other minor detail to keep in mind, which could pose problems, nested MovieClips will NOT scale 9 properly. This means you will not be able to use filters such as drop shadows, glows within a MovieClip that may require scale 9 like rounded rectangles.
(you must create a MovieClip in order to apply a filter in Flash)
To accomplish those effects on a scale 9 symbol, you can mock the shadows and filters with vector art, or you can apply the filter/effect in Flex. Based on some rumors, CS4 should fix this issue, as it is a problem within Flash and not Flex. Also, you can apply the scale 9 grid within the CSS for some skins like Bitmaps.
Here is a post for Flex 2 and scale 9 grid in CSS
Adobe DevNet