zt Flash V2组件开发
在Flash MX Professional 2004中,开发人员开可以在项目中自己创建新的V2组件。在开始开发V2组件之前,首先要了解MovieClip类、UIObject类和UIComponent类,因为它们是Flash V2组件的基类,所有Flash自带的组件都是它们的直接或间接子类。开发一个组件可以从原先的父类继承,扩展现有的组件类,使被创建的组件在父类的基础上进一步扩展。另外,也可以创建一个不带父类的组件,以实现一些其它的功能。在这里将重点讨论如何扩展现有的组件类。扩展一个现有组件类,通常包括以下几个步骤:.....................
zt Flash V2组件开发 [2005-3-22]
在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")]
//指明该类从UIComponent继承
class T_T extends UIComponent
{
//在编辑环境中已经创建两个输入文本(Input Text),并在类中声名其引用。
var T1:TextField;
var T2:TextField;
//定义构造函数
function T_T()
{
//在构造函数中发布T1的change事件
T1.onChanged=function()
{ //创建一个事件对象,存放与事件相关的信息
var eventObj = new Object();
//定义事件类型的名称
eventObj.type = "PP";
//指明事件广播(发生)的对象
eventObj.target = _parent;
//把事件作为组件的事件发布
_parent.dispatchEvent(eventObj);
}
//在构造函数中发布T2的change事件
T2.onChanged=function()
{
var eventObj = new Object();
eventObj.type = "UU";
eventObj.target =_parent;
_parent.dispatchEvent(eventObj);
}
}
}
在以上代码中,先用元数据声明了组件的两个事件UU和PP,然后又在组件类的构造函数中定义T1和T2的change事件,并在它们的change事件中用_parent.dispatchEvent(eventObj);语句把chang事件发布为组件事件。dispatchEvent()方法需要一个Object类型的事件对象作为参数,该对象中保存了与事件相关的信息:target指明事件广播(发生)的对象;type定义了事件类型的名称——也可以认为是事件名称。在事件脚本中使用如下代码就可以对事件做出响应,其使用方法与一般的事件处理方法一致:
//对组件的PP事件做出响应
on(PP)
{ trace("PP"); }
//对组件的UU事件做出响应
on(UU)
{ trace("UU"); }
组件的属性的改变也可以作为事件发布,例如:
private var Tm:String;
//在setter中发布组件的事件
public function set TTm(val:String)
{
Tm=val;
var eventObj = new Object();
eventObj.type = "KK";
eventObj.target =this;
this.dispatchEvent(eventObj);
}
当然,还要用Event元数据为组件声明事件。但事实上,没有Event元数据声明的事件组件同样可做出响应。Event元数据声明似乎仅仅是多了一个代码提示而已。所以元数据只是为组件提供了一个更加友好的用户接口,使开发人员更加容易得使用组件。
在发布组件之前,还可以为组定制一个图标。图标大小要求为 18 x 18 像素,并保存为 PNG 格式。它的 Alpha 透明度必须是8位,左上角的像素要求是透明的,以支持遮罩。另外还需要在组件类文件中定义添加元数据声明:
[IconFile("component_name.png")]
该声明和事件声明一样,必须放在类定义之前,使该声明作用到组件类。最后将该图像保存到到FLA文件所在的同一目录中。在导出 SWC 文件时,Flash将在自动包含该图像。
当组件定义完整,测试通过后,就可以发布组件供其他开发人员使用。Flash MX 2004 将组件导出为组件包(SWC 文件)。在发布组件时,只需向其他开发者提供 SWC文件就可以了。此文件包含与组件相关的所有代码、SWF 文件、图像和元数据,因此其他开发者可以方便地将它放到自己的 Flash开发环境中。
这里对Flash V2组件开发做了初步的讨论。在具体的开发时,应根据组件的功能特性非常细致地刻画组件的属性、事件和方法,声明元数据定义良好的用户接口。如果该组件是一个可视的组件还需要为组件制作组件界面的图形元素。
在Flash MX Professional 2004中,开发人员开可以在项目中自己创建新的V2组件。在开始开发V2组件之前,首先要了解MovieClip类、UIObject类和UIComponent类,因为它们是Flash V2组件的基类,所有Flash自带的组件都是它们的直接或间接子类。开发一个组件可以从原先的父类继承,扩展现有的组件类,使被创建的组件在父类的基础上进一步扩展。另外,也可以创建一个不带父类的组件,以实现一些其它的功能。在这里将重点讨论如何扩展现有的组件类。扩展一个现有组件类,通常包括以下几个步骤:.....................
zt Flash V2组件开发 [2005-3-22]
在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")]
//指明该类从UIComponent继承
class T_T extends UIComponent
{
//在编辑环境中已经创建两个输入文本(Input Text),并在类中声名其引用。
var T1:TextField;
var T2:TextField;
//定义构造函数
function T_T()
{
//在构造函数中发布T1的change事件
T1.onChanged=function()
{ //创建一个事件对象,存放与事件相关的信息
var eventObj = new Object();
//定义事件类型的名称
eventObj.type = "PP";
//指明事件广播(发生)的对象
eventObj.target = _parent;
//把事件作为组件的事件发布
_parent.dispatchEvent(eventObj);
}
//在构造函数中发布T2的change事件
T2.onChanged=function()
{
var eventObj = new Object();
eventObj.type = "UU";
eventObj.target =_parent;
_parent.dispatchEvent(eventObj);
}
}
}
在以上代码中,先用元数据声明了组件的两个事件UU和PP,然后又在组件类的构造函数中定义T1和T2的change事件,并在它们的change事件中用_parent.dispatchEvent(eventObj);语句把chang事件发布为组件事件。dispatchEvent()方法需要一个Object类型的事件对象作为参数,该对象中保存了与事件相关的信息:target指明事件广播(发生)的对象;type定义了事件类型的名称——也可以认为是事件名称。在事件脚本中使用如下代码就可以对事件做出响应,其使用方法与一般的事件处理方法一致:
//对组件的PP事件做出响应
on(PP)
{ trace("PP"); }
//对组件的UU事件做出响应
on(UU)
{ trace("UU"); }
组件的属性的改变也可以作为事件发布,例如:
private var Tm:String;
//在setter中发布组件的事件
public function set TTm(val:String)
{
Tm=val;
var eventObj = new Object();
eventObj.type = "KK";
eventObj.target =this;
this.dispatchEvent(eventObj);
}
当然,还要用Event元数据为组件声明事件。但事实上,没有Event元数据声明的事件组件同样可做出响应。Event元数据声明似乎仅仅是多了一个代码提示而已。所以元数据只是为组件提供了一个更加友好的用户接口,使开发人员更加容易得使用组件。
在发布组件之前,还可以为组定制一个图标。图标大小要求为 18 x 18 像素,并保存为 PNG 格式。它的 Alpha 透明度必须是8位,左上角的像素要求是透明的,以支持遮罩。另外还需要在组件类文件中定义添加元数据声明:
[IconFile("component_name.png")]
该声明和事件声明一样,必须放在类定义之前,使该声明作用到组件类。最后将该图像保存到到FLA文件所在的同一目录中。在导出 SWC 文件时,Flash将在自动包含该图像。
当组件定义完整,测试通过后,就可以发布组件供其他开发人员使用。Flash MX 2004 将组件导出为组件包(SWC 文件)。在发布组件时,只需向其他开发者提供 SWC文件就可以了。此文件包含与组件相关的所有代码、SWF 文件、图像和元数据,因此其他开发者可以方便地将它放到自己的 Flash开发环境中。
这里对Flash V2组件开发做了初步的讨论。在具体的开发时,应根据组件的功能特性非常细致地刻画组件的属性、事件和方法,声明元数据定义良好的用户接口。如果该组件是一个可视的组件还需要为组件制作组件界面的图形元素。
回复Comments
作者:
{commentrecontent}