Flex皮膚制作流程

Titlewindow的建立流程

 1、先建立皮膚 命名為：titlewindowSkin1

 2、再建立基于spark.components.SkinnableContainer元件的檔案

 例如：命名為testTitlewindow 引用titlewindowSkin1皮膚

 寫入代碼：

 <fx:Script>

  <![CDATA[

   import core.view.componentSkin.titleWindow.TwN_0_0_1;

   import mx.events.FlexEvent;

   public var _title:String;

   public function set title(v:String):void

   {

    if(skin != null)

     TwN_0_0_1(this.skin).titleDisplay.text=v;

     //TwN_0_0_1為titlewiondw的名字

     //titleDisplay為titlewindow中lable的id

    _title = v;

   }

   protected function skinnablecontainer1_creationCompleteHandler(event:FlexEvent):void

   {

    TwN_0_0_1(this.skin).titleDisplay.text=_title;

   }

  ]]>

 </fx:Script>

 3、再建立基于testTitlewindow元件類型的檔案 在此檔案中寫titlewindow中的内容在彈出窗體的時候也是彈出此檔案

制作皮膚時 控件id有些是一定要寫的。比如titlewindow的關閉按鈕的id 其id要與預設titlewindow皮膚中的關閉按鈕id名相同

控件使用skinClass屬性設定要用的皮膚

提高性能的方式：

盡量用最少的控件實作最多的效果。

利用狀态改變圖檔路徑來控制按鈕的各種狀态效果，要比用貼圖的方式改變圖檔實作狀态效果，消耗性能小

在自定義皮膚時自定義的檔案上最好加上以下代碼

 <fx:Metadata>

  <![CDATA[

  [HostComponent("控件包")] //如：[HostComponent("spark.components.VScrollBar")]

  ]]>

 </fx:Metadata>

1、貼圖：

 <s:Rect width="18" height="18">

  <s:fill>

   <s:BitmapFill source="@Embed(source='css/groupware/button/18_18ico12.png')" />

   <!--source="@Embed(source='css/groupware/button/18_18ico12.png')"圖檔路徑加@Embed會講圖檔下載下傳至用戶端，

   再次啟用頁面時程式自動去用戶端查找圖檔-->

  </s:fill>

 </s:Rect>

 貼圖 ：Rect繪制一個可貼圖的矩形區域（可設定巨型邊角弧度） fill标簽為設定為填充（如果不寫fill标簽則為繪制圖像）

  BitmapFill向矩形區域内貼圖。

   注：Rect必須要設定寬度和高度如果不設定寬高要設定距離上下左右邊的距離 

2、states 狀态：

 <s:states>

  <s:State name="up" />      按鈕擡起時

  <s:State name="over" />      滑鼠經過按鈕時

  <s:State name="down" />      按鈕被按下時

  <s:State name="disabled" />  按鈕不作用時

 </s:states>

 <s:Button label="button1"  click.visibleFalse="{this.currentState = 'visibleTrue'}"

           click.visibleTrue="{this.currentState = 'visibleFalse'}"  />

 currentState屬性用來改變狀态

    注：按鈕的狀态必須有 up over down disabled

 titleWindow必須有normal（不作用時）狀态

    凡是在flex中有自己皮膚的控件都有自己的狀态都是在自定義皮膚狀态時要定義的，可以不用狀态但是必須定義

    各種控件的狀态可以到系統預設皮膚中檢視。

    檢視方法：拖拽一個控件。skinclass=“預設皮膚類” ，按住ctrl滑鼠點預設皮膚類。

3、titlewindow 貼圖方試：九宮格

 1：左上角、右上角、左下角、右下角 各一張圖檔 設定距離上下左右的距離來定位

 2：上中、左中、右中、下中、正中心 各用一張可以拉伸的圖檔設定距離上下左右的距離

 和拉伸方式來定位

 3：titlewindow控件頭部一個Group 中間一個Group。中間的Group用來存放、顯示titlewindow中的内容。

