Mike Huntington took the time to put together a screencast walking through the process of creating custom skins using Degrafa. He shows you how to get set up with the Degrafa SWC and how easy it is to start creating via Degrafa MXML.

I’ve been following Mike’s blog for a while and it’s great to see what he’s doing with Degrafa. Keep up the screencasts Mike! We dig.

Ok, I couldn’t resist using the title. Tom Gonzalez put together a really nice example of a gauge built using Degrafa. He also did a lot more than that. For some of the custom items like the tick marks, he made his own ArcLineRepeater based on Degrafa’s LineRepeater so that it rotated around a central point. Based on what Tom said, it sounds like it was pretty easy for him to do.

This example also allows you to apply different skins like you would any other Flex component, but instead of having to go to an external application like Fireworks or Flash you can do all your skinning for the gauge right in Flex and assign them through CSS. Tom’s example has 2 skins you can choose from and you can change properties like colors, angle, tick alpha and more very easily.

I think the coolest thing about this example is that Tom already had this gauge built before, but realized it had much more potential if he converted to use Degrafa. The result seems to be a much more flexible solution that can be extended quite easily to take on a number of different appearances. Good stuff!

Check out Tom’s blog post about the gauge and don’t forget to view the source.

Here’s another skinning sample done with the Degrafa framework using the same methods mentioned in previous posts. It’s a thermometer type component created using a VSlider. Skins were created for the VSlider trackSkin and thumbSkin.

And another variation:

Degrafa not only gives you the ability to draw graphical shapes and objects, but it also allows you to use anything you can create with it as a skin for any component in Flex. Here’s is a simple example of a Button using graphics drawn with Degrafa as skins:

Like the basic shape example, these skins are comprised of shapes, fills and strokes. The only difference is that separate MXML files have been created for the different skin states of the Button. For example, the code for the UpSkin.mxml file used in this example looks like this (not including MXML for Fills and Strokes):

After a skin is created for each Button state we can assign the skins to a Button inside an Application just like any other skin, like this:

This simple example offers a small glimpse at what is possible and as the framework continues to grow, skinning will definitely be one of our focuses.