Building Flash Component
时间：2010-10-02 来源：Morris
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. 代码完成后应该检查与法，并且保存。
9. 配置组件
代码完成后保存好。这一步我们把组件和对应的代码关联起来。
首先在Library中右键点击TestComponent，选择“Linkage…”。选择“Export for ActionScript”，然后在AS2.0 Class中填上刚才class的名字，如下图：
点“OK”后，再次右键点击TestComponet，选择“Component Definition…”，在AS2.0 Class中填上class名，然后点“OK”。
上图的Parameters在第一次选择是不会出现，当再次打开这个对话框才会看到。
10.测试
把做好的控件添加到Flash的主Frame中，从Property中可以选择颜色。
测试控件的表现、对鼠标移动的响应和事件是否能正确输出。
这一部可以使用Flash开发环境的测试功能来调试代码。
11.输出和使用组件
右键点击Library中的TestComponent，然后选择“Export SWC File…”
把组件复制到相应的目录中，然后创建新的Flash Document测试组件。
重点测试开发环境中的表现，例如改变大小等操作是否正确，修改属性能不能正确表现出来。
12.最后的调整
如果在第11部中存在问题，不可以使用Flash本身的代码调试功能，但可以使用添加trace的方法找出并解决问题。
相关阅读 更多 +
