flex 学习笔记 皮肤（一）

flex 定义为组件定义皮肤有一下方式? ：

一、??? 图形皮肤

? 如下所示：

?

 
 

mx|Button{ ?
  
  

????upSkin:Embed(source="assets/btnup.png"); ?

  
  

????overSkin:Embed(source="assets/btndown.png"); ?

  
  

????downSkin:Embed(source="assets/btnup.png"); ?

  
  

????focusSkin:Embed(source="assets/btnup.png"); ?

  
  

????disabledSkin:Embed(source="assets/btnup.png"); ?

  
  

????selectedUpSkin:Embed(source="assets/btndown.png"); ?

  
  

????selectedDownSkin:Embed(source="assets/btndown.png"); ?

  
  

????selectedOverSkin:Embed(source="assets/btnup.png"); ?

  
  

????selectedDisabledSkin:Embed(source="assets/btndown.png"); ?

  
  
}?
 
 

在css文件中，为button控件的八个对应属性添加图形皮肤。（spark 的button没有八个皮肤属性。。。）

二、? 程序皮肤：

??????? 1.??? .mxml文件程序皮肤：

?????????

 
 

s|Button{ ?
  
  
????skin:ClassReference("skin.ButtonSkin"); ?
  
  
}?
 
 

????????????????Buttonskin.mxml文件：

?

 
 

<?xml?version="1.0"?encoding="utf-8"?>?
  
  
?
  
  
<!-- ?
  
  
?
  
  
????ADOBE?SYSTEMS?INCORPORATED ?
  
  
????Copyright?2008?Adobe?Systems?Incorporated ?
  
  
????All?Rights?Reserved. ?
  
  
?
  
  
????NOTICE:?Adobe?permits?you?to?use,?modify,?and?distribute?this?file ?
  
  
????in?accordance?with?the?terms?of?the?license?agreement?accompanying?it. ?
  
  
?
  
  

-->?

  
  
?
  
  
<!---?The?default?skin?class?for?the?Spark?Button?component.?? ?
  
  
?
  
  
???????@see?spark.components.Button ?
  
  
???????? ?
  
  
??????@langversion?3.0 ?
  
  
??????@playerversion?Flash?10 ?
  
  
??????@playerversion?AIR?1.5 ?
  
  
??????@productversion?Flex?4 ?
  
  

-->?

  
  

<s:SparkButtonSkin?xmlns:fx="http://ns.adobe.com/mxml/2009"? ?

  
  

?????????????xmlns:s="library://ns.adobe.com/flex/spark"? ?

  
  

?????????????xmlns:fb="http://ns.adobe.com/flashbuilder/2009"?

  
  

?????????????minWidth="21"?minHeight="21"? ?

  
  

?????????????alpha.disabled="0.5">?

  
  
????? ?
  
  

????<fx:Metadata>?

  
  

????????<![CDATA[? ?
  
  
????????/**? ?
  
  
?????????*?@copy?spark.skins.spark.ApplicationSkin#hostComponent ?
  
  
?????????*/ ?
  
  
????????[HostComponent("spark.components.Button")] ?
  
  
????????]]>?
  
  

????</fx:Metadata>?

  
  
???? ?
  
  

????<fx:Script?fb:purpose="styling">?

  
  

????????<![CDATA[????????? ?
  
  
????????????import?spark.components.Group; ?
  
  
????????????/*?Define?the?skin?elements?that?should?not?be?colorized.? ?
  
  
????????????For?button,?the?graphics?are?colorized?but?the?label?is?not.?*/ ?
  
  
????????????static?private?const?exclusions:Array?=?["labelDisplay"]; ?
  
  
???????????? ?
  
  
????????????/**? ?
  
  
?????????????*?@private ?
  
  
?????????????*/????? ?
  
  
????????????override?public?function?get?colorizeExclusions():Array?{return?exclusions;} ?
  
  
???????????? ?
  
  
????????????/** ?
  
  
?????????????*?@private ?
  
  
?????????????*/ ?
  
  
????????????override?protected?function?initializationComplete():void ?
  
  
????????????{ ?
  
  
????????????????useChromeColor?=?true; ?
  
  
????????????????super.initializationComplete(); ?
  
  
????????????}?? ?
  
  
???????????? ?
  
  
????????????/** ?
  
  
?????????????*??@private ?
  
  
?????????????*/ ?
  
  
????????????override?protected?function?updateDisplayList(unscaledWidth:Number,?unscaledHeight:Number)?:?void ?
  
  
????????????{ ?
  
  
????????????????var?cr:Number?=?getStyle("cornerRadius"); ?
  
  
???????????????? ?
  
  
????????????????if?(cornerRadius?!=?cr) ?
  
  
????????????????{ ?
  
  
????????????????????cornerRadius?=?cr; ?
  
  
????????????????????shadow.radiusX?=?cornerRadius; ?
  
  
????????????????????fill.radiusX?=?cornerRadius; ?
  
  
????????????????????lowlight.radiusX?=?cornerRadius; ?
  
  
????????????????????highlight.radiusX?=?cornerRadius; ?
  
  
????????????????????border.radiusX?=?cornerRadius; ?
  
  
????????????????} ?
  
  
???????????????? ?
  
  
????????????????if?(highlightStroke)?highlightStroke.radiusX?=?cornerRadius; ?
  
  
????????????????if?(hldownstroke1)?hldownstroke1.radiusX?=?cornerRadius; ?
  
  
????????????????if?(hldownstroke2)?hldownstroke2.radiusX?=?cornerRadius; ?
  
  
???????????????? ?
  
  
????????????????super.updateDisplayList(unscaledWidth,?unscaledHeight); ?
  
  
????????????} ?
  
  
???????????? ?
  
  
????????????private?var?cornerRadius:Number?=?2; ?
  
  
????????????????????????????????? ?
  
  
????????]]>???????? ?
  
  

