Custom Buttons In Flex - Drop Shadow on Text

Just recently I was asked about adding a drop shadow to the text in a button.  Going through a few blogs, I found quickly that the best example to follow was from some guys who're way more advanced than me (http://www.davidflatley.com/2007/12/17/programmatic-button-skins-in-flex-3/, http://www.asfusion.com/blog/entry/stateful-skins-in-flex-3e-color-transitions-in-buttons-now-possible, http://www.tink.ws/blog/stateful-skins-in-flex/).  Essentially, the label inside a button is a IUITextField.  It can have filters, styles, whatever you want.  So I simply extended the Button class in .as, and added my own 'filters = [new DropShadowFilter(x,y)]', and when I implement the button, I get text w/ drop shadows.  More excitingly, I can setup some local vars that can be adjusted at runtime, so not every custom button has to have a drop filter, or if I click on it, I can quickly, in a programmatic skin, remove the drop shadow on over or down states.  This means I now have some cooler looking buttons that can shift text formatting dynamically (which is so much better than hardcoding in the style - just in case I'd like to reuse my buttons!)

Here's some code:

In the class itself, I have to override the rollover and rollout so I can remove the drop shadow to give a different dynamic effect.  Also, I have to override the updateDisplayList because the disabled buttons shouldn't have a drop shadow (again, just for fun).

/**Class**/
package com.studioNorth.skins{
    import flash.display.DisplayObject;
    import flash.events.MouseEvent;
    import flash.filters.DropShadowFilter;
   
    import mx.controls.Button;
    import mx.core.IUITextField;
    import mx.core.UITextField;

    public class CustomButtonTextDropShadow extends Button{
        private var ds:DropShadowFilter; //This could be public so users could access and change it or any other variable
       
        public function CustomButtonTextDropShadow(){
            super();
            ds = new DropShadowFilter(1);
        }
       
        override protected function rollOverHandler(event:MouseEvent):void{
            textField.filters = null;
            super.rollOverHandler(event);
        }
        override protected function rollOutHandler(event:MouseEvent):void{
            super.rollOutHandler(event);
            if(enabled)
                textField.filters = [ds];
        }
       
        override protected function createChildren():void{
            if (!textField){
                textField = IUITextField(createInFontContext(UITextField));
                textField.filters = [ds];
                textField.styleName = this;
                addChild(DisplayObject(textField));
            }
        }
       
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            if(!this.enabled){
                textField.filters = null;
            }
        }

    }
}


/**Main App**/

   


before mouse over:



during mouse over:



that simple!