分享
 
 
 

Flash 组件应用与开发详细讲解

王朝other·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

组件是带有参数的电影剪辑,这些参数可以用来修改组件的外观和行为。每个组件都有预定义的参数,并且它们可以被设置。每个组件还有一组属于自己的方法、属性和事件,它们被称为应用程序程接口(Application Programming Interface,API)。使用组件,可以使程序设计与软件界面设计分离,提高代码的可复用性。Flash MX 2004 或 Flash MX Professional 2004 中包含的组件不是 FLA 文件,而是 SWC 文件。SWC 是用于组件的 Macromedia 文件格式。库项目中的电影剪辑可以被预编译成swf文件。这样可以缩短影片测试和发布的执行时间。将 SWC 文件拷贝到 First Run\Components目录后,该组件便会出现在“组件”面板中。

Flash 自带的组件都位于mx.controls包中。组件直接或间接继承于UIComponent类,UIComponent类对UIObject类做了扩展,而UIObject类又是MovieClip类的子类。MovieClip类不属于任何包,定义文件位于FlashInstalDir\en\First Run\Classes目录。UIComponent类和UIObject类都位于mx.core包中,定义文件位于FlashInstalDir\en\First Run\Classes\mx\core目录。

UIObject类对MovieClip类进行封装,所有Flash V2组件都可以共享它的方法、属性和事件。UIObject类使组件在样式、事件和缩放比例调整上得到了实现。它提供了动态创建删除组件的方法:

·createObject方法:直接调用attachMovie函数,返回一个MovieClip类型的引用。

·createClassObject方法:调用createObject方法,创建一个指定类的组件实例,并返回所创建的组件的引用。

·createEmptyObject方法:创建一个空的UIObject实例。

·destroyObject方法:使用delete语句删除已经创建的组件实例。

UIObject还封装了其它的一些方法,包括:

·redraw方法:在当前帧重新绘制组件。

·invalidate方法:标记组件,使之在下一个帧间隔重新绘制。

·move方法:把组件移动到指定位置。

·setSize方法:设置组件大小。

·setSkin方法:设置组件皮肤。

·getStyle方法:获取样式信息。

UIObject类的属性除了scaleX和scaleY外,其它都是只读属性,使用时需要注意。所以如果要在运行时调整组件外观,就必须使用UIObject类的方法。对于只读属性的赋值是无效的,即使是对非只读属性的赋值,有时也会造成组件在外观显示上的差错。UIObject类还定义了一系列的事件,包括加载事件(load)、卸载事件(unload)、移动事件(move)、重绘事件(draw)和大小调整事件(resize)。

利用UIObject类的组件创建方法,可以在运行时创建组件实例。

UIComponent类从UIObject类继承,它并不是一个可视的组件。和UIObject类一样,所有Flash V2组件都可以共享它的方法和属性。它实现了组件的焦点获取、键盘输入,组件的禁用和启用以及组件的按布局调整自动大小。

UIComponent类的主要方法有:

·getFocus方法:利用焦点管理器(Selection)返回一个当前获取焦点的对象的引用。

·setFocus方法:使组件获取焦点。

UIComponent类的enabled属性指定组件实例是否可用;tabIndex属性指定组件的焦点获取顺序。UIComponent类还定义一系列焦点和键盘事件:焦点获取事件(focusIn),焦点转移事件(focusOut)、键盘按下事件(keyDown)和键盘释放事件(keyUp)。

在Flash MX 2004和 Flash MX Professional 2004自带了一套组件称为Flash V2组件,它是从Flash MX的V1组件升级而来的,V1组件和V2组件尽量不要一起使用以免发生一些错误。V2组件支持实时预览,使开发者在编辑状态下就能看到组件的外观效果。开发者可以自行设置是否需要实时预览和实时预览的模式,以节省计算机资源。在ControlàEnable Live Preview菜单设置是否使用实时预览,在ViewàPriview Mode菜单选择预览模式。组件实质上是一些被编译好的电影剪辑,其格式为SWC。SWC文件类似与Zip文件,可以使用一般的解压缩程序进行解压查看其内容。电影剪辑可以在编辑环境中直接发布为组件,也可以直接编译存储为swc格式的组件文件,便于其他开发者使用。同样,开发者也可以从外部导入组件。

使用组件,必须把组件面板中所需要的组件拖到舞台(Stage),使组件出现在库面板。这样组件就可以象普通的库项目一样被使用。使用脚本可以动态的创建组件实例,运行时创建组件可以有三个方法:createObject()、creatClassObject()和attachMovie()。attachMovie()是MovieClip类的方法,createObject()和creatClassObject()是UIObject类方法,但事实上它们都是对attachMovie()的直接或间接调用。

组件被添加后可以在属性或参数面板中直接设置组件的参数。另外还要为组件定义事件,最简单的方法是使用on(eventName)进行定义。另外还可以使用侦听器和事件处理函数等定义组件事件的处理方法。组件的事件定义比较灵活,使用何种方式定义取决与个人的习惯与偏好。当事件发生时,组件会广播一个Object类型的事件参数,该参数中包括了事件发生对象和事件类型的信息。另外,使用深度管理器(DepthManager)可以对组件进行深度管理。

