进入Flash MX组件时代之五创建用户组件 -pc6资讯

您的位置：首页 → 网页设计 → Flash → 进入Flash MX组件时代之五创建用户组件

进入Flash MX组件时代之五创建用户组件 时间：2004/11/7 2:19:00来源：本站整理作者：蓝点我要评论(0)

　　通过上节对FlahsMX组件的衍生过程的熟悉，相信我们对于创建属于自己的用户组件会有一定的前期认识。当然，上节的内容只是奠定组件编写的总体思维方式，而真正的组件创作过程并没展开。在本章内我们将带领大家一起探索用户组件创建的神秘历程。

　　1 创建组件相关的重要指令

　　组件的创建绝不同于构建一个简单的功能函数，也不同于制作一个相似功能的Smart Clip，由于FlashMX Components的创建引入了许许多多新的全新概念，因而也随之引入了一些全新的赋予新的作用与含义的函数与方法等操作指令，如自定义组件的函数#initclip #endinitclip和方法Object.registerClass()、addProperty()。由此，我们在正式邀请大家编写用户组件之前想请大家再一起来了解与熟悉一下这些关键的指令。

　　#initclip

　　适用版本：Flash Player 6.

　　语法：#initclip order

　　参数：order 整数，指定#initclip代码块的执行次序，可选。

　　说明：

　　该指令表示一组Component初始化动作的开始。在同时初始化多个MC时，可以使用参数order来指定初始化优先次序。Component初始化动作在相应MC组件已定义时才执行。若该MC属于输出影片类型，Component初始化动作就在该SWF文件第一桢上的动作之前执行。否则，Component初始化动作就在包含相关MC组件第一个实例的那一桢上的动作执行之前执行。

　　影片播放中component初始化动作仅仅执行一次，用于一次性初始化，比如类的定义与注册。

　　#endinitclip

　　适用版本：Flash Player 6.

　　语法：#endinitclip

　　参数：无

　　说明：

　　与#initclip一起配对使用，组件的初始化过程以#initclip开始以#endinitclips出现为结束。

　　Object.registerClass

　　适用版本：Flash Player 6

　　用法：

　　Object.registerClass(symbolID, theClass)

　　参数：

　　symbolID：影片剪辑元件的链接标识符，或动作脚本类的字符串标识符。

　　theClass：指向动作脚本类的构造函数的引用，或为 null，则不注册元件。

　　返回值：

　　如果类注册成功，则返回值为 true；否则，返回 false。　

　　说明：

　　方法：将影片剪辑元件与动作脚本对象类相关联。如果元件不存在，则Flash在字符串标识符和对象类之间创建关联关系。

　　时间轴放置指定影片剪辑元件的实例时，该实例注册到由theClass参数指定的类，而不是注册到MovieClip类。

　　使用attachMovie或duplicateMovieClip方法创建指定影片剪辑元件的实例时，该实例注册到由stheClass参数指定的类，而不是注册到MovieClip类。

　　如果theClass为null，则sObject.registerClass 删除任何与指定影片剪辑元件或类标识符相关联的动作脚本类定义。对于影片剪辑元件，该影片剪辑的任何现有实例保持不变，但此元件的新实例将与默认类MovieClip 相关联。

　　如果元件已经注册到某类，则Object.registerClass方法将使用新的注册替换现有的注册。

　　影片剪辑实例被时间轴放置或通过attachMovie或duplicateMovieClip创建时，动作脚本使用指向此对象的关键字this调用适当类的构造函数。此构造函数在调用时不带有参数。

　　如果使用Object.registerClass方法将影片剪辑注册到动作脚本类而不是MovieClip类，则该影片剪辑元件不继承内置MovieClip类的方法、属性和事件，除非将MovieClip类包括在新类的原型链中。下面的代码新建一个名为theClass的ActionScript类，它继承了MovieClip类的属性：

　　theClass.prototype = new MovieClip();

　　Object.addProperty

　　适用版本：Flash Player 6.

　　使用方法：myObject.addProperty( prop, getFunc, setFunc )

　　参数：prop

　　创建的属性名称

　　getFunc

　　此参数是一个函数对象，而此函数起调用获取属性值的功能

　　setFunc

　　此参数也是一个函数对象，而与getFunc的参数函数相对，此处的函数功能是设置属性的功能。假若此参数设置为null，那么属性将被设置为只读。

　　返回值：

