代码改变世界

FLA组件开发·文本条组件

2009-10-19 10:38  宝宝合凤凰  阅读(394)  评论(0)    收藏  举报
自制CS3版组件，和软件自带的UI组件一样是带参数的影片剪辑可以修改其外观和行为也称为“fla组件”，本例继承UIComponent基类开发一个用于播放FLV视频的播放器，通过本例的讲解引导读者掌握自制组件的封装方法及学习播放器开发过程。

本例思路：

http://www.shch8.com/v3/brow/183.html

<1> 制作要用到的元件。
<2> 编写组件代码。
<3> 转化为编译剪辑。
<4> 添加组件参数设置。
<5> 制作实时预览的SWF文件。
 

实例步骤：

（1）新建Flash文档，按Ctrl+F8创建一个影片剪辑名为“文本条”，这个影片剪辑将成为本例自制的组件，我们把组件代码放在源文件同目录的“net\Code”文件夹中类名为“TextBar.as”，所以选中复选框“为ActionScript导出”将类路径设为“net.Code.TextBar”，如图1- 所示。
提示：如果没有链接栏，请点击“高级”按钮。
 
图11-1  创建元件
（2）创建组件类“TextBar.as”，如图11-2所示。
 
图11-2  创建组件类
（3）先分析一下，我们写的这个组件比较简单，有两个文本块所以需要绘制两个文本块的背景图形，如图11-3所示。
 
图11-3 背景图形
（4）先选中第一块图形按F8转化为影片剪辑名为“bar_titleBg”，选中复选框“为ActionScript导出”类路径也设为“bar_titleBg”，并选中“启用9切片缩放比例辅助线”复制框，如图11-4所示。
 
图11-4  转化为元件
（5）同样把第二块图形转化为影片剪辑，名为“bar_textBg”，类链接为“bar_titleBg”。
（6）开始编写刚才创建的组件类文件“TextBar.as”，为了便于调试先继承MovieClip类，把组件代码编写好后再来封装。
AS3代码
  1. package net.Code{   
  2.     import fl.core.UIComponent;   
  3.     import flash.display.MovieClip  
  4.     import flash.events.Event;   
  5.     import flash.text.*;   
  6.     public class TextBar extends UIComponent {   
  7.         private var titleBg:MovieClip;   
  8.         private var textBg:MovieClip;   
  9.         private var titleTxt:TextField;   
  10.         private var textTxt:TextField;   
  11.         public function TextBar() {   
  12.             titleBg=createClip("bar_titleBg");   
  13.             textBg=createClip("bar_textBg");   
  14.             addChild(textBg);   
  15.             addChild(titleBg);//添加两块背景   
  16.             titleTxt = new TextField();   
  17.             titleTxt.selectable=false;   
  18.             titleTxt.textColor=0x333333;   
  19.             titleTxt.autoSize = TextFieldAutoSize.LEFT;   
  20.             addChild(titleTxt);//创建标题字文本框   
  21.                
  22.             textTxt = new TextField();   
  23.             textTxt.autoSize = TextFieldAutoSize.LEFT;   
  24.             addChild(textTxt);//创建显视文字文本框   
  25.             addEventListener(Event.CHANGE,changFun);   
  26.         }   
  27.         private function changFun(event:Event):void {   
  28.             seting();   
  29.         }   
  30.         /*  
  31.         *文本被改变时刷新位置  
  32.         */  
  33.         public function set titleText(value:String):void {   
  34.             titleTxt.text=value;   
  35.             seting();   
  36.         }   
  37.         /*  
  38.         *文本被改变时刷新位置  
  39.         */  
  40.         public function set textText(value:String):void {   
  41.             if (value=="") {   
  42.                 value="  ";   
  43.             }   
  44.             textTxt.text=value;   
  45.             seting();   
  46.         }   
  47.         public function set textInput(value:Boolean):void {   
  48.             if (value) {   
  49.                 textTxt.type=TextFieldType.INPUT;   
  50.             } else {   
  51.                 textTxt.type=TextFieldType.DYNAMIC;   
  52.             }   
  53.         }   
  54.         private function seting():void {   
  55.             titleTxt.x=2;   
  56.             titleBg.width=titleTxt.width;   
  57.             textBg.x=titleTxt.width;   
  58.             textTxt.x=textBg.x+2;   
  59.             textBg.width=textTxt.width+4;   
  60.         }   
  61.         /*  
  62.         *元件位置调整  
  63.         */  
  64.         private function createClip(className:String):MovieClip {   
  65.             var clip:MovieClip;   
  66.             var thisDomain=loaderInfo.applicationDomain;   
  67.             try {   
  68.                 var classMc=thisDomain.getDefinition(className);   
  69.                 clip=new classMc as MovieClip;   
  70.             } catch (e:ReferenceError) {   
  71.                 clip=new MovieClip();   
  72.             }   
  73.             return clip;   
  74.         }   
  75.     }   
  76. }  
 
