Flex 3: Programmatic Gradient RollOver Example

I thought I’d post this little example of a menu with programmatically skinned buttons for those who may be taking a stab at creating custom skins in Flex…

For this example, I use one background image for the menu and then just lay the buttons over the background. This way I only have one button skin and I don’t have to go through the process of creating seperate images for every state of every button. The buttons in this example are invisible on the up state, but show the gradient for the over and down states.

View the result here.

MXML
The flex application contains the menu image and 5 buttons in an HBox. Each button has the style “menuButtonSkin” applied to it. The HBox has a mask so that the rollovers maintain the rounded corners of the menu:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="#363636">
  3.         <mx:Style source="css/styles.css" />
  4.  
  5.         <!– _____________________________________________
  6.                         Simple Programmatic Button Skinning Example
  7.                        
  8.                         Ardis Creative - 2009
  9.                         Free for personal use.
  10.                  _____________________________________________ –>
  11.                  
  12.         <mx:Image source="assets/images/menu-bg.png" x="50" y="50" />
  13.                         
  14.         <mx:HBox x="50" y="50" horizontalGap="1" mask="{maskCanvas}">
  15.        
  16.                 <mx:Button id="button1" styleName="menuButtonSkin" />
  17.                 <mx:Button id="button2" styleName="menuButtonSkin" />
  18.                 <mx:Button id="button3" styleName="menuButtonSkin" />
  19.                 <mx:Button id="button4" styleName="menuButtonSkin" />
  20.                 <mx:Button id="button5" styleName="menuButtonSkin" />
  21.        
  22.         </mx:HBox>
  23.        
  24.         <mx:Canvas x="50" y="50" width="800" height="369" backgroundColor="#ff0000" id="maskCanvas" cornerRadius="25" borderStyle="solid"/>
  25.          
  26. </mx:Application>

CSS
In the CSS, the menuButtonSkin style uses the ClassReference statement to specify the skin class to use:

  1. .menuButtonSkin {
  2. upSkin:ClassReference(’skins.buttons.GradientOverlaySkin’);
  3. overSkin:ClassReference(’skins.buttons.GradientOverlaySkin’);
  4. downSkin:ClassReference(’skins.buttons.GradientOverlaySkin’);
  5. }

Note: I have my class file, GradientOverlaySkin.as, inside a package, skins.buttons, which is why I used ’skins.buttons.GradientOverlaySkin.’ (Packages basically represent directories, so the path to the GradientOverlaySkin class file in my project is such: src>skins>buttons>GradientOverlaySkin.as)

Actionscript
My Actionscript file, GradientOverlaySkin.as, looks like this:

  1. // ActionScript file
  2. package skins.buttons {
  3.  
  4.         import flash.display.*;
  5.         import flash.geom.*;
  6.         import mx.core.UIComponent;
  7.  
  8.         public class GradientOverlaySkin extends UIComponent    {
  9.         private var _bWidth:Number = 159;
  10.         private var _bHeight:Number = 369;
  11.  
  12.         /*_______________________________________________________
  13.                 Override measuredWidth
  14.                         - overrides the default width of button
  15.           _______________________________________________________*/
  16.  
  17.          public override function get measuredWidth():Number {
  18.         return _bWidth;
  19.      }
  20.  
  21.      /*_______________________________________________________
  22.                 Override measuredHeight
  23.                         - overrides the default height of button
  24.           _______________________________________________________*/
  25.  
  26.       public override function get measuredHeight():Number {
  27.         return _bHeight;
  28.      }
  29.  
  30.         /*_______________________________________________________
  31.                 Override updateDisplayList
  32.                         -overrides the updateDisplayList method which
  33.                         defines the default look
  34.           _______________________________________________________*/
  35.         protected override function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void{
  36.  
  37.                         //variabless for gradient alpha array
  38.                         var alpha1:Number;
  39.                         var alpha2:Number;
  40.  
  41.                         graphics.clear();
  42.  
  43.                         //set the gradient alpha values for each state
  44.                         switch (name) {
  45.                                 case "upSkin":
  46.                                         alpha1 = 0;
  47.                                         alpha2 = 0;
  48.                                         break;
  49.                                 case "overSkin":
  50.                                         alpha1 = 0.1;
  51.                                         alpha2 = 0.7;
  52.                                         break;
  53.                                 case "downSkin":
  54.                                         alpha1 = 0;
  55.                                         alpha2 = 0.7;
  56.                                         break;
  57.                         }
  58.  
  59.                         //set all gradient variables
  60.                         var fillType:String = GradientType.LINEAR;
  61.                              var colors:Array = [0xFCB040, 0xFCB040];
  62.                         var alphas:Array = [alpha1, alpha2];
  63.                         var ratios:Array = [0×44, 0xFF];
  64.                         var matr:Matrix = new Matrix();
  65.                         matr.createGradientBox(_bWidth, _bHeight, 1.57, 0, 0);
  66.                         var spreadMethod:String = SpreadMethod.PAD;
  67.  
  68.                         //draw gradient
  69.                         graphics.beginGradientFill(fillType, colors, alphas, ratios, matr, spreadMethod);
  70.                         graphics.drawRect(0,0,_bWidth,_bHeight);
  71.  
  72.                         super.updateDisplayList(unscaledWidth, unscaledHeight);
  73.                 }
  74.         }
  75. }

Notice the package here is is declared “skins.buttons”

Download the source, if you wish.

Add to Technorati Favorites

4 Responses to “Flex 3: Programmatic Gradient RollOver Example”

  1. Liam McCabe Says:

    Not bad :)

  2. handoyo Says:

    Thanks for the articles..

  3. sylvan Says:

    I have been wondering how I can edit buttons like this, ive been having trouble in fireworks. Do you guys have articles on helping with flash editing

  4. Al kamal Md. Razib Says:

    Nice Posting. About Clipping Paths, Image Masking (layer or alpha channel),Creating Shadows (natural, drop or reflection shadows), Retouching, Color Correction, Image Conversion (raster to vector), Image Resizing Please Visit: http://www.colorexpertsbd.com

Leave a Reply


Blog Information Profile for peinheuser