　　返回一个布尔值，如果一个属性被创建则返回True，反之则为False。

　　说明：

　　方法：创建一个获得/设置的属性。当Flash读取获得/设置属性，它将调用相应的获取函数并且将返回值传递为一个属性值，而当Flash在写一个获得/设置属值的时候，它将调用相应的设置函数，并且将它的新值作为一个参数来应用。如果一个被命名的属性已经存在，那么新的属性将覆盖原来旧的属性。

　　获取函数是一个无参数的函数，它所返回的值可以是任何的类型，它返回的值将作为属性的当前值来对待。

　　设置函数只附带了一个参数，而次参数是将作为新的属性值的。举个实例来说明，如果一个属性值x已经被x=1所声明，那么设置函数将认识此参数并将它作为一个数字类型对待，而设置函数返回的值将被忽略。

　　你能增加一个获取/设置属性到原型对象中。如果你添加了一个获取/设置属性到一个原型对象，那么场景中所有继承于该原型对象的对象将继承这个获取/设置的属性。因而，这就造就了一种可能，相信我们能够添加获取/设置属到到一个特定的区域中，即该原型函数，而它将会传播于场景中该实化的所有的类（就像添加事件到该原型对象一样）。如果一个获取/设置函数中一个继承的原型对象中调用获取/设置属性，那么参数传递给获取/设置函数的将是最先的对象参数，而不是继承的原型对象的。如果调用错误，addProperty对象将会导致一个错误。

　　setInterval

　　适用版本：

　　Flash Player 6.

　　使用方法：

　　setInterval( function,interval[,arg1, arg2, ...,argn] )

　　setInterval(object, methodName,interval[,arg1,arg2, ..., argn] )

　　参数：

　　function

　　命名或指向一个匿名函数的函数

　　object

　　来源于Object对象的对象

　　methodName

　　调用对象参数的事件名称

　　interval

　　调用函数或事件名称的参数之间相隔的毫秒数。

　　arg1, arg2, ..., argn

　　可选参数用以传递函数或事件的参数。

　　返回值：

　　一个时间间隔标识标，你能通过clearInterval命令用以清除该时间间隔。

　　说明：

　　命令：

　　调用一个函数或事件或对象，当影片运行时定时的触发。你能运用时间间隔函数从数据库中来保存该变量或是更新时间显示。

　　如果interval小于影片帧的播放率（如：10帧每秒(fps)等于100毫秒），那么interval函数就很有可能将interval关闭。你必须用updateAfterEvent函数确定该屏幕播放有足够充分时间。如果interval大于影片帧的播放率，那么interval函数只是在每个帧的前面影片部分调用以使得每次屏幕刷新之时保持最小的影响。

　　上述第一种setInterval函数的语法示例在Action面板中是以正常模式为默认值的，而第二种语法示例，你必须运用专家Action面板进行操作。

　　clearInterval

　　适用版本：

　　Flash Player 6.

　　使用方法：

　　clearInterval( intervalID )

　　参数：

　　intervalID

　　通过setInterval函数返回的一个标识标。

　　返回值：无

　　说明：

　　清除一个setInterval函数调用。

　　Key.addListener

　　适用版本：Flash Player 6.

　　使用方法：Key.addListener (newListener)

　　参数：newListener

　　当按下释放键盘控制后返回的一个对象事件上。

　　返回值：无

　　说明：

　　事件：注册一个对象用以接受键盘按下释放后的反应。当一个键盘按钮按下或是释放，不管是否有输入焦点，所有用addListener注册过的onKeyDown事件或是onKeyUp事件都将会被触发。多个对象也能监听键盘控制。如果监听者newListener早被注册过，那么将不会产生任何反映。

　　instanceof

　　应用版本：Flash Player 6.

　　使用方法：object instanceof class

　　参数：object

　　一个ActionScript对象

　　class

　　ActionScript构造器函数类型，如String或是Date等类型。

　　返回值：

　　如果一个对象是指定的某种场景类，instanceof返回值为true，否则返回值为false。

　　说明：

　　操作：确定一个对象是否属于一种特殊的类，测试该对象为某种类型。

　　Instanceof操作不能将原始类型转化为封装类型，例如，下面的代码将返回true值：

　　new String("Hello") instanceof String

　　而下面的代码将返回false值：

　　"Hello" instanceof String

　　现在我们再对上述的这些指令作以简单综述：

