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:
-
<?xml version="1.0" encoding="utf-8"?>
-
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="#363636">
-
<mx:Style source="css/styles.css" />
-
-
<!– _____________________________________________
-
Simple Programmatic Button Skinning Example
-
-
Ardis Creative - 2009
-
Free for personal use.
-
_____________________________________________ –>
-
-
<mx:Image source="assets/images/menu-bg.png" x="50" y="50" />
-
-
<mx:HBox x="50" y="50" horizontalGap="1" mask="{maskCanvas}">
-
-
<mx:Button id="button1" styleName="menuButtonSkin" />
-
<mx:Button id="button2" styleName="menuButtonSkin" />
-
<mx:Button id="button3" styleName="menuButtonSkin" />
-
<mx:Button id="button4" styleName="menuButtonSkin" />
-
<mx:Button id="button5" styleName="menuButtonSkin" />
-
-
</mx:HBox>
-
-
<mx:Canvas x="50" y="50" width="800" height="369" backgroundColor="#ff0000" id="maskCanvas" cornerRadius="25" borderStyle="solid"/>
-
-
</mx:Application>
CSS
In the CSS, the menuButtonSkin style uses the ClassReference statement to specify the skin class to use:
-
.menuButtonSkin {
-
upSkin:ClassReference(’skins.buttons.GradientOverlaySkin’);
-
overSkin:ClassReference(’skins.buttons.GradientOverlaySkin’);
-
downSkin:ClassReference(’skins.buttons.GradientOverlaySkin’);
-
}
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:
-
// ActionScript file
-
package skins.buttons {
-
-
import flash.display.*;
-
import flash.geom.*;
-
import mx.core.UIComponent;
-
-
public class GradientOverlaySkin extends UIComponent {
-
private var _bWidth:Number = 159;
-
private var _bHeight:Number = 369;
-
-
/*_______________________________________________________
-
Override measuredWidth
-
- overrides the default width of button
-
_______________________________________________________*/
-
-
public override function get measuredWidth():Number {
-
return _bWidth;
-
}
-
-
/*_______________________________________________________
-
Override measuredHeight
-
- overrides the default height of button
-
_______________________________________________________*/
-
-
public override function get measuredHeight():Number {
-
return _bHeight;
-
}
-
-
/*_______________________________________________________
-
Override updateDisplayList
-
-overrides the updateDisplayList method which
-
defines the default look
-
_______________________________________________________*/
-
protected override function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void{
-
-
//variabless for gradient alpha array
-
var alpha1:Number;
-
var alpha2:Number;
-
-
graphics.clear();
-
-
//set the gradient alpha values for each state
-
switch (name) {
-
case "upSkin":
-
alpha1 = 0;
-
alpha2 = 0;
-
break;
-
case "overSkin":
-
alpha1 = 0.1;
-
alpha2 = 0.7;
-
break;
-
case "downSkin":
-
alpha1 = 0;
-
alpha2 = 0.7;
-
break;
-
}
-
-
//set all gradient variables
-
var fillType:String = GradientType.LINEAR;
-
var colors:Array = [0xFCB040, 0xFCB040];
-
var alphas:Array = [alpha1, alpha2];
-
var ratios:Array = [0×44, 0xFF];
-
var matr:Matrix = new Matrix();
-
matr.createGradientBox(_bWidth, _bHeight, 1.57, 0, 0);
-
var spreadMethod:String = SpreadMethod.PAD;
-
-
//draw gradient
-
graphics.beginGradientFill(fillType, colors, alphas, ratios, matr, spreadMethod);
-
graphics.drawRect(0,0,_bWidth,_bHeight);
-
-
super.updateDisplayList(unscaledWidth, unscaledHeight);
-
}
-
}
-
}
Notice the package here is is declared “skins.buttons”
Download the source, if you wish.
April 1st, 2009 at 3:08 pm
Not bad
August 2nd, 2009 at 5:21 am
Thanks for the articles..
January 16th, 2010 at 12:17 am
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
February 17th, 2010 at 4:50 am
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