Flash技巧：FLA組件開發之文本條組件

文章來源于動畫設計與制作208例，感謝作者 chx 給我們帶來經精彩的文章！

設計教程/設計教程/Flash教程2009-10-13

自制CS3版組件，和軟件自帶的UI組件一樣是帶參數的影片剪輯可以修改其外觀和行為也稱為“fla組件”，本例繼承UIComponent基類開發一個用于播放FLV視頻的播放器，通過本例的講解引導讀者掌握自制組件的封裝方法及學習播放器開發過程。

自制CS3版組件，和軟件自帶的UI組件一樣是帶參數的影片剪輯可以修改其外觀和行為也稱為“fla組件”，本例繼承UIComponent基類開發一個用于播放FLV視頻的播放器，通過本例的講解引導讀者掌握自制組件的封裝方法及學習播放器開發過程。[源文件下載]

本例思路：
<1> 制作要用到的元件。
<2> 編寫組件代碼。
<3> 轉化為編譯剪輯。
<4> 添加組件參數設置。
<5> 制作實時預覽的SWF文件。

實例步驟：

(1)新建Flash文檔，按Ctrl+F8創建一個影片剪輯名為“文本條”，這個影片剪輯將成為本例自制的組件，我們把組件代碼放在源文件同目錄的“net\Code”文件夾中類名為“TextBar.as”，所以選中復選框“為ActionScript導出”將類路徑設為“net.Code.TextBar”，如圖1- 所示。

提示：如果沒有鏈接欄，請點擊“高級”按鈕。

Flash技巧：FLA組件開發之文本條組件

圖11-1 創建元件

(2)創建組件類“TextBar.as”，如圖11-2所示。

Flash技巧：FLA組件開發之文本條組件

圖11-2 創建組件類

(3)先分析一下，我們寫的這個組件比較簡單，有兩個文本塊所以需要繪制兩個文本塊的背景圖形，如圖11-3所示。

Flash技巧：FLA組件開發之文本條組件

圖11-3 背景圖形

(4)先選中第一塊圖形按F8轉化為影片剪輯名為“bar_titleBg”，選中復選框“為ActionScript導出”類路徑也設為“bar_titleBg”，并選中“啟用9切片縮放比例輔助線”復制框，如圖11-4所示。

Flash技巧：FLA組件開發之文本條組件

圖11-4 轉化為元件

(5)同樣把第二塊圖形轉化為影片剪輯，名為“bar_textBg”，類鏈接為“bar_titleBg”。

(6)開始編寫剛才創建的組件類文件“TextBar.as”，為了便于調試先繼承MovieClip類，把組件代碼編寫好后再來封裝。

AS3代碼

package net.Code{
    import fl.core.UIComponent;
    import flash.display.MovieClip
    import flash.events.Event;
    import flash.text.*;
    public class TextBar extends UIComponent {
        private var titleBg:MovieClip;
        private var textBg:MovieClip;
        private var titleTxt:TextField;
        private var textTxt:TextField;
        public function TextBar() {
            titleBg=createClip("bar_titleBg");
            textBg=createClip("bar_textBg");
            addChild(textBg);
            addChild(titleBg);//添加兩塊背景
            titleTxt = new TextField();
            titleTxt.selectable=false;
            titleTxt.textColor=0x333333;
            titleTxt.autoSize = TextFieldAutoSize.LEFT;
            addChild(titleTxt);//創建標題字文本框

            textTxt = new TextField();
            textTxt.autoSize = TextFieldAutoSize.LEFT;
            addChild(textTxt);//創建顯視文字文本框
            addEventListener(Event.CHANGE,changFun);
        }
        private function changFun(event:Event):void {
            seting();
        }
        /*
        *文本被改變時刷新位置
        */
        public function set titleText(value:String):void {
            titleTxt.text=value;
            seting();
        }
        /*
        *文本被改變時刷新位置
        */
        public function set textText(value:String):void {
            if (value=="") {
                value=" ";
            }
            textTxt.text=value;
            seting();
        }
        public function set textInput(value:Boolean):void {
            if (value) {
                textTxt.type=TextFieldType.INPUT;
            } else {
                textTxt.type=TextFieldType.DYNAMIC;
            }
        }
        private function seting():void {
            titleTxt.x=2;
            titleBg.width=titleTxt.width;
            textBg.x=titleTxt.width;
            textTxt.x=textBg.x+2;
            textBg.width=textTxt.width+4;
        }
        /*
        *元件位置調整
        */
        private function createClip(className:String):MovieClip {
            var clip:MovieClip;
            var thisDomain=loaderInfo.applicationDomain;
            try {
                var classMc=thisDomain.getDefinition(className);
                clip=new classMc as MovieClip;
            } catch (e:ReferenceError) {
                clip=new MovieClip();
            }
            return clip;
        }
    }
}

技術看板：代碼講解

第12和13行先添加剛才繪制的兩個影片剪輯，按鏈接名“bar_textBg”和“bar_titleBg”聲明。

第16到第23行創建兩個文本框，其中標題字只是用于顯視文字設置為不可選。

第24行添加CHANG事件，文字改變時觸發changFun函數并調用各元件位置的調整函數，這樣當我們在組件里輸入文字時，背景就能跟著調整大小了。

(7)完成代碼的編寫，修改繼承基類為“UIComponent”。

AS3代碼

技術看板：UIComponent類

UIComponent 類是所有可視組件(交互式和非交互式)的基類。交互式組件被定義為接收用戶輸入(例如鍵盤或鼠標活動)的組件。非交互式組件用于顯示數據;它們對用戶交互不做響應。

共3頁:
<
1
2
3
>

情非得已

a级毛片在线观看_欧美性69式xxxx护士_欧美va天堂在线电影_美女扒开内裤羞羞网站

Flash技巧：FLA組件開發之文本條組件