????</fx:Script>?

  
  
???????? ?
  
  

????<!--?states?-->?

  
  

????<s:states>?

  
  

????????<s:State?name="up"?/>?

  
  

????????<s:State?name="over"?/>?

  
  

????????<s:State?name="down"?/>?

  
  

????????<s:State?name="disabled"?/>?（定义了四种状态）

  
  

????</s:states>?

  
  
???? ?
  
  

????<!--?layer?1:?shadow?-->?

  
  

????<!---?@private?-->?

  
  

????<s:Rect?id="shadow"?left="-1"?right="-1"?top="-1"?bottom="-1"?radiusX="2">?

  
  

????????<s:fill>?

  
  

????????????<s:LinearGradient?rotation="90">?

  
  

????????????????<s:GradientEntry?color="0x000000"? ?

  
  

?????????????????????????????????color.down="0xFFFFFF"?

  
  

?????????????????????????????????alpha="0.01"?

  
  

?????????????????????????????????alpha.down="0"?/>?

  
  

????????????????<s:GradientEntry?color="0x000000"? ?

  
  

?????????????????????????????????color.down="0xFFFFFF"? ?

  
  

?????????????????????????????????alpha="0.07"?

  
  

?????????????????????????????????alpha.down="0.5"?/>?

  
  

????????????</s:LinearGradient>?

  
  

????????</s:fill>?

  
  

????</s:Rect>?

  
  
???? ?
  
  

????<!--?layer?2:?fill?-->?

  
  

????<!---?@private?-->?

  
  

????<s:Rect?id="fill"?left="1"?right="1"?top="1"?bottom="1"?radiusX="2">?

  
  

????????<s:fill>?

  
  

????????????<s:LinearGradient?rotation="90">?

  
  

????????????????<s:GradientEntry?color="0xFFFFFF"? ?

  
  

?????????????????????????????????color.over="0xBBBDBD"? ?

  
  

?????????????????????????????????color.down="0xAAAAAA"? ?

  
  

?????????????????????????????????alpha="0.85"?/>?

  
  

????????????????<s:GradientEntry?color="0xD8D8D8"? ?

  
  

?????????????????????????????????color.over="0x9FA0A1"? ?

  
  

?????????????????????????????????color.down="0x929496"? ?

  
  

?????????????????????????????????alpha="0.85"?/>?

  
  

????????????</s:LinearGradient>?

  
  

????????</s:fill>?

  
  

????</s:Rect>?

  
  
?
  
  

????<!--?layer?3:?fill?lowlight?-->?

  
  

????<!---?@private?-->?

  
  

????<s:Rect?id="lowlight"?left="1"?right="1"?top="1"?bottom="1"?radiusX="2">?

  
  

????????<s:fill>?

  
  

????????????<s:LinearGradient?rotation="270">?

  
  

????????????????<s:GradientEntry?color="0x000000"?ratio="0.0"?alpha="0.0627"?/>?

  
  

????????????????<s:GradientEntry?color="0x000000"?ratio="0.48"?alpha="0.0099"?/>?

  
  

????????????????<s:GradientEntry?color="0x000000"?ratio="0.48001"?alpha="0"?/>?

  
  

????????????</s:LinearGradient>?

  
  

????????</s:fill>?

  
  

????</s:Rect>?

  
  
???? ?
  
  

????<!--?layer?4:?fill?highlight?-->?

  
  

????<!---?@private?-->?

  
  

????<s:Rect?id="highlight"?left="1"?right="1"?top="1"?bottom="1"?radiusX="2">?

  
  

????????<s:fill>?

  
  

????????????<s:LinearGradient?rotation="90">?

  
  

????????????????<s:GradientEntry?color="0xFFFFFF"?

  
  

?????????????????????????????????ratio="0.0"?

  
  