　　#initclip与#endinitclip是一对成对出现的指令，主要功能是在影片关键帧等内容未曾载入调用前对组件进行一定的初始化定义描述及操作；

　　Object.addProperty是添加一个对象的属性，这有便于我们为用户组件创建一些属于自己的对象属性。

　　SetInterval与clearInterval基本也是成对出现的指令，如果对于这两个指令在刚开始阶段比较难以理解，或许大家可以把它们与VB或是Delphi中的timer控件的作用作以类比，其它说到底，它们起到了一个“定时触发”的时间控制作用而已。

　　addListener对象监听的指令，我们不仅可以监听键盘对象，还可以监听鼠标、场景、文本框等等对象的内容，由此我们在用户组件的创作过程中此指令就可以大大改善用户体验，增加组件与用户之间的沟通。

　　Instanceof判断一个对象是否属于某一种特定的类型。

　　2 构建自己第一个用户组件

　　相信各位对前面利用“功能函数”创建的一个MovieClip的提示信息实例仍记忆犹新，而到了现在我们对组件的编程基本原理已经有了一定的认识的基础上，那么对于类似的问题，我们如用FlashMX组件的方式又该作以如何思考呢？那就请诸位跟随我们再次进行一次提炼精华的操作过程吧。

　　类似于我们已经作以详细介绍的FlashMX内置组件及扩展使用一般，我们欲求此次制作的组件也能从Library中直接拖放至场景中，并且要求该组件能够自动粘附到相应的场景对象上，如果场景对象是MovieClip，那么我们可以通过Parameters面板进行样式选择，并通过输入相应的提示信息以后进行影片测试时便可达到我们欲求的理想效果。

　　从上述的制作要求中我们大概归纳了几点精华：

　　其一，具有组件的外观样式；

　　其二，粘附场景对象，并判断是否为MovieClip类型的场景对象内容；

　　其三，样式的选择，可以按照所需选择指定的不同的样式，从而让提示信息在不同的情况要求下显示不同的样式外观；

　　其四，提示信息显示，当然，这些提示信息的样式得根据第三部分内容的更改而改变。

　　整理完毕上述内容，我们就可以着手开始落实我们第一个简单的自定义用户组件ToolTip了。

　　如同制作Smart Clip一般，我们在第一步定义了一个MovieClip（如图64所示），当然还会为它添置一些参数以备后用（如图65所示）。

图64　ToolTip的MovieClip

图65　ToolTip(MovieClip)的Component Definition参数设置

　　根据需求分析所得，我们可根据图65所示进行参数设置，在此我们设置了三个Style，三个Style Text及一个Target Name，它们分别针对的内容是三种不同的样式格式，针对不同样式格式的提示内容及将ToolTip锁定的场景对象范围。

　　当我们设置完参数定义后，返回Library查看类库内容，原本ToolTip

的MovieClip图标样式就已被更换成

的组件图标显示样式了，这主要是为了更容易区别普通MovieClip与组件内容。

　　然后我们在Library中建立一个文件包，并在该文件包内创建三个MovieClip（提示信息外观样式MovieClip），它们分别为styleToolTip_1、styleToolTip_2、styleToolTip_3，如下图66所示。

图66　StyleToolTip(MovieClip)样式

　　其实三种样式的制作过程都基本雷同，我们在此只对styleToolTip_1的场景内容稍作分析。如下图67所示，在样式一中我们建立了三个层次的内容，TxtField层包括了一个文本框（以后将在此文本框内显示提示信息），TipBox层是样式外框显示样式，而shdw层是样式外框显示样式的阴影效果。其实场景中物件并不烦多，而样式二与样式三与样式一的制作过程也是一致，只是在TxtField显示的提示信息量及样式外框显示样式的样式上略有区别而已。

图67 StyleToolTip_1场景内容

图68 样式二及样式三的场景内容

　　在这里我们需要进行属性设置的是txtField层中的文本内容，它的设置如下图69所示，我们将它设置为Dynamic Text类型，而将其变量Var定义为style（注意：前面已经有所叙述，样式二与样式三的内容只是文本提示信息量上的区别，而Var定义的值三个样式中的文本框需均为style）。

图69 提示信息文本框属性定义

