Building Flash Component

来源：互联网发布：广东省税务开票软件编辑：程序博客网时间：2024/06/08 13:21

1. Component基础

Component本质上是一个Movie Clip。与普通Movie Clip不同的是：Component自身可以提供property、method等特性，而且可以给其它Flash用户使用。

Flash MX 2004支持fla、swf和swc格式的component，我们这里只讲swc格式组件的制作方法。Flash MX 2004所提供的标准组件都是swc格式的。

Flash MX 2004的组件保存在系统盘的以下目录中：

/Documents and Settings/[登录名]/Local Settings/Application Data/Macromedia/Flash MX 2004/en/Configuration/Components

其中“[登录名]”用自己的用户名代替。

在这个目录下，可以创建子目录来给组件分类。把新做的组件复制到这个目录中，就可以使用了。

添加或更新组建时，Flash的Component窗体中不会马上表现出来，而必须Reload Component窗体。具体方法是：选择Component窗体的菜单，点击Reload菜单项，如下图：

Reload之后就可以在Component窗体中看到刚才添加的组件了。

2. 新建Flash文档

这个创建Component的第一个步骤。

要制作Component必须从一个Flash文档开始。创建一个Flash Document类型的文档。

这个Flash文档是Component的制作和测试环境。

文档创建好之后保存。

可以通过一个Flash文档创建多个组件，如果这几个组件关系密切，在一个Flash文档中创建会很方便。但不要在一个Flash文档中创建多个无关的组件。

3. 创建Movie Clip

在Flash文档的Library窗口中点击

“Create New Symbol”。这是个小按钮，位于Library窗体的左下角。要给新建的Movie Clip起一个友好的名字，第一个例子我们叫做“TestComponent”。

在“Create New Symbol”按钮旁还有一个小按钮

“Create Folder”，这个按钮用来在Library中创建Folder。记得用Folder来分类整理Library中的内容。可以把组件从一个目录拖放到另一个目录中。

4. Component需要的Layer和Frame

双击打开刚创建的Movie Clip，然后建立相应的Layer和Frame。几乎所有的Component的Layer和Frame结构都是相同的：

创建3个Layer，分别叫“Action”、“Bounding”和“Assets”。Layer的名字实际上是无关的，但这样取名更容易让人理解。
在Assets的Frame2的位置新建一个Key Frame。
Action的Frame1的Action Script中加一句：stop();

暂时先这样，等一下我们会再添加一些东西。添加好后，Timeline如下图：

5. 在Library中添加需要的Asset组件

在Library中创建名叫Assets的Folder。在Folder中添加组件中需要用到的其它组件。

有两种方法添加需要的组件，根据要制作的组件的功能选择。如果组件不依赖于任何现有的Component，就应该从FlashComponent.fla中添加组件，否则从Component窗体中直接添加组件。

在第一个例子中，我们从FlashComponent.fla中添加组件。FlashComponent.fla是Flash MX 2004标准组件的源代码，其中有一个经常被用作基类的组件“UIComponent”。FlashComponent.fla在Flash安装目录下的en/Configuration/ComponentFLA。FlashComponent.fla中有很多常用的Movie Clip和大量的工具Movie Clip，我们需要的“UIComponent”在Library目录中的/Base Classes/ FUIObject Subclasses中。另一个需要的Movie Clip是“BoundingBox”，位于/Component Assets中。把这两个Movie Clip拖到刚才创建的Assets Folder中。

6. 添加Asset

打开Assets Layer的Frame2，就是刚才创建的那个Frame。把UIComponent拖到画面中。Movie Clip放置的位置是无关紧要的，如果Assets中组建较多，把它们排整齐。在这个例子中我们只需要这个Asset。

7. 创建Bounding对象

打开BoundingBox Layer，在Frame1中添加一个BoundingBox对象。还记得吗？就是第5步中拖到Library中的那个。

给这个对象起名叫“boundingBox_mc”，注意大小写，Action Script 2.0是大小写敏感的。