4、filters 濾鏡

 <s:filters>

  <s:GlowFilter alpha="1.0" blurX="2" blurY="2" color="#000000" inner="false" knockout="false" quality="1" strength="4"/>

  </s:filters>

 1、斜角濾鏡（BevelFilter 類）可建立立體效果的文字或圖像

 2、模糊濾鏡（BlurFilter 類）對文字或圖檔進行模糊處理

 3、投影濾鏡（DropShadowFilter 類）添加陰影效果

 4、發光濾鏡（GlowFilter 類）添加發光效果

 5、漸變斜角濾鏡（GradientBevelFilter 類可使用多種顔色漸變實作斜角效果

 6、漸變發光濾鏡（GradientGlowFilter 類）可使用多種顔色漸變實作發光效果

 7、顔色矩陣濾鏡（ColorMatrixFilter 類）可設定圖檔的亮度、對比度、飽和度、色相！

 8、卷積濾鏡（ConvolutionFilter 類）可實作圖檔的銳化、邊緣、雕刻效果！

 9、置換圖濾鏡（DisplacementMapFilter 類）可實作兩張圖檔之間的切換效果！

 10、着色器濾鏡（ShaderFilter 類）可通過應用不同的pbj檔案，實作多種效果！例如：聚焦模糊、鉛筆畫、反色、馬賽克、調色效果等！

 1、GlowFilter屬性：

  olor：光暈顔色

  alpha：顔色的Alpha透明度值

  blurX：水準模糊量

  blurY：垂直模糊量

  strength：光暈的強度

  quality：應用濾鏡的次數

  inner：指定發光是否為内側發光

  knockout：是否具有挖空效果

5、文本框 textinput：

 1、textinput 中文本輸入框用RichEditableText

  RichEditableText屬性：

  1、textAlign 設定文字對齊方式

  2、color 設定文字顔色

  3、verticalAlign 設定垂直對齊方式

  4、lineHeight 行高度

  5、mouseEnabled設定是否接受滑鼠事件，預設為true

  6、mouseChildren确定對象的子項是否支援滑鼠。如果對象支援滑鼠，則使用者可以使用滑鼠與其互動。預設值為 true。

  7、visible設定對象是否顯示 可用作綁定資料源

 2、貼圖方式：左、中、右

 3、textinput的狀态

  <s:states>

          <s:State name="normal"/>

          <s:State name="disabled"/>

      </s:states>

6、垂直滾動條VScrollBar

 由四個按鈕組成。最上面的按鈕 、中間按鈕 、最下面的按鈕、中的長豎條也作為一個按鈕。首先要先做出這四個按鈕的皮膚。

 ---focusEnabled屬性設定成false以便外部元件成為可獲得焦點的實體？？？？不懂

 中間豎長條id=“track”

 中間按鈕  id=“thumb”

 最上面按鈕id=“decrementButton”

 最下面按鈕id=“incrementButton”

7、布局

 Group的屬性：

    <s:Group width="33.33%"  height="100%">

   <s:layout >

    <s:HorizontalLayout horizontalAlign="left"  verticalAlign="middle"/>

    </s:layout>

    </s:Group>

    horizontalAlign="center"： 設定内容橫向對齊方式

      verticalAlign="middle"： 設定内容縱向對齊方式

              gap： 設定goup各元素之間的間隔

8、設定漸變

 <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>

 1、Rect:繪制矩形的填充圖形元素。矩形的角可以是圓角。

   radiusX="2"：設定所有角上的 x 軸的預設角半徑

    topLeftRadiusX（巨型左上角x半徑）

    topRightRadiusX（矩形右上角的 x 半徑）

    bottomLeftRadiusX（矩形的左下角的 x 半徑）

                                bottomRightRadiusX（矩形的右下角的 x 半徑

    屬性優先于此屬性。

 2、LinearGradientStroke:漸變标簽 rotation設定漸變方向  weight漸變筆觸粗細

  GradientEntry：在 LinearGradientStroke标簽内可以寫多個GradientEntry 用來控制漸變填充過程中的過渡、

    與LinearGradient 和 RadialGradient 類配合使用可以定義漸變填充。

轉載于:https://my.oschina.net/u/263424/blog/633434