Flash组件最大的特点是开发者可以自定义组件,尤其是界面元素的自定义,使其更具有吸引力。V2组件有它自己的一套默认界面方案,称为主题(Theme)。主题包括两个方面:样式(Style)和外观(Skin)。UIObject类的setStyle()和getStyle()方法可以获取和设置组件的样式。样式的设置比较简单,主要有以下三种方式:

·直接设置属性:

T.color=0xff5567;

·使用简单的setStyle()名值对方法自定义样式:

instanceName.setStyle("property", value);

·把样式对象与setStyle()方法结合使用来自定义样式:

//创建一个样式对象

var styleObj = new mx.styles.CSSStyleDeclaration;

//刻画样式细节

//……

styleObj.fontSize = 18;

//把样式应用到组件实例

b.setStyle("styleName", styleObj);

样式的级别包括4个层次:全局样式,应用于所有组件;组件类单独的默认样式,应用于某一类的组件;自定义样式;直接设置组件实例的属性。对于不同级别的样式Flash按照一定的顺序分别把这些样式应用到组件。

首先,Flash 查找组件实例上的样式属性,如果实例上没有直接设置样式,Flash 将查看实例的styleName 属性,确定是否向它分配了样式声明。如果 styleName 属性没有被分配样式声明,Flash 将查找默认类样式声明上的属性。如果没有类样式声明,并且属性没有继承它的值,则将检查 _global 样式声明。如果属性未在 _global 样式声明中定义,则该属性为 undefined。

另外,如果没有类样式声明,但属性确实继承了它的值,Flash 将查找该实例父级上的属性。如果属性未在父实例上定义,Flash 将检查父实例的 styleName 属性;如果未定义该属性,Flash 将继续查看父实例,直到 _global 级别。如果属性未在 _global 样式声明中定义,则该属性为undefined。

另一方面,为了更好的使用组件,还需要修改或重新定义组件外观。Flash V2的外观定义文件位于FlashInstralDir\en\First Run\ComponentFLA文件夹下。在修改外观时,需要把原始的外观定义文件作为外部库导入(FileàOpen External Library),并把外部库中的外观定义库项目拖到当前文档的库中,外观库项目通常都是电影剪辑(MovieClip)。每一个组件外观定义库项目文件夹中都包含一个States文件夹,其中定义了组件在不同状态下的外观,每一个状态都指定了一个链接名(linkageName)作为脚本引用,如果修改了这个名称,则会使组件在该状态下的外观加载发生错误。在组件的类文件中,每一个状态都使用一个字符串属性指定其外观库项目的链接名,如果要重新定义组件某一状态下的外观,只要在脚本中修改这个字符串属性的值就可以了,当然首先必须存在可链的新的外观库项目。

了解了这样一个组件外观机制以后,组件外观的修改就变的非常简单。其关键就是修改或重新定义一组新的外观库项目并指定其链接名,然后修改组件类文件中指定组件外观的属性。开发者可以在组件实例的初始化事件(initialize)中修改组件实例的外观。修组件所有实例外观的方法比较多,例如_root的第一帧使用ClassName. prototype.stateName=value语句,该语句也可以直接在#initclip和#endinitclip代码块中使用;另外还可以使用类继承的方式,在组件初始化时就为组件外观链接属性指定新的值,这里也需要用到#initclip、#endinitclip代码块。#initclip和#endinitclip是Flash的编译器命令,作为初始化代码块的开始标记和结束标记。只要符号(symbol)被定义,那么初始化代码就被先于第一帧执行,而且紧执行一次。所以在这个代码块中,可以为整个组件类指定不同状态下的外观。

在Flash MX Professional 2004中,开发人员开可以在项目中自己创建新的V2组件。在开始开发V2组件之前,首先要了解MovieClip类、UIObject类和UIComponent类,因为它们是Flash V2组件的基类,所有Flash自带的组件都是它们的直接或间接子类。开发一个组件可以从原先的父类继承,扩展现有的组件类,使被创建的组件在父类的基础上进一步扩展。另外,也可以创建一个不带父类的组件,以实现一些其它的功能。在这里将重点讨论如何扩展现有的组件类。扩展一个现有组件类,通常包括以下几个步骤:

1、组件首先作为一个电影剪辑(MovieClip)被创建,在该电影剪辑中创建两个图层,分别用于组件界面元素和脚本。然后在库的下拉菜单中选择Component Defination,在该对话框中的AS2.0 Class中输入该组件所要关联的类的完全限定名。当界面元素定义完成以后,就可以在外部文件中创建组件的属性、事件和方法,当然,组件的界面元素也可以在类中使用代码动态创建。

2、在定义组件类文件时,首先必须导入所需要的类,前面已经说过,MovieClip类、UIObject类和UIComponent类是V2组件的基类,所以如果当前创建的组件是从V2组件的任意组件扩展,那么就必须了解这三个基类,和其下的相关组件类。关于组件的特性可以查看Macromedia公司发布的组件字典,也可以直接在FlashInstalDir\en\First Run\Classes目录查看类文件代码。

