创建Flash MX组件（上）

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（），大家可能对这些函数和方法感到陌生 。不过没有关系，我们先来看下面一段代码：

    #initclip
    function TriangleClass () {
        this.cobj = new Color(this);
        this.update();
    }
    // Allow TriangleClass to inherit MovieClip properties
    TriangleClass.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 clip
    Object.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）按下图定义。

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

    #initclip
    function TriangleClass () {
        this.cobj = new Color(this);
        this.update();
    }
    // Allow TriangleClass to inherit MovieClip properties
    TriangleClass.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 clip
    Object.registerClass("FTriangle", TriangleClass);
    #endinitclip