1.在MXML标签中设置皮肤:
<mx:Button upSkin=”@ Embed(‘../assets/myFacyUpSkin.gif’)”>
2.在CSS块(或文件)中设置皮肤
<mx:Style>
Button {
overSkin: Embed( “../assets/myFacyUpSkin.gif”);
}
</mx:Style>
3.在ActionScript中设置皮肤
<mx:Script>
[Embed(“assets/myFancyDownSkin.gif”)]
var ds:Class;
function initApp(){
myButton.setStyle(“downSkin”, ds);
}
</mx:Script>
=========================================================
可编程的皮肤:
为了绘制可编程的皮肤,首先需要为新的皮肤类选择一个基类。Flex提供了3个类共你选择。
ProgrammaticSkin, Border, RectBorder.
下面是可编程的皮肤,举了一个小示例:
package my.yaner
{
import mx.skins.ProgrammaticSkin;
public class OrangeOval extends ProgrammaticSkin
{
protected override function updateDisplayList(w:Number, h:Number):void
{
var lineThickness:int = 4;
var backgroundFillColor:Number;
switch(name)
{
case "upSkin":
backgroundFillColor = 0xEA800C;
break;
case "overSkin":
backgroundFillColor = 0xF8B872;
break;
case "downSkin":
backgroundFillColor = 0xB06109;
break;
case "disabledSkin":
backgroundFillColor = 0xCCCCCC;
break;
}
graphics.clear();
graphics.beginFill(backgroundFillColor);
graphics.drawEllipse(0, 0, w, h);
graphics.endFill();
}
}
}
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
creationComplete="init();">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
.homePageButton{
upSkin:ClassReference('my.yaner.OrangeOval');
downSkin:ClassReference('my.yaner.OrangeOval');
overSkin:ClassReference('my.yaner.OrangeOval');
disabledSkin:ClassReference('my.yaner.OrangeOval');
color:#ffffff;
}
</fx:Style>
<mx:Button styleName="homePageButton" label="艳儿,我的老婆"/>
</s:Application>