?????????????????????????????????alpha="0.33"? ?

  
  

?????????????????????????????????alpha.over="0.22"? ?

  
  

?????????????????????????????????alpha.down="0.12"/>?

  
  

????????????????<s:GradientEntry?color="0xFFFFFF"?

  
  

?????????????????????????????????ratio="0.48"?

  
  

?????????????????????????????????alpha="0.33"?

  
  

?????????????????????????????????alpha.over="0.22"?

  
  

?????????????????????????????????alpha.down="0.12"?/>?

  
  

????????????????<s:GradientEntry?color="0xFFFFFF"?

  
  

?????????????????????????????????ratio="0.48001"?

  
  

?????????????????????????????????alpha="0"?/>?

  
  

????????????</s:LinearGradient>?

  
  

????????</s:fill>?

  
  

????</s:Rect>?

  
  
???? ?
  
  

????<!--?layer?5:?highlight?stroke?(all?states?except?down)?-->?

  
  

????<!---?@private?-->?

  
  

????<s:Rect?id="highlightStroke"?left="1"?right="1"?top="1"?bottom="1"?radiusX="2"?excludeFrom="down">?

  
  

????????<s:stroke>?

  
  

????????????<s:LinearGradientStroke?rotation="90"?weight="1">?

  
  

????????????????<s:GradientEntry?color="0xFFFFFF"?alpha.over="0.22"?/>?

  
  

????????????????<s:GradientEntry?color="0xD8D8D8"?alpha.over="0.22"?/>?

  
  

????????????</s:LinearGradientStroke>?

  
  

????????</s:stroke>?

  
  

????</s:Rect>?

  
  
???? ?
  
  

????<!--?layer?6:?highlight?stroke?(down?state?only)?-->?

  
  

????<!---?@private?-->?

  
  

????<s:Rect?id="hldownstroke1"?left="1"?right="1"?top="1"?bottom="1"?radiusX="2"?includeIn="down">?

  
  

????????<s:stroke>?

  
  

????????????<s:LinearGradientStroke?rotation="90"?weight="1">?

  
  

????????????????<s:GradientEntry?color="0x000000"?alpha="0.25"?ratio="0.0"?/>?

  
  

????????????????<s:GradientEntry?color="0x000000"?alpha="0.25"?ratio="0.001"?/>?

  
  

????????????????<s:GradientEntry?color="0x000000"?alpha="0.07"?ratio="0.0011"?/>?

  
  

????????????????<s:GradientEntry?color="0x000000"?alpha="0.07"?ratio="0.965"?/>?

  
  

????????????????<s:GradientEntry?color="0x000000"?alpha="0.00"?ratio="0.9651"?/>?

  
  

????????????</s:LinearGradientStroke>?

  
  

????????</s:stroke>?

  
  

????</s:Rect>?

  
  

????<!---?@private?-->?

  
  

????<s:Rect?id="hldownstroke2"?left="2"?right="2"?top="2"?bottom="2"?radiusX="2"?includeIn="down">?

  
  

????????<s:stroke>?

  
  

????????????<s:LinearGradientStroke?rotation="90"?weight="1">?

  
  

????????????????<s:GradientEntry?color="0x000000"?alpha="0.09"?ratio="0.0"?/>?

  
  

????????????????<s:GradientEntry?color="0x000000"?alpha="0.00"?ratio="0.0001"?/>?

  
  

????????????</s:LinearGradientStroke>?

  
  

????????</s:stroke>?

  
  

????</s:Rect>?

  
  
?
  
  

????<!--?layer?7:?border?-?put?on?top?of?the?fill?so?it?doesn't?disappear?when?scale?is?less?than?1?-->?

  
  

????<!---?@private?-->?

  
  

????<s:Rect?id="border"?left="1"?right="1"?top="1"?bottom="1"?width="69"?height="20"?radiusX="2">?

  
  

????????<s:stroke>?

  
  

????????????<s:LinearGradientStroke?rotation="90"?weight="1">?

  
  

????????????????<s:GradientEntry?color="0x000000"? ?

  
  

?????????????????????????????????alpha="0.5625"?

  
  

?????????????????????????????????alpha.down="0.6375"?/>?

  
  

????????????????<s:GradientEntry?color="0x000000"? ?

  
  

?????????????????????????????????alpha="0.75"? ?

  
  

?????????????????????????????????alpha.down="0.85"?/>?

  
  

????????????</s:LinearGradientStroke>?

  
  

????????</s:stroke>?

  
  

????</s:Rect>?

  
  
???? ?
  
  

????<!--?layer?8:?text?-->?

  
  

????<!---?@copy?spark.components.supportClasses.ButtonBase#labelDisplay??-->?

  
  

????<s:Label?id="labelDisplay"?

  
  

?????????????textAlign="center"?

  
  

