Flash MX引用了我们在VB程序中熟悉的组件概念（功能相似在VB中称为控件），替代和扩展了Fash5中的智能剪辑（SmartClip），在FlashMX中有一个新的组件面板（Component Panel）定制了一些常用的组件 ，比如列表框（listboxes,）滚动条（scrollbars）, 单选按纽（radio buttons）, 复选框（combo boxes）,等等我们在Html文件中常用的功能元件，对于广大的flash开发者来说是一个不错的福音，定制的常用组件不仅减少了开发者的开发时间，提高了工作效率，而且能给flash作品带来统一的工业化的界面。

什么是组件？

　　什么是组件？笔者实在是很难给组件概念下一个全面正确的定义，FlashMX的的组件概念是由flash的智能剪辑延伸而来的，比较各种FlashMX中内建的常用组件，可以归纳以下特点：

• 　拥有某种功能的电影剪辑
• 　有参数变量（属性），改变参数来改变组件的属性
• 　参数改变的情况下，组件的功能不变
• 　能够重复应用和改变组件的外观（skins）

　　flashMX中内建了一些常用的组件，作为广大flash开发者的共有资源，当然你也可以自己创建自己的组件，做为第三方开发者，你也可以共享他人的组件资源，你只要拿来用就可以。为了组件适合自的开发环境，你可以改变组件的一些参数，比如一个拨盘组件（dial Components）

　　你所能拨指针的范围（最大值和最小值）是一个可调的参数。从广义上说，组件是用户化的可ActionScript控制的动画。

　　我们可以用属性监视面板（property inspector）来“监视”组件 只要你选中了场景的组件实体，在属性面板上就显示该组件对应的参数（属性），通过改变这些参数你可以“个性化”你的组件。

实例说明

　　为了演示如何创建一个组件，我们来创建一个简单的等腰三角形状的组件，这个组件包括如下属性：底长，高，填充色以及是否显示填充色布尔值，也可以得到和获得这个组件的一些属性，比如面积。

　　有的朋友可能会问创建一个三角形状的组件有什么用？我们可以用它来做什么？ FlashMX中自带的一些组件都能实现某一功能，比如列表框（listboxes,）可以做一个列表，滚动条（scrollbars）能实现IE浏览器中滚动的功能。我们创建的这个组件笔者现在也不知道可以用来干什么，不过 ,创建这个三角行状的组件的方法是和任何其他组件是相同的，笔者只想通过这个例子来说明自定义组件的原理和方法。

操作步骤

1． 创建一个三角形状电影剪辑

新增一个电影剪辑（Ctrl+F8）画一等腰三角形图形，高和底边宽均为100px，并使图形的中心坐标（电影剪辑舞台的中心点）在底边上的中点重合，这样图形的大小变化就基于底边。

2 定义组件类

　　这是自定义组件的关键，FlashMX新增加了自定义组件的函数#initclip #endinitclip和方法Object.registerClass（），大家可能对这些函数和方法感到陌生 。不过没有关系，我们先来看下面一段代码：

#initclipfunction TriangleClass () {     this.cobj = new Color(this);     this.update();}// Allow TriangleClass to inherit MovieClip propertiesTriangleClass.prototype = new MovieClip();// Update draws the triangle at the current base and height values.TriangleClass.prototype.update = function () {     if (this.applyTint) {         this.cobj.setRGB(this.tcolor);     }     this._xscale = 10 * this.tbase;     this._yscale = 10 * this.theight;}// Connect the class with the linkage ID for this movie clipObject.registerClass(“FTriangle”, TriangleClass);#endinitclip

　　注意这段代码是是“捆绑”在三角形电影剪辑内部的第一桢上的。看到上面的代码你可能不明白，没有关系，说实话笔者看FashMX的联机的帮助文件的相关内容看了半天也不知道意思。要明白这段代码的意义，我们先必须熟悉一些面对对象语言的知识。如果你熟悉一些面对对像编程语言，比如Java C/C++,Javascript,应该知道类（class）对象（object）,对象构造器（Constructor ）类的继承。先来了解这些概念：

A. 创建类

　　从flash5开始，actionscript就是面对对象编程语言了，和其他程序语言一样，flash中的也有类（对象）的概念，类是具有相似功能元素的集合，flash中有很多预定义类（对象），比如电影剪辑就是一个图形化的对象。我们也可以来自定义类（对象）。方法是：

