Monday, January 25, 2010

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 (,,  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).

package com.studioNorth.skins{
    import flash.display.DisplayObject;
    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(){
            ds = new DropShadowFilter(1);
        override protected function rollOverHandler(event:MouseEvent):void{
            textField.filters = null;
        override protected function rollOutHandler(event:MouseEvent):void{
                textField.filters = [ds];
        override protected function createChildren():void{
            if (!textField){
                textField = IUITextField(createInFontContext(UITextField));
                textField.filters = [ds];
                textField.styleName = this;
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
            super.updateDisplayList(unscaledWidth, unscaledHeight);
                textField.filters = null;


/**Main App**/


before mouse over:

during mouse over:

that simple!

No comments:

Post a Comment