?????????????maxDisplayedLines="1"?

  
  

?????????????horizontalCenter="0"?verticalCenter="1"?verticalAlign="middle"?

  
  

?????????????left="10"?right="10"?top="2"?bottom="2"?

  
  

?????????????backgroundColor="#C7D2F2">?

  
  

????</s:Label>?

  
  
???? ?
  
  

</s:SparkButtonSkin>?

 
 

??????? 2 .???? .as文件程序皮肤：

???? 从别的地方拷贝的?，我自己没有做，就那么个意思，可以用as写皮肤:

?

 
 

1?package?com.jiangzone ?
  
  
2?{ ?
  
  
3?????import?mx.skins.Border ?
  
  
4?????import?mx.core.EdgeMetrics; ?
  
  
5?????import?mx.core.Container; ?
  
  
6?????import?mx.graphics.RectangularDropShadow; ?
  
  
7???? ?
  
  
8?????public?class?MyPanelBorderSkin?extends?Border?{ ?
  
  
9???????? ?
  
  
10?????????public?function?MyPanelBorderSkin():void?{ ?
  
  
11??????????} ?
  
  
12???????? ?
  
  
13?????????/** ?
  
  
14???????????*?该方法必需要覆盖，如果你要自定义自已的皮肤的话， ?
  
  
15???????????*?该方法当在控件更新外观时将会被自动调用 ?
  
  
16???????????*?会传入两个参数数，第一个是Width，第二个是Height，即是该控件的宽与高 ?
  
  
17???????????*?*/ ?
  
  
18??????????override?protected?function?updateDisplayList(w:Number,h:Number):void?{ ?
  
  
19?????????????super.updateDisplayList(w,h); ?
  
  
20???????????? ?
  
  

21??????????????var?ba:uint?=?1;????????????????//backgroundAlpha?????背景透明度 ?

  
  

22??????????????var?bg:uint?=?0xffffff;????????????//backgroundColor?????背景颜色 ?

  
  
23??????????????graphics.clear();????????????????//graphics这个属性是父类里已经提供了的 ?
  
  

24??????????????var?p:Container?=?parent?as?Container;????????//获取该皮肤所应用在的父容器，这里为Panel ?

  
  
25???????????? ?
  
  
26?????????????//这里需要注意，一定要判断父容器是否已被设置，在文章里作解释 ?
  
  
27?????????????if(p){ ?
  
  
28?????????????????//获取容器定义的区域边界信息对象??????????? ?
  
  

29??????????????????var?vm:EdgeMetrics?=?p.viewMetrics;??????? ?

  
  
30?????????????????//设置四个角的圆度 ?
  
  

31??????????????????var?radiusContent:Object?=?{tl:vm.top,tr:0,bl:0,br:vm.top};??? ?

  
  
32?????????????????//标题栏圆度??? ?
  
  

33??????????????????var?radiusTitle:Object?=?{tl:vm.top,br:0};??????? ?

  
  
34?????????????????//画一个圆角矩形，整个背景 ?
  
  
35?????????????????this.drawRoundRect(0,w,h,radiusContent,bg,ba); ?
  
  
36?????????????????//画一个圆角矩形，标题栏??? ?
  
  
37?????????????????this.drawRoundRect(0,vm.top,radiusTitle,0xff0000,.7); ?
  
  
38?????????????????//画一个圆角矩形，标题栏的那个高光水晶条 ?
  
  
39?????????????????this.drawRoundRect(0,vm.top?/?2,0xffffff,.3); ?
  
  
40???????????????? ?
  
  
41?????????????????//下面是画阴影的。 ?
  
  

42??????????????????var?dropShadow:RectangularDropShadow?=?new?RectangularDropShadow(); ?

  
  

43??????????????????dropShadow.distance?=?8; ?

  
  

44??????????????????dropShadow.angle?=?60; ?

  
  

45??????????????????dropShadow.color?=?0x000000; ?

  
  

46??????????????????dropShadow.alpha?=?0.4; ?

  
  
47???????? ?
  
  

48??????????????????dropShadow.tlRadius?=?radiusContent.tl; ?

  
  

49??????????????????dropShadow.trRadius?=?radiusContent.tr; ?

  
  

50??????????????????dropShadow.blRadius?=?radiusContent.bl; ?

  
  

51??????????????????dropShadow.brRadius?=?radiusContent.br; ?

  
  
52???????? ?
  
  
53??????????????????dropShadow.drawShadow(graphics,?0,?w,?h); ?
  
  
54??????????????} ?
  
  
55??????????} ?
  
  
56??????} ?
  
  
57?}?
 
 

其实关键不就是程序皮肤的设计。。

嗯 flex4中关键就是spark.skins.SparkSkin这个类? 以及Flex4APIsparkskinsspark

里面的一些默认皮肤的学习，修改以及设计。

?