图形皮肤的使用

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>