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
>

情非得已