　　首先定义一个函数构造器

　　function functionname([argument0, argument1,…argumentN]) {
　　　　statement(s)
　　}

　　或
　　function([argument0, argument1,…argumentN]) {
　　　　statement(s)
　　}

　　我们称为函数，函数有有名函数和无名函数两种，比如有名函数function functionname( )和无名函数　function（）

　　然后通过关键字new定义一个对象 ，假如刚定义的构造器函数名为myfunction

　　myobject=new myfunction（ ）

　　就定义了一个类

B. 类的继承

　　所有函数都有Prototype（原型）的隐藏属性，Prototype属性在函数定义的同时也自动的定义，所有的函数的Prototype属性和方法都自动的转变成隐藏在实体中的_proto_属性和方法。可以给函数的Prototype定义一个新的函数：

　　myfunction.prototype.myevent = function () {…}

　　注意prototype是必须的

　　明白了这些概念我们再来深入的研究上面代码的意义

　　自定义组件的过程主要有四步骤：

　　1． 自定义组件类；
　　2． 定义这个组件类的继承类, 一般是电影剪辑类；
　　3． 为类添加成员和方法；
　　4． 将组件注册（register）给组件类。

　　我们来看看这四个步骤对应怎样的代码

#initclip and #endinitclip

　　这两个指令是Flash MX 新增加的，用来自定义一个组件，这一对指令中包含的代码块就是一个定义组件的四个步骤，#initclip和 #endinitclip总是同时出现，这有点像Html的标签。#initclip ，#endinitclip代码块在.swf文件反复的播放中只执行一次，代码块在.swf文件中的任何元素载入时间轴前就已经运行了，这与flash5中在播放头运行时代码执行有所不同。

自定义组件类

function TriangleClass () {   this.cobj = new Color(this);   this.update();}

　　定义一个构造函数TriangleClass，这个构造函数的成员拥有新的对象cobj和方法

定义这个组件类的继承类

　　TriangleClass.prototype = new MovieClip();

　　给这个函数的原型创建一个电影剪辑实体，也就是这个新创建的对象是电影剪辑的一个继承类，这样这个组件类的原形就继承了电影剪辑的所有属性和方法。

为类添加成员和方法

