Programatically Altering Font Face, Size, Weight & Color Of A Flex Label/Text Component

You can often use <mx:Dissolve> instead of <mx:Fade>, it looks nearly identical and doesn't require embedded fonts.

I think I've got a much more polished (and working!) answer to this now.

I ended up doing the work in updateDisplayList() so the update will be delayed for the official update cycle, rather than forcing it when the selected setter is executed. To make sure I'm not storing the incorrect de-selected color value, I now only store it when the button is selected, and I clear the storage when the button is de-selected.

I also used the CSSStyleDeclaration class, as Amarghosh suggested, to manage reading in the custom styles from css and from mxml.

Lastly, one big thing I discovered was I needed to call super.callLater(invalidateDisplayList), or else the button would only update when I rolled over it.

Complete solution is posted. Hopefully this helps someone else who is just delving into the world of custom components!

import flash.display.Graphics;
import flash.geom.Matrix;

import mx.controls.Button;
import mx.styles.CSSStyleDeclaration;
import mx.styles.StyleManager;

[Style(name="selectedColor",type="uint", format="Color", inherit="no")]
[Style(name="selectedFontSize",type="Number",inherit="no")]

public class ControlBarButton extends Button
{
    private static var classConstructed:Boolean = constructStyle(); // initialize default style properties

    public function ControlBarButton() {
        super();
    }

    private static function constructStyle():Boolean {
        var style:CSSStyleDeclaration = StyleManager.getStyleDeclaration( "ControlBarButton" );

        // check to see if there's already an existing style declaration for this class
        if (style) {
            // its possible for a style to exist without defining all of the possible styles 
            // in which case we need to check each style explicitly and set a default if needed
            if ( style.getStyle( "selectedColor" ) == undefined ) {
                style.setStyle( "selectedColor", 0xFFFFFF );
            }
            if ( style.getStyle( "selectedFontSize" ) == undefined ) {
                style.setStyle( "selectedFontSize", 12 );
            }
        }
        else { // create a default style declaration
            style = new CSSStyleDeclaration();
            style.defaultFactory = function():void {
                this.selectedColor = 0xFFFFFF;
                this.selectedFontSize = 12;
            }
            StyleManager.setStyleDeclaration( "ControlBarButton", style, true );
        }

        return true;
    }

    private var selectedColorChanged:Boolean = true;
    private var selectedFontSizeChanged:Boolean = true;
    private var selectedChanged:Boolean = true;

    override public function styleChanged(styleProp:String):void {
        super.styleChanged(styleProp);

        // Check to see if style changed. 
        if (styleProp=="selectedColor") {
            selectedColorChanged=true;
            invalidateDisplayList();
            return;
        }
        if (styleProp=="selectedFontSize") {
            selectedFontSizeChanged=true;
            invalidateDisplayList();
            return;
        }
    }

    private var deselectedColorStored:Boolean = false;
    private var deselectedColorVal:uint;
    private var selectedColorVal:uint;
    private var deselectedFontSizeStored:Boolean = false;
    private var deselectedFontSizeVal:Number;
    private var selectedFontSizeVal:Number;

    override public function set selected(value:Boolean):void {
        super.selected = value;

        selectedChanged=true;
        invalidateDisplayList();
    }

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

        // selected color
        if (selectedColorChanged || selectedChanged) {
            if (selected) {
                if (!deselectedColorStored) {
                    deselectedColorVal = getStyle("color") as uint;
                    deselectedColorStored = true;
                }
                selectedColorVal = getStyle("selectedColor") as uint;
                setStyle("color",selectedColorVal);
                super.callLater(invalidateDisplayList);
            }
            else {
                if (deselectedColorStored) {
                    setStyle("color",deselectedColorVal);
                    super.callLater(invalidateDisplayList);
                    deselectedColorStored = false;
                }
            }

            selectedColorChanged=false;
        }

        // selected font size
        if (selectedFontSizeChanged || selectedChanged) {
            if (selected) {
                if (!deselectedFontSizeStored) {
                    deselectedFontSizeVal = getStyle("fontSize") as Number;
                    deselectedFontSizeStored = true;
                }
                selectedFontSizeVal = getStyle("selectedFontSize") as Number;
                setStyle("fontSize",selectedFontSizeVal);
                super.callLater(invalidateDisplayList);
            }
            else {
                if (deselectedFontSizeStored) {
                    setStyle("fontSize",deselectedFontSizeVal);
                    super.callLater(invalidateDisplayList);
                    deselectedFontSizeStored = false;
                }
            }

            selectedFontSizeChanged=false;
        }

        selectedChanged=false;
    }
}