Flash组件之旅(4)：自制共享组件

　　这个组件实现的功能是单击组件中的图片即可放大图片，松开鼠标时，图片又回到初始状态。当这个组件制作好以后，用户所要做得事情只是把组件从组件面板中拖拽到场景中，然后在组件的“Image URL”参数选项中输入想要浏览的图片及其存放的路径就可以了。下面我们就来制作。

　　1. 打开“库”面板，单击按钮新增一个名为“ImageBox Components”的元件文件夹。

　　2. 单击库面板中的按钮新建一个名为“ImageBox”的影片剪辑，把该元件放到“ImageBox Components”文件夹中。

　　3. 鼠标右键点选“库”面板中元件，在弹出的菜单中选择“组件定义”命令，弹出“组件定义”面板后，如图1所示设置。“组件定义”面板可以把一个影片剪辑元件定义成组件的主程序。

　　在“组件定义”面板中，单击图标可以添加或是删除设置选项。“组件定义”面板中各项设置参数的功能如下：

　　参数，设置组件“参数”面板中各参数选项的名称，初始值，类型以及为这些参数定义一个变量。其中各个参数功能如下表所示。

Name

参数项目的名称

Image URL

图片的名称和路径

Scale To Fit

图片是否和组件控制框一样大

Show Border

是否显示图片的边框

Border Color

边框颜色值

Change Handler

定义执行函数　

　　实时预览，也是给组件提供一个外部的.swf文件链接，但可以不通过播放器而直接在源文件中显示组件的外观和功能。

　　说明，描述组件。

　　,单击该图标可选择组件的显示图标。

　　选项，两个可选项的功能是是否把参数锁定或在“组件”面板中显示组件图标。

　　4. 鼠标右键点选组件主程序图标，选择“链接”命令，并如图2所示设置“链接属性”面板。

　　5. 新增一个名为“ImageBox Assets”的元件文件夹。并拖动到“ImageBox Components”文件夹中。接着在该文件夹中新建三个影片剪辑元件（具体设计参见源文件）。在设计中，要注意必须把图形的左上角顶点的位置与场景的中心点重合。

　　6. 在库中双击组件主程序图标，进入编辑场景。如图3所示建立四层，并把文件夹“ImageBox Assets”中的影片剪辑拖入相应的层中。

　　7. 点选“script”层的第1帧，按F9键面板打开“动作”面板键入代码。这部分代码的设计，还是要需要读者自己来完成的。笔者就简单地讲讲如何定义组件的类。见如下代码：

#initclip

ImageBoxClass = function ()
{
　　this.private = new Object();
　　this.init();
};
ImageBoxClass.prototype = new MovieClip();
Object.registerClass("ImageBox", ImageBoxClass);

………………………………………………

#endinitclip

　　在程序的编写中首先要用到#initclip和#endinitclip这对预处理指令。这两个指令必须成对使用。#initclip指令的使用可以提高代码的重用性，使程序的编写变得简练清晰。它们的作用是初始化自定义的组件。预处理指令实际上是编译命令，它不是语句，一般是不能用“；”号结束的。预处理指令可以放在程序的开头、中间或者末尾，这个就看程序的需要了。

　　现在，把设计好的组件文件“ImageBox.fla”放到Components文件夹中就可以使用了。笔者利用该组件设计的效果如图4、5所示。设计组件的方也不尽相同，但无论如何，但以上步骤是不会变的。不过，自制组件需要读者具备一些编程能力的。.fla源文件下载