快精灵印艺坊 您身边的文印专家
广州名片 深圳名片 会员卡 贵宾卡 印刷 设计教程
产品展示 在线订购 会员中心 产品模板 设计指南 在线编辑
 首页 名片设计   CorelDRAW   Illustrator   AuotoCAD   Painter   其他软件   Photoshop   Fireworks   Flash  

 » 彩色名片
 » PVC卡
 » 彩色磁性卡
 » 彩页/画册
 » 个性印务
 » 彩色不干胶
 » 明信片
   » 明信片
   » 彩色书签
   » 门挂
 » 其他产品与服务
   » 创业锦囊
   » 办公用品
     » 信封、信纸
     » 便签纸、斜面纸砖
     » 无碳复印纸
   » 海报
   » 大篇幅印刷
     » KT板
     » 海报
     » 横幅

Flash 组件应用与开发具体讲解

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

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

  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的外观定义文件位于FlashInstralDirenFirst RunComponentFLA文件夹下。在修改外观时,需要把原始的外观定义文件作为外部库导入(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公司发布的组件字典,也可以直接在FlashInstalDirenFirst RunClasses目录查看类文件代码。

  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教程
上一教程: Flash动画的“遮丑”研究
下一教程: 如何做好一个多人配合的flash项目

您可以阅读与"Flash 组件应用与开发具体讲解"相关的教程:
· Flash将进化为应用软件开发工具
· Flash MX Professional 2004 V2组件的开发
· Flash MX 新特性详解(五)应用开发和发布与重放
· Flash游戏开发系列一:游戏中的敌人(7)
· Flash AS学习:mx.utils包之Delegate类应用
    微笑服务 优质保证 索取样品