iiley February 6th, 2009
Well, at the past, it’s hard to custom the skin of AsWing components.
With 2.0, we plan to improve this because there’s not many guys can make a new LookAndFeel, they want to change some basic properties directly by just call some methods.
Here it is, for example we have a normal button - “A Button”.(The first button in the picture, PS:this is not the final design of button look, it will be well designed when 2.0 released)
We want to change its color, just call button.setBackground(new ASColor(0xF4A0AA));, it will be looks like “Blue Button”, you can see it changes well, the gradient, border and shadow keep looks well, really a blue button.
How about a red button? Simple, setBackground(new ASColor(0xf4a0aa)); then it will looks like “Red Button”.
Want to make it flater? Yes you can, there’s StyleTune for every component, you can call button.setStyleTune(button.getStyleTune().sharpen(0.1));, then it will looks like “Flatten Button”, 0.1 times gradient; well same way to sharpen it call button.setStyleTune(button.getStyleTune().sharpen(2)); it becomes 2 times sharper than normal one like “Sharpen Button”
Also, you can change the round property of StyleTune to 10, you’ll get a button looks like “Round Button”.
All about StyleTune class, it has 5 major properties to affect the style of a component, you can read the asdoc to know it:
/**
* Gradient brightness range of content color [-1, 1]
*/
public var cGradient:Number;
/**
* The birightness offset for border color [-1, 1]
*/
public var bOffset:Number;
/**
* Gradient brightness range of border color [-1, 1]
*/
public var bGradient:Number;
/**
* Shadow alpha value [0, 1]
*/
public var shadowAlpha:Number;
/**
* The round rect radius, 0 means not round [0, +]
*/
public var round:Number;
private var mideAdjuster:StyleTune;
/**
* Create a UIColorAdjuster with specified params
* @param cg gradient brightness range of content color
* @param bo birightness offset for border color
* @param bg gradient brightness range of border color
* @param sa shadow alpha
* @param r the round rect radius, 0 means not round
*/
public function StyleTune(cg:Number=0.2, bo:Number=0.15, bg:Number=0.35, sa:Number=0.2, r:Number=0)
With a full customized StyleTune and background foreground set, you even can get a button like “Customed” button in the picture. Its StyleTune and colors are:
button.setStyleTune(new StyleTune(0.18, 0.05, 0.20, 0.20, 2));
button.setBackground(new ASColor(0x299083));
button.setForeground(new ASColor(0xFFFFFE));
Next time, i’ll introduce another feature about Component.setMideground()
