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>