　　做好了前期准备工作我们再来查看一下主角的内容情况，如下图70所示，我们的ToolTip(MovieClip)的场景内容包括了二层内容，一层为ActionSctip，而另一层则是Icon（注：其实该层内容的存在主要是为了对该ToolTip组件有一个外观样式显示而已，在该组件中假若去除此层Icon的内容并不会对最终的影片测试效果产生任何影响，最多只是在设计阶段组件的样式显示会有所不同而已）。

图70 ToolTip场景内容

　　到此我们已经基本完成了该组件实例的制作过程，我们只运用了与“功能函数”差不多的代码行就解决雷同的问题，而一个则是面向开发人员用户，另一个则将会面对普通设计级用户群。

　　“实践是检验真理的唯一标准”，为了验证该组件是否能够正常运行，我们将用刚才编写完毕的组件制作一实例，查看它的运行效果以便作最终判断。

　　由于我们在代码中已用this.myTarget instanceof MovieClip作以判断所需的提示信息对象应该是MovieClip类型，因而我们创建了一个内容为正圆的MovieClip（myTextMovieClip）。

　　我们拖动myTestMovieClip 到场景中，并复制2个该对象（由于我们制作了三种提示信息样式，因而我们将制作三种不同的提示信息样式显示），如下图73所示：

图73 制作自定义组件ToolTip实例的MovieClip准备

　　我们先点击选中Tools工具栏中的

磁性工具，然后从Library中拖动ToolTip组件到场景中的TestMovieClip之上，如图74所示：

图74 拖动ToolTip组件到myTestMovieClip上

　　由于我们选中了磁性工具，因而我们在放置ToolTip组件到myTestMovieClip影片上时会有粘缚的功效哦。

　　在此我们可能会回想起前面ToolTip场景的内容，图74中ToolTip已显示为一提示信息样式的图标，而我们曾经提及，如果将ToolTip场景中的那层图标样式删除，对于ToolTip运后最终的效果并不会产生什么不良影响，只会在设计阶段产生稍许不同而已，比较图74与图75查看结果。

图75 删除ToolTip中Icon以后ToolTip在实例运用中样式

　　比较结果十分明显，就直观性来说图74所示样式要比图75直观的多，我们一眼即可辨别那些场景对象是ToolTip，而至于删除Icon层内容以后的ToolTip在运用过程中我们甚至会辨别不清楚那到底是否是ToolTip组件，因而我们前面在ToolTip组件中加入了Icon层并非多余而是十分关键与必要的，这极大的增加了用户体验。

　　组件自动粘缚场景中的MovieClip对象以后，组件的Target Name属性将在原先this.myTarget = this._parent[this._targetInstanceName]; 代码地操作下会自动获取该对象的实体名称。当然，如果我们直接将myTestMovieClip拖放至场景而未对场景中的实体进行实体名定义，则系统会自动按顺序给对象添加上InstanceName_0、InstanceName_1等等，如下图76所示：

图76 ToolTip组件Target Name的自动获取

　　我们选择场景中某一ToolTip组件后再调出对象属性设置面板可查看到Parameters参数面板中除了Target Name外还有Style 1 row、Style 2 row、Style 3 row等参数设置项（Style参数设置项的功能主要是确定提示信息显示的样式类型）。我们可以设定某一样式为True来使该组件运用此样式进行提示信息显示（选择Style 1 row将选择styleToolTip_1类型的提示信息样式，以此类推），不过需注意，我们只能设置这些样式参数中的一项内容为True，不可进行多选（具体原因详见对handleSelected函数相关解释）。

图77 ToolTip组件Style样式设置

　　与Style 1 row等相对应的当然是提示文本内容了，因而我们在Parameters参数面板中还可以查看到Style 1 Text、Style 2 Text、Style 3 Text等参数设置，如下图78所示。

图78 ToolTip组件Text内容设置

　　我们需要注意的是，Text与row应该是成对选择的，由于我们在handleSelected函数中利用遍历的方法进行控制并设置相应的变量，因而在那时我们已经将row与Text构成了成对使用的参数对，由于前面我们已经将Style 1 row参数项设置为True，因而在Text参数设置中我们只能对Style 1 Text参数项进行提示信息文本输入设置，倘若我们尝试将文本设置到其它的文本参数框内，那么最组件的测试效果并不会是我们预期所想的。

　　当我们将上述实例中组件对象的参数设置完毕以后按下Ctrl+Enter进行影片测试，我们就可以查看此番辛苦的杰作了，如下图79及图80所示。