Flex更換皮膚與LinkButton自定義按鈕皮膚

                                              

      第一部分轉自http://hi.baidu.com/%B0%B5%BA%DA%B2%E0%CE%C0/blog/item/c661182afccbee93023bf632.html

 

 

     這個問題一直有很多人問，我們能不能夠去更換Flex中默認組件的外觀，答案是可以的。我們可以使用CSS和FLASH軟件來製作並更換程序中的組件外觀。這裏我們就製作一篇簡單易懂的教程來向大家講解如何製作並替換Flex原有組件的外觀樣式。

      網上也有類似的教程，我這篇不一定寫的比其他的教程好，但是我們的教程絕對屬於原創，並結合了作者的心得體會，力求獨一無二。如果大家要轉載本篇文章，請註明文章來源。

      好了，廢話不多說，我們直接進入正題。首先我們要知道在FLEX中是什麼控制組件的樣式。答案是CSS。這個CSS和我們網頁中的CSS不太一樣。它可是爲FLEX專門設計的一種語言規範，所以寫起來也不太一樣。知道了是什麼控制組件的格式之後我們就要來了解一下CSS是怎樣工作的。實際上在FLEX編譯的時候會調用一個外部SWF文件的庫文件。也就是說，我們的新組件外觀都存放在這個外部的SWF文件的庫中。這樣當編譯器編譯時就會將資源調用，從而打到改變皮膚的目的。

      說到SWF文件，並且需要美工設計時，選擇FLASH這個軟件是最合適不過了。好了，我們打開FLASH軟件，現在我們來製作皮膚外觀。

      新建一個元件，將它的屬性設置爲影片剪輯，具體設置請看下圖：

      然後我們再去繪製這個按鈕外觀，我們繪製一個簡單的外觀：

      請注意，大家要調好九宮格的位置，因爲位置一旦設定，在FLEX中就不能進行更改了。好了我們在FLASH中繪製的工作就完成了，接下來我們將這個FLA文件保存，併發布。當然你保存到哪裏都可以，發佈的SWF文件要和CSS處於統一文件夾下。這裏我們來看一下我的FLA文件存儲路徑。

        大家看，我將FLA文件也存儲到了style文件夾下，這樣便於文件的尋找。生成的SWF文件和CSS文件在一起，大家應該看到了。到現在大家的文件中應該沒有CSS文件，所以我們要創建一個CSS格式文件。如何新建CSS文件呢？我們可以在style文件夾單擊右鍵，創建一個CSS文件。

        新建CSS文件後，我們就要對CSS文件進行編輯。CSS文件名稱要定義成style.css。然後我們新建一個BUTTON外觀。

        點擊一下這個藍色的按鈕，彈出一個對話框：

        這樣設置以後，我們就可以看到一個CSS文件，如圖：

        這8個按鈕外觀就是按鈕的8中狀態的默認皮膚，我們可以對每一種皮膚進行替換，在這篇教程中，我們僅以鼠標擡起和鼠標按下狀態進行演示，其他的大家可以自行實驗。我們切換到代碼設計面板，添加代碼如下：

Button
{
color:#AAAAAA;
upSkin:Embed(source="skin.swf" ,symbol="up_pifu");
downSkin:Embed(source="skin.swf",symbol="down_pifu");
}

        這段代碼就是調用我們自定義的皮膚，我們看upSkin是指按鈕彈起狀態，Embed是調用外部資源。source="skin.swf" ,symbol="up_pifu"他的函數是指定我們要替換的資源。好了寫完這段語句我們在回到視圖設計面板來看一下效果。這裏請大家注意，這段代碼一定要手動輸入，如果您是直接複製我們的代碼，將會導致編譯錯誤。

        我們可以看到，按鈕的外觀已經被更改了。那麼如何將我們的CSS文件關聯到主程序中呢？我們先來將這些文件保存，確保編譯沒有錯誤。然後回到MXML文件中，在代碼視圖中添加代碼如下：