3、确定组件所要扩展的类以后,就要为组件类编写构造函数(Constructor)。一般情况下,构造函数建议为空,这样才能用对象的属性接口来定义对象属性。此外,根据初始化调用顺序的不同,有时在构造函数中设置属性会导致覆盖默认值。

4、接下来要做的是添加组件的版本信息,如果当前开发的组件是作为组件包的一部分,那么可以把版本信息放到另外一个外部文件中。在定义版本信息时,可以继承UIObject类的静态字符串属性version。另外还需要定义三个比较重要的属性:symbolName,symbolOwner和className;他们都是从组件基类继承的。symbolName定义为静态的字符串变量,用于指定组件符号的名称;symbolOwner定义为静态的Object类型,是该类的一个完全限定名,它将在createClassObject() 方法的内部调用中被使用;className定义了组件类名称。

5、当这些都完成以后,就要开始定义组件功能相关的属性和方法。在属性和方法定义时,比较好的做法是确定每一个属性和方法的访问特性,使组件为用户提供一个良好的应用程序接口(API)。所以在定义属性和方法时要使用private和public来声明属性的可访问性,并使用setter和getter函数来设置和获取属性的值。这样就更好的地实现了组件的封装,使用户无须了解组件的内部细节。

所有组件必须实现两个核心方法:始化方法和大小调整。如果不在自定义组件的类文件中覆盖两个方法,Flash Player 可能会产生错误。Flash 在创建类时调用初始化方法。初始化方法应该调用父类的初始化方法,因为只有在调用此方法之后,才能正确设置width、height 和和其它的影片剪辑参数。

function init(Void):Void

{

// 调用父类的初始化方法

super.init();

//在这里添加与本组件相关的初始化代码

}

大小调整的方法也与初始化方法类似:

function size(Void):Void

{

super.size();

//在这里添加与本组件相关的大小调整代码

}

6、为了让属性在开发面板中可见,还必须为属性声明相关的元数据(Metadata)。元数据标记可以定义组件属性、数据绑定属性和事件。Flash 可以解释这些语句并相应地更新开发环境。元数据与类声明或单个的数据字段相关。元数据语句绑定到脚本的下一行。例如,在定义组件属性时,在属性声明的前一行添加元数据标记。在定义组件事件时,在类定义之外添加元数据标记,以便将事件绑定到整个类。对属性而言,有两个比较重要的元数据:Inspectable和InspectableList。

Inspectable元数据定义了在“组件检查器(Component Inspector)”面板中向用户显示的组件的属性。语法如下:

[Inspectable( value_type=value [,attribute=value,...] ) ]

property_declaration name:type;

Inspectable元数据还包括若干元数据标记:

·name:类型为String(可选),属性在开发面板中的显示名称。

·type:类型为String(可选)指定属性的类型。如果省略,则使用属性的类型。以下下是可接受的值: Array、 Object、List、String、Number、Boolean、Font Name、Color。

·defaultValue:类型可以是String或Number(必需)。指定属性的默认值。

·enumeration:类型为String(可选)。指定以逗号分隔的属性合法值列表。

·category:类型为String(可选)。将属性划分到属性检查器中的某个特定子类别中。

InspectableList 元数据关键字用于确切地指定属性检查器中应显示可检查参数的哪个子集。可以将 InspectableList 与 Inspectable 组合使用,这样即可隐藏子类组件的继承属性。如果不给组件的类添加 InspectableList 元数据关键字,所有可检查的参数(包括组件父类的可检查参数)都会显示在属性检查器中。其的语法如下:

[InspectableList("attribute1"[,...])]

// class definition

InspectableList 关键字必须紧挨着类定义且在它之前,因为它应用于整个类。

7、定义组件的事件,首先要使用Event元数据关键字声明事件。Event 元数据关键字用于定义组件事件。其语法如下:

[Event("event_name")]

在类文件中必须把 Event 语句添加到类定义之外,以便将它们绑定到类,而不绑定到类的特定成员。首先组件类会继承基类事件。如果当前定义组件的基类是UIComponent,那么该组件中已经包括了MovieClip类、UIObject类和UIComponent类的28个事件。但事实上,这28个事件并不是都可以用的。其原因很简单,因为组件可以有它的组成结构,组件内部可能还有组件或是其它的元件实例。组件要为用户提供一个统一的接口,就必须抽取其内部结构的某些事件并把它们定义为组件的事件,这是一种基于组件内部组成结构的事件。比如说组件包括两个文本框T1和T2,这时可以根据组件的功能要求把T1的change事件发布为组件的PP事件,而把T2的change事件发布为组件的UU事件,当然关于组件事件的名称可以由组件开发人员自己定义。

那么究竟如何为组件定义一个新的事件呢?对于上面的那个例子,可以做如下定义:

//导入类

import mx.core.UIComponent;

//用元数据声明组件事件

[Event("PP")]

[Event("UU"

[1] [2] 下一页

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有