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