<mx:Style source="style/style.css"/>

      這樣再保存文件，你的組件外觀就被更改了，我們來看一下運行效果吧!

        可以看到雖然按鈕的大小改變了，但是按鈕的外觀也跟隨伸縮，這是因爲我們設置了九宮格。好了！以上就是皮膚的製作方法。如果您對自己製作的皮膚不滿意，也可以到一些網站上去下載現成的皮膚使用，這裏我們推薦一個網站，這個網站的皮膚使用起來還有外觀上都還不錯！http://www.scalenine.com/

 

       第二部分  ActionScript自定義按鈕皮膚

       轉自http://toromio1987.spaces.live.com/Blog/cns!84F20CD1D80F1B38!348.entry?wa=wsignin1.0&sa=525654097

      

     

      //首先在類裏面定義css：
     <code>

     [Embed("picture.gif")]
     var skin:Class;

     //然後就可以通過setStyle的方法來放皮膚了，想要什麼，那就多定義一些css吧：）
     private function changeSkin():void{
         var button:Button = new Button();
         button.graphics.clear();
         button.setStyle("upSkin", skin);
         button.setStyle("downSkin", skin);
         button.setStyle("overSkin", skin);
         this.addChild(button);
     }
     </code>

       

        第三部分 一個繼承LinkButton的例子

        Flex中如何擴展LinkButton控件並且添加自定義的樣式的例子

       http://www.elanso.com/ArticleModule/P0KASEPUSOGwT3MlS4MGJ2Ii.html

     

package comps {
    import mx.controls.LinkButton;

    [Style(name="toggleBackgroundColor",  type="uint",format="Color", inherit="yes")]

    public class CustomLinkButton2 extends LinkButton {
        public function CustomLinkButton2() {
            super();
        }

        override public function set enabled(value:Boolean):void {
            super.enabled = value;
            useHandCursor = value;
        }
    }
}

 

 

package skins {
    import mx.skins.halo.LinkButtonSkin;
    import mx.styles.StyleManager;

    public class CustomLinkButtonSkin1 extends LinkButtonSkin {
        public function CustomLinkButtonSkin1() {
            super();
        }
        override protected function updateDisplayList(w:Number, h:Number):void {
            super.updateDisplayList(w, h);

            // Inherited styles
            var cornerRadius:Number = getStyle("cornerRadius");
            var rollOverColor:uint = getStyle("rollOverColor");
            var selectionColor:uint = getStyle("selectionColor");

            // Custom styles
            var toggleBackgroundColor:uint = getStyle("toggleBackgroundColor") || getStyle("themeColor");

            graphics.clear();

            switch (name) {
                case "upSkin":
                    // Draw invisible shape so we have a hit area.
                    drawRoundRect(
                            0,                /* x */
                            0,                /* y */
                            w,                /* width */
                            h,                /* height */
                            cornerRadius,    /* cornerRadius */
                            0,                /* color */
                            0.0                /* alpha */
                        );
                    break;

                case "selectedUpSkin":
                case "selectedOverSkin":
                    drawRoundRect(0, 0, w, h, cornerRadius, toggleBackgroundColor, 1.0);
                    break;

                case "overSkin":
                    drawRoundRect(0, 0, w, h, cornerRadius, rollOverColor, 1.0);
                    break;

                case "selectedDownSkin":
                case "downSkin":
                    drawRoundRect(0, 0, w, h, cornerRadius, selectionColor, 1.0);
                    break;

                case "selectedDisabledSkin":
                    // Draw 20% alpha shape so we have a hit area.
                    drawRoundRect(0, 0, w, h, cornerRadius, toggleBackgroundColor, 0.2);
                    break;

                case "disabledSkin":
                    // Draw invisible shape so we have a hit area.
                    drawRoundRect( 0, 0, w, h, cornerRadius, 0, 0.0);
                    break;
            }
        }
    }
}

      

     

       

comps:CustomLinkButton1 id="linkButtonMXML"
            label="LinkButton (MXML)"
            toggle="true"
            enabled="{checkBox.selected}"
            skin="skins.CustomLinkButtonSkin1"
            rollOverColor="red"
            selectionColor="haloOrange"
            toggleBackgroundColor="yellow" />

第四部分  我只是把第二和第三部分合併到一起

在代碼中修改skin方法 先是繼承修改了 rollover所應該顯示的效果 然後在actionscript中創建了一個效果類 

 使linkbutton的效果改變。

有些方法是需要類來“充值”的