Programmatic Skins

The other day I was watching the Adobe TV and saw a presentation by Kevin Hoyt on programmatic skins in Flex. Off hand when I hear about programmatic skins I think why not just do it in Fireworks and make an image? Seems a bit pointless to draw a shape with some fill in code. Of course you can reduce the size of your SWF to a certain extent. So I was thinking what could I do with a programmatic skin which I couldn't do with an image?

What I found was that you can add filters & blends like you would do in most Flash apps. This allows create a button that glows for example. Ok no major and I'm sure you can that yourself inline but we're comparing programmatic skins and images. For me this is so cool since you can create your own skins having a UIComponent glowing.

Below is an example of a skin using the glow effect.

sunshine.as

package
{
import flash.display.BlendMode;
import flash.filters.GlowFilter;

import mx.skins.ProgrammaticSkin;

public class sunshine extends ProgrammaticSkin
{
public function sunshine() { }

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
var fill:uint;
switch (name) {

case "overSkin":
fill = 0x00FF00;
// Create a glow for overskin
var filter_array:Array = filters;
filter_array.push(new GlowFilter(fill));
filter_array[0].blurX = 50;
filter_array[0].blurY = 50;
filters = filter_array;
break;

case "downSkin":
fill = 0xFF0000;
break;
case "upSkin":
fill = 0x0000FF;
break;

}

// Draw the skin
graphics.clear();
blendMode = BlendMode.DARKEN;
graphics.beginFill( fill, 0.5 );
graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
graphics.endFill();
}
}
}

airApp.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import sunshine;
]]>
</mx:Script>
<mx:Style>
Button {
skin: ClassReference("sunshine");
}
</mx:Style>
<mx:Button id="myButton" x="222" y="158" label="Sunshine Button"/>
</mx:WindowedApplication>


For those who want know more http://livedocs.adobe.com/flex/3/html/skinning_1.html