TriangleClass.prototype.update = function () {if (this.applyTint) {this.cobj.setRGB(this.tcolor);}
this._xscale = 10 * this.tbase;this._yscale = 10 * this.theight;

　　给TriangleClass的原形（prototype）定义一个update函数，函数可以改变组件（实体其实是三角形，在后面的代码中把三角形组件注册给组件类）的色彩和底边长和高属性

将组件注册（register）给组件类

　　Object.registerClass(“FTriangle”, TriangleClass);

　　这是Flash MX新增加的用于自定义组件的函数,作用是使TriangleClass类与所在的组件挂接，使得组件不是MovieClip的直接对象，而是从新的类实体化得到的。Ftriangle是组件的一个linkage ID，打开linkage属性面板（右键点击库中的三角形电影剪辑，选择linkage）按下图定义。

　　为了这个组件的属性更加丰富，还可以给类添加以下方法 ，下面代码是一个定义组件的全部代码：

#initclipfunction TriangleClass () {     this.cobj = new Color(this);     this.update();}// Allow TriangleClass to inherit MovieClip propertiesTriangleClass.prototype = new MovieClip();// Update draws the triangle at the current base and height values.TriangleClass.prototype.update = function () {     if (this.applyTint) {         this.cobj.setRGB(this.tcolor);     }     this._xscale = 10 * this.tbase;     this._yscale = 10 * this.theight;}TriangleClass.prototype.setBase = function (b) {     this.tbase = b;     this.update();}TriangleClass.prototype.getBase = function () {     return (this.tbase);}TriangleClass.prototype.setHeight = function (h) {     this.theight = h;     this.update();}TriangleClass.prototype.getHeight = function () {     return (this.theight);}TriangleClass.prototype.setTintColor = function (c) {     this.tcolor = c;     this.update();}TriangleClass.prototype.turnOnTint = function () {     this.applyTint = true;     this.update();}TriangleClass.prototype.getArea = function () {     return (0.5 * this.tbase * this.theight);}// Connect the class with the linkage ID for this movie clipObject.registerClass(“FTriangle”, TriangleClass);#endinitclip

3．定义组件参数

　　好了，自定义组件的代码我们已经写好了，但在、定义组件的过程还没有完，这个组件还不能用，

我们必须对三角形电影剪辑（这个时候还是一个电影剪辑，还不是组件），我们还要对这个电影剪辑做

一些参数的设置。过程如下：

　　右键点击库中的三角形组件，打开组件定义面板（Component Definition），如下图：

　　开始对参数设置，你可以点击 或 图标添加参数或删除参数，你可以设置变量名字（Name）,

变量（Variable）,数值（value）和数值类型（Type）进行设置。

（变量名）Name变量（Variable）数值（Value）类型（Type）Base Lengthtbase10NumberHeighttheight10NumberTint Colortcolor0ColorApply Tint?applyTintfalseBoolean

　　在面板上还有几个参数Custom UI,live ,Description，复选框选项，说明如下：

　　Custom UI：给组件提供一个外部的.swf文件链接，这个文件可以显示在属性监视器中，通过改变.

Swf文件中的参数，可以直观的反映组件的外观。

　　Live：和Custom UI相似，给组件提供一个外部的.swf文件链接，这个.swf文件可以不通过播放

器直接在源文件中显示组件的外观和功能，真正做到所见即所得。

　　Description：说明组件的功能，作者和版权等相关信息

　　Option：有两个选项 Parameters are locked 和Display in Component panel,分别表示

参数是否锁定和是否在属性监视器中显示外部的Custom UI文件。

　　对于组件Custom UI和Live的定义在后面的教程中有说明，现在只有不对这两个参数进行设置，

组件的Description设置根据读者的情况而定。

　　由于我们希望自定义好三角形状的组件能够出现在Components面板中，沟选第二个选项Display

in Component panel。　　设置好后点击oK确定。

4．设置组件图标

　　大家可能注意到FlashMX中Components面板中的一些自建的组件都有一个很漂亮的图标，比如复

选框是一个 图标，那么自定义组件的图标是怎样设定呢？下面具体说明：

　　1．用图形处理工具（Photoshop ,Fireworks），绘制一个大小为20—24px像素的图形，图形

格式为GIF或PNG的透明色。

　　2.导入图形，图形自动存在库中，新建一个文件夹，命名FcustomIcons，把图形拖到这个文件夹

内，并给图形命名Triangle Component（注意文件夹是必须的，文件夹的命名也是唯一的—FcustomIcons，图形的名称必须和组件的名称相同），组件的缺省图标 被自创的图标替代（如果看不到的话，关闭库面板，再重新打开），这是一个很有意思的能给组件作者带来个性的的设置。

5．设置组件属性

　　右键点击库中的组件，选择元件属性面板，出现如下图形面板（如果你发现弹出的面板很小，只是

一部分，点击advance按纽，全部的元件面板就会展开），如下图：

　　根据上图所示设置参数，然后确定关闭属性面板。

　　从库中拖出三角形组件，放在主场景中，保存。

　　这样一个简单的组件就基本上做了，但是这个时候你在你的Components面板中还看到这个组件，我们

还要做最后一道“工序”

6．安装组件

　　你之所以在Components面板中看不到刚刚自定义的组件，是没有把这个组件.swf文件放在本地机器

正确的文件夹内。

　　假如你的操作系统是安装在硬盘C上，和笔者一样使用的win2000操作系统，把三角形组件文件存为

C:\Documents and Settings\User\Application Data\Macromedia\Flash MX\Configuration

\Components\路径下，文件名为”Triangle”（注意是源文件而不是生成文件）。然后重新启动FlashMX,

打开Components面板，发现面板内多了一个列表Triangle，点击就发现一个红的的三角形图标，说明组件

创建成功。当然如果你的操作系统不是笔者的win2000，文件存放有所差异，下面是各种常用操作系统下组

件源文件存放的路径列表：

Windows 2000 and XPC:\Documents and Settings\User\Application Data\Macromedia\Flash MX\Configuration\Components\Windows 98 and ME C:\Windows\Application Data\Macromedia\Flash MX\Configuration\Components\Windows NTC:\WinNT\Profiles\User\Application Data\Macromedia\Flash MX\Configuration\MAC OS XHardDrive:Users:Library:Application Support:Macromedia:FlashMX:Configuration:ComponentsMac OS 9.x (multi-user)Hard Drive:Users:User:Documents:Macromedia :FlashMX:Configuration:Components:

转载请注明：夜阑小雨 » 创建Flash MX组件