技术看板：代码讲解
第12和13行先添加刚才绘制的两个影片剪辑，按链接名“bar_textBg”和“bar_titleBg”声明。
第16到第23行创建两个文本框，其中标题字只是用于显视文字设置为不可选。
第24行添加CHANG事件，文字改变时触发changFun函数并调用各元件位置的调整函数，这样当我们在组件里输入文字时，背景就能跟着调整大小了。
（7）完成代码的编写，修改继承基类为“UIComponent”。
AS3代码
  1. package net.Code{   
  2.     import fl.core.UIComponent;   
  3.     import flash.display.MovieClip  
  4.     import flash.events.Event;   
  5.     import flash.text.*;   
  6.     public class TextBar extends UIComponent {   
  7.         private var titleBg:MovieClip;   
  8.         private var textBg:MovieClip;   
  9.         private var titleTxt:TextField;   
  10.         private var textTxt:TextField;   
  11.         public function TextBar() {   
  12.             titleBg=createClip("bar_titleBg");   
  13.             textBg=createClip("bar_textBg");  
 
技术看板：UIComponent类
UIComponent 类是所有可视组件（交互式和非交互式）的基类。交互式组件被定义为接收用户输入（例如键盘或鼠标活动）的组件。非交互式组件用于显示数据；它们对用户交互不做响应。
（8）为组件编写三个属性设置项，分别为标题字文字、文本文字以及设置文本字是否可以输入。
 
AS3代码
  1. public function set titleText(value:String):void {   
  2.     titleTxt.text=value;   
  3.     seting();   
  4. }   
  5. /*  
  6. *文本被改变时刷新位置  
  7. */  
  8. public function set textText(value:String):void {   
  9.     if (value=="") {   
  10.         value="  ";   
  11.     }   
  12.     textTxt.text=value;   
  13.     seting();   
  14. }   
  15. public function set textInput(value:Boolean):void {   
  16.     if (value) {   
  17.         textTxt.type=TextFieldType.INPUT;   
  18.     } else {   
  19.         textTxt.type=TextFieldType.DYNAMIC;   
  20.     }   
  21. }  
 
技术看板：get和set 存取器方法
get和set存取器函数还分别称为getter和setter，可以使用这些函数为创建的类提供易于使用的编程接口，并遵循信息隐藏和封装的编程原则。使用get和set函数可保持类的私有类属性，但允许类用户访问这些属性，就像他们在访问类变量而不是调用类方法。
（9）这时，如果发布影片会报错找不到基类“UIComponent”必须为“flash.display.MovieClip”，如图11-5所示。
图11- 5报错
（10）我们将类文件转为编译剪辑再置入组件之中，在fla源文件同一目录里新建一个flash文档用来封装代码，就命名为“组件代码封装.fla”。
（11）修改文档的类路径，按Ctrl+Shift+F12打开“发布设置”面板，选择Flash选项卡，再点击“设置”按钮弹出“高级ActionScript3.0设置”对话框，如图11-6所示。
图11-6  设置
（12）点击“源路径”选项卡中的“”按钮，添加类路径“$(AppConfig)/Component Source/ActionScript 3.0/User Interface”，如图11-7所示。
图11-7 添加类路径
（13）设置好搜索路径以后，按Ctrl+F8创建一个空的影片剪辑名为“TextBar”类路径链接为“net.Code.TextBar”，如图11-8所示。
图11-8  创建空影片剪辑
（14）再创建一个影片剪辑用来封装程序，命名为“TextBarPackage”类链接也用这个名字，在库里点击右键选择“转换为编译剪辑”，这时生成了一个编译剪辑文件“TextBarPackage SWF”如图11-9所示。
提示：在上一步我们用了一个空的影片剪辑通过链接路径导入程序，如果有多个组件类需要同时打包可以重复上一步骤再创建相应的影片剪辑做类链接，转换为编译剪辑时会自动把库里所有影片剪辑的链接类一起封装。
创建用于编译的影片剪辑“TextBarPackage”时我们用的类链接也是“TextBarPackage”，这个影片剪辑也可以不使用类链接，编译后会自动生成类名。Flash官方自带的UI组件用的编译名是“ComponentShim”，类链接是“fl.core.ComponentShim”，我们在取名与使用类链接地址时尽量不要与官方组件同名，避免被覆盖或冲突。
 
图11- 9 生成编译剪辑
（15）好了，现在回到“textBar.fla”中，在我们创建的“文本条”组件里新建一个图层名为“AS”的图层，在第二帧上按F7插入一个空帧将上一步里创建的编译剪辑“TextBarPackage SWF”复制到这帧里，并在图层“元件”的第二帧中放置该组件用到的两个元件“bar_titleBg”和“bar_textBg”，以后更换组件皮肤可以直接在这里修改了，如图11-10所示。
图11- 10置入编译程序
（16）图层“元件”的第一帧里，绘制一个矩形作为组件的占位图形，也就是决定组件大小的图形，如图11-11所示。
 
图11-11  绘制占位图形
（17）为组件添加参数设置，在库里“文本条”上点击右键选择“组件定义”如图11-12所示。
 
图11- 12 菜单
（18）弹出“组件定义”面板，点击“ ”添加三个参数，这三个参数是本例第8步骤中使用“set”设置的分别为“标题字”“文本”和“可输入”，如图11-13所示。
技术看板：参数设置
“名称”：可以随便填能表示参数意思就行了。
“变量”：一定要和组件类里“set”方法定义的名称一样。
“值”：用于设置参数的初始值。
“类型”：必须和组件类里“set”方法定义类型一样。
 
图11- 13 组件定义
（19）为组件设置图标，点击“描述”旁边的“”按钮，弹出菜单里有一些软件自带的图标，我们选择自定义，弹出打开窗口选择一个PNG格式的图标最佳大小为16*16，如图11-14所示。
图11-14  自定义图标
（20）现在组件已经做完了，如果还想更完善再做一个实时预览的SWF文件嵌入到组件中起设置预览的作用。制作SWF预览文件有两种方法，第一种是将刚才制作的组件导出成SWC组件包再提起包里的SWF作为动态皮肤。
打开库面板，在“文本条”组件上点击右键选择“导出SWC文件…”选择路径导出成SWC如图11-15所示。
图11-15  导出SWC文件
（21）再修改SWC文件的扩展名改为“文本条.rar”，再将RAR文件解压出来，如图11-16所示。
 
图11-16  解压
（22）解压出来有两个文件“catalog.xml”和“library.swf”，这个“library.swf”就是我们要动态预览SWF文件。将这个SWF嵌入到组件里，在“文本条”的“组件定义”面板上点击“实时预览”的“设置”按钮，弹出“实时预览”对话框选择最后一个单项按钮，再点击“浏览”将这个SWF文件嵌入进来如图11-17所示。
 
图11-17  嵌入SWF
（23）这种方法制作的实时预览和组件本身的效果是一模一样的，也是最快速的预览文件制作方法，如果你想要一个特制的实时预览界面，那么请使用下面的第二种制作方法，借助“LivePreviewParent”类。
（24）新建一个文档名为“textBarFace.fla”，将组件里用到的两个影片剪辑“bar_titleBg”与“bar_textBg”复制过来，如图11-18所示。
 
图11-18  textBarFace
（25）为这个文档编写代码，放在net/face文件夹里名为“textBarFace.as”。
AS3代码
  1. package net.face{   
  2.     import flash.display.*;   
  3.     import flash.text.*;   
  4.     import flash.events.Event  
  5.     import flash.utils.getQualifiedClassName;   
  6.     import fl.livepreview.LivePreviewParent;   
  7.     import flash.external.ExternalInterface;   
  8.     public class textBarFace extends setAPI {   
  9.         private var titleTxt:TextField;   
  10.         private var textTxt:TextField;   
  11.         private var isLivePreview:Boolean;   
  12.         public var textText:String="";   
  13.         public var titleText:String="姓名:";   
  14.         var lp;   
  15.         public function textBarFace() {   
  16.             lp=new LivePreviewParent();   
  17.                
  18.             isLivePreview = (parent != null && getQualifiedClassName(parent) == "fl.livepreview::LivePreviewParent");   
  19.   
  20.             titleTxt = new TextField();   
  21.             titleTxt.selectable=false;   
  22.             titleTxt.textColor=0x333333;   
  23.             titleTxt.autoSize=TextFieldAutoSize.LEFT;   
  24.             addChild(titleTxt);   
  25.   
  26.             textTxt = new TextField();   
  27.             textTxt.autoSize=TextFieldAutoSize.LEFT;   
  28.             addChild(textTxt);   
  29.             //跟组件程序一样，创建两个文本块用来预览用户输入的文字。   
  30.             //this.addEventListener(Event.CHANGE,onUpdate)   
  31.             lp.myInstance=this;   
  32.         }   
  33.         /**  
  34.         *组件中参数设置时触发的函数。  
  35.         *所有参数项当作Object类型传进来，titleText和textText是组件参数设置里取的变量名。  
  36.         */  
  37.         public function onUpdate1(e):void{   
  38.             titleTxt.text=titleText;   
  39.             textTxt.text="abc"  
  40.                
  41.                
  42.         }   
  43.         public function onResize1(wid:Number,hei:Number):void {   
  44.             textTxt.text="123"  
  45.             titleTxt.x=2;   
  46.             titleBg.width=titleTxt.width;   
  47.             textBg.x=titleTxt.width;   
  48.             textTxt.x=textBg.x+2;   
  49.             textBg.width=textTxt.width+4;   
  50.         }   
  51.         /**  
  52.         *当组件被调整大小时触发的函数。  
  53.         */  
  54.     }   
  55. }  
 
（26）可以发布文档了，再回到“textBar.fla”中将发布的SWF嵌入到组件里，在“文本条”组件设置里点击“实时预览”的“设置”按钮，弹出“实时预览”对话框选择最后一个单项按钮，再点击“浏览”将刚才发布的SWF文件嵌进来，如图11-19所示。
 
图11-19  动画