How to skin buttons in flex 3?

Just out of curiosity, I am making an effort to optimize every part of our flex app (which is a small part of our app in general). Currently, I am working on optimizing all of the buttons/skins. I have linked a few of the buttons that I use, and some sample code I am using to generate them.

Please advise on how to make this more efficient, usable, and just better overall. Thanks!

As you can see, our buttons can be pretty different, but have a similar look and feel. Currently, I am creating 'stateful skins,' by setting up something like this:

skin: ClassReference('com.mysite.assets.skins.NavigationButtonSkin');

Then, NavigationButtonSkin looks something like this:

public class NavigationButtonSkin extends UIComponent {

  // imports, constructor, etc

  protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {

    // initialize fillColors, fillAlphas, roundedCorners, etc

    switch( name ){
      case 'upSkin':
      fillColors = [getStyle('backgroundColor'),getStyle('backgroundColor2')];      
      break;
      // do the same for overSkin, downSkin, disabledSkin, etc
    }

    // use this.graphics to draw background
    // use this.graphics to draw border on top of background

  }

}

I commented out some of the straight forward parts, but let me know if this is a bad/inefficient way of doing this - and how to improve.

Thanks!

In terms of performances, it would be better that your skin inherits from ProgrammaticSkin instead of UIComponent. ProgrammticSkin itself inherits from Shape and provides utility methods for skinning such as verticalGradientMatrix, drawRoundRect, ...

That's all I can say looking at your code.

Good point is you use programmatic skin instead of bitmap/swf based skins.