调整对象的位置到（0，0），大小为（200，50）。可以通过下面的Properties窗体迅速调整，如下图：

宽是200

高是50

（图中的尺寸标注有误，请参考文字说明。）

BoundingBox的作用是标注组件的初始大小，除此外没有其它用途。如果你想让组件有不同的初始大小，可以通过改变BoundingBox的大小来实现。

BoundingBox的左上角位置绝大部份情况都在（0，0）。除非你很了解它的作用，否则不要改变这个位置。

8. 编写Component的代码

下面创建一个as文件，名字叫做TestComponent.as。和fla文件存在同一个目录中。as文件保存的位置很重要，在本例中一定要和第二步中的fla存放的相同的目录中。TestComponent.as的内容如下：

import mx.core.UIComponent; // 引入基类

[Event("click")] // 定义click事件

class TestComponent extends UIComponent

{

static var symbolName:String = "TestComponent"; // （标准）定义Movie Clip的名字

static var symbolOwner:Object = TestComponent; // （标准）定义class的名字

static var version:String = "1.0.0.0"; // （标准）版本号

var className = "TestComponent"; // （标准）适用CSS的class名，一般和组件名相同

private var boundingBox_mc:MovieClip; // 定义BoundingBox的变量名，

// 必须和第7步中的取名相同

private var m_color:Number; // 组件中的私有变量，用于控制组建的颜色

function TestComponent(Void) // （标准）构造函数，必须为空

{

}

private function init(Void):Void // （标准）初始化代码写在这里

{

super.init(); // （标准）调用基类的初始化函数

boundingBox_mc._visible = false; //（标准）隐藏BoundingBox

}

private function size(Void):Void // （标准）尺寸改变时的处理函数

{

super.size(); // （标准）调用基类的处理函数

invalidate(); // 自己的处理步骤，我们要做的就是重画组件，

// invalidate是标准的重画函数

}

private function createChildren(Void):Void // （标准）创建子对象

{

super.createChildren(); // （标准）调用基类的相应函数

// 这个组件没有子对象

}

private function draw(Void):Void // （标准）描画组件，刚才的invalidate会间接调用这里

{

super.draw(); // （标准）先描画基类对象

this.clear(); // 清除Movie Clip

this.beginFill(m_color, 100); // 下面的代码将Movie Clip填充成指定颜色

this.moveTo(0, 0); // __width和__height是标准内部变量

this.lineTo(__width, 0); // 用于指定组件的尺寸

this.lineTo(__width, __height);

this.lineTo(0, __height);

this.lineTo(0, 0);

this.endFill();

}

private function onPress() // Movie Clip的标准事件处理函数

{

dispatchEvent({type:"click"}); // 发送click消息

}

private function onRollOver() // Movie Clip标准事件处理函数

{

this._alpha = 50; // 鼠标移上来时变成半透明

}

private function onRollOut() // Movie Clip标准事件处理函数

{

this._alpha = 100; // 鼠标离开时变成不透明

}

// 定义一个属性

[Inspectable(type="Color", defaultValue="#FF0000", category="Nelson")]

function get color():Number // 取得属性的函数

{

return m_color;

}

function set color(c:Number) // 设置属性的函数

{

m_color = c;

}

代码中的要点：

1. 绝大多数组件继承UIComponent，init、size、draw、createChildren这些都是UIComponent提供的虚函数。另外UIComponent还提供了dispatchEvent和invalidate等处理函数。具体参考Flash文档中关于UIComponent和UIObject的描述。（UIObject是UIComponent的基类）

2. UIComponent从UIObject继承，而UIObject从MovieClip继承，所以class中可以直接使用MovieClip中的函数，如lineTo等。通过重载onPress等函数，可以直接响应事件。但通过这种方式响应事件会阻止基类响应此事件。

3. 带有“（标准）”字样的行是从UIComponent继承的组件的标准写法。

4. 代码经过验证是正确的，担注释是后来加的，如果需要copy-paste的话，先把注释去掉。

5. 代码完成后应该检查与法，并且保存。