degrafa

New samples of Degrafa in use can be found at http://samples.degrafa.com. If you attended the Degrafa session at 360|Flex you may remember seeing them. They all address some of the new features in latest beta and include samples for:

• Skinning a VSlider to look like a thermometer
• Advanced skinning using Tweener, cursor position, color tweening, skin states, etc.
• Using the derive property
• Reusing compositions created in external MXML files
• Random art with Degrafa and Tweener
• Creating and using libraries

Visit the Degrafa Samples page and enjoy!

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):

<GeometryData>

    <Geometry:RoundedRectangle cornerRadius="10"
        x="0" y="0" width="150" height="50"
        Fill="{MainFill}"/> 

    <Geometry:RoundedRectangle cornerRadius="10"
        x="3" y="3" width="144" height="44"
        Fill="{RevFill}" /> 

     <Geometry:RoundedRectangle cornerRadius="10"
        x="3" y="3" width="144" height="16"
        Fill="{WhiteWash}" /> 

    <Geometry:RoundedRectangle cornerRadius="10"
        x="3" y="31" width="144" height="16"
        Fill="{RWhiteWash}"/>  	

</GeometryData>

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:

<mx:Button width="150" height="50"
		label="Sample Button Skin"
		upSkin="UpSkin"
		overSkin="OverSkin"
		downSkin="DownSkin"/> 

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.