Flash MX组件开发实战

暑期特刊

傅永忠

　　Flash MX的新功能增强了Flash的易用性、创造性和功能性。新功能中内置的代码引用以及预定义组件最方便最实用。Flash MX组件引用了我们在VB中熟悉的控件概念，替代和扩展了Fash5中的智能剪辑(Smart Clip)，学过VB编程的人很容易上手。Flash MX的组件给用户带来了很大的自由空间，让我们可以编写属于自己的客户组件，从而使Flash MX具有了无限的可扩展性。

　　下面我们就来一起开发一个“倒计时器”组件，这个组件的功能是：在屏幕上显示一个倒计时数，当倒计时结束时，运行指定的程序。用户可以自己设置倒计时多少秒、显示的颜色以及倒计时结束后运行的程序。具体步骤如下：

　　一、创建电影剪辑

　　按(Ctrl+F8)新增一个名为fuyzTimer的电影剪辑，在电影剪辑的编辑窗口中建一个文本框，在属性检查器中将其设置为“动态文本”并命名为myText，设置文本框的关联变量为sec。(如图1)。注意后面的代码都是在这个电影剪辑内部的第一帧上的。

　　创建好电影剪辑后我们就可以自定义组件了，为了方便大家对后面内容的理解，这里先介绍“面向对象”编程的基本概念──“类”、“对象”、“属性”、“方法”及“封装”。

　　二、“面向对象”编程(OOP)的基本概念

　　1.“类”和“对象”

　　对现实中的某种具体物质进行抽象、概括后就叫“类”，某种类的具体存在就叫“对象”。举几个实际例子，比如：将具体的各式各样的桌子进行抽象概括就成了“桌子”这个“类”，而具体的“一张课桌”、“一张餐桌”等则是“桌子”这个“类”的对象。再如“奔驰轿车”就是“轿车类”的一个对象。

　　2.类的属性和方法

　　由于类是对某一种具体物质抽象，也就是说，某种类就一定具有区别于其他类的独立性质，这些性质就叫做类的“属性”。以“桌子类”为例来说明：桌子有哪些区别于其他类的属性呢？桌子的属性至少有：大小、颜色、高度、材料、形状等等。定义一个“类”后都必须给它指定属性，大多数情况下都为公有(Public)属性，也有私有(Private)属性。

　　类的方法是类响应某个事件时所做的事情。例如：当转动钥匙启动汽车时将触发一个事件，这时汽车已定义的一个方法“启动”将起作用来发动汽车。从编程的角度看，类的“方法”实际上就是函数，不过，这个函数不同于一般高级语言中的函数，他只能在所在的类中使用，不能在其他地方任意使用，所以方法成员又叫“类函数”。在面向对象程序设计中，一般将类函数统称为“函数”，其他非类函数统称为“全局函数”。

　　3.类的封装

　　类的封装就是将类的信息(它的属性)和类对事件的响应(它的方法)都包含在类的定义中。

　　三、定义组件类

　　自定义组件的过程主要有以下三个步骤：

　　(1) 自定义组件类。

　　(2) 为类添加成员和方法。

　　(3) 将组件注册(register)给组件类。

　　我们先介绍定义自定义组件类。自定义组件类是自定义组件的关键。FlashMX新增加了自定义组件的指令#initclip #endinitclip。这两个指令本质上看是用来封装一个组件类的，即将一个组件类的属性和方法都包含在组件类的定义中，也就是将组件类的属性和方法都放在#initclip和#endinitclip之间，因而#initclip和 #endinitclip总是同时出现，这有点像Html的标签。组件类定义的全部代码都包含在这一对代码中间。#initclip，#endinitclip代码块在.swf文件反复的播放中只执行一次，代码块在.swf文件中的任何元素载入时间轴前就已经运行了，这与flash5中在播放头运行时的代码执行有所不同。

　　下面这段程序定义一个名为fuyzTimerClass的组件类。

　　function fuyzTimerClass() {

　　　　_timerLoop = function () {

　　　　　　if (getTimer() - this . oldtime>=1000) {

　　　　　　　　this . oldtime = getTimer();

　　　　　　　　this . sec = _formatvalue(Number(this . sec)-1)

　　　　　　　　 if (Number(this . sec)<=0 ) {

　　　　　　　　　　　　this . sec = "　";

　　　　　　　　　　　　　　delete　this . onEnterFrame;

　　　　　　　　　　　　　　this . runHandler();

　　　　　　　　　　}

　　　　　　}

　　　　};

　　　　_formatvalue = function (fno) {

　　　　　　　if (String(fno) . length<2) {

　　　　　　　　　　return fno="0"+fno;

　　　　　　}

　　　　　　　return fno;

　　　　};

　　　　this.init();

　　　　this.timerStart();

　　}

　　这段程序中还定义了_timerLoop和_formatvalue两个私有方法Private Method。“类”有两种形式的成员—公有(Public)成员和私有(Private)成员。类的公有成员(也包括公有数据和公有函数)可以被其他类的成员访问。当然，类自己的函数可以访问自己的公有成员。类的私有成员(包括私有数据和私有函数)只限于类本身的成员使用。也就是说，除了本身的成员能够访问自己的私有成员外，其他任何类以外的函数对私有成员的访问都是非法的。私有成员也不能被子类直接继承。在Flash MX中私有成员同类一同定义，名称前有一短的下划线“-”；公有成员则一般使用构造器函数的prototype属性定义。私有方法_timerLoop的作用是每过一秒将变量sec减1并判断变量sec是否到零，若到零则调用runHandler()；私有方法_formatvalue的作用是当变量sec为一位数时在其前面补加零，即：将“9”变为“09”。

　　四、为类添加成员和方法

　　所有定义组件类的构造器函数都有 prototype 属性，该属性是在定义该函数时自动创建的。prototype属性代表用该函数创建的对象的默认属性值。可以使用 prototype 属性将属性和方法分配给类。可以给函数的Prototype定义一个新的函数，语法如下：

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

　　注意prototype是必须的。

　　下面是为fuyzTimerClass 类添加的成员和方法:

　　fuyzTimerClass.prototype.init = function() {

　　　　　　this.oldtime = getTimer();

　　　　　　this.sec = _formatvalue(this.fsec);　//读入用户设置的倒计时秒数

　　　　　　this.myText.textColor = this.txtColor; //读入用户设置的文本颜色

　　　　　　this.timerDirChange();

　　};

　　fuyzTimerClass.prototype.runHandler = function() {

　　　　　　this._parent[this.timeupHandler]();　

　　};　//倒计时完后运行指定程序

　　fuyzTimerClass.prototype.timerStart = function() {

　　　　　　this.onEnterFrame = _timerLoop;

　　}; //控制倒计时器开始

　　fuyzTimerClass.prototype.timerPause = function() {

　　　　　　delete this.onEnterFrame;

　　}; //控制倒计时器暂停

　　fuyzTimerClass.prototype.timerReset = function() {

　　　　　　this . init();

　　};　//控制倒计时器重新开始

　　fuyzTimerClass.prototype.timerSetTime = function(secVar, setDefault) {

　　　　　　this.sec = _formatvalue(secVar);

　　　　　　if (setDefault) {

　　　　　　　　　　this.fsec = secVar;

　　　　　　}

　　}; //设置倒计时秒数

　　五、将组件注册(register)给组件类

　　为类添加完方法后，用下面的语句将组件注册给组件类。

　　Object.registerClass("fuyzTimer", fuyzTimerClass);

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

　　六、定义组件参数

　　好了，自定义组件的代码我们已经写好了，但定义组件的过程还没有完，这个组件还不能用，我们必须对这个电影剪辑(这个时候还是一个电影剪辑，还不是组件)做一些参数的设置。过程如下：

　　右键点击库中的fuyzTimer组件，打开组件定义面板(Component Definition)，如图3：

　　你可以点击 “+”或“-”图标添加参数或删除参数，开始参数设置。你可以设置变量名字(Name),变量(Variable),数值(value)和数值类型(Type)。设置内容如下表。

　　其中，“变量“一栏中的“fsec”、“txtColor”和“timeupCandler”是我们在前面程序中用到的。用户在使用组件时只能看到“名称”和“值”两栏。“值”一栏不用设置，设置好“类型”即可。

　　在前面的定义组件面板上还有“自定UI”、“实时预览”和“说明”三项可设置，说明如下：

　　自定UI：给组件提供一个外部的.swf文件链接，这个文件可以显示在属性监视器中，改变.Swf文件中的参数，可以直观的反映组件的外观。

　　实时预览：和自定UI相似，给组件提供一个外部的.swf文件链接，这个.swf文件可以不通过播放器直接在源文件中显示组件的外观和功能，真正做到所见即所得。

　　说明：说明组件的功能，作者和版权等相关信息。说明的下面有个按钮，按下它可以为你的组件选择一个图标。如没有合适的可以自创一个图标。

　　七、自创组件图标

　　自创组件图标的方法如下：

　　用图形处理工具(Photoshop ,Fireworks)，绘制一个大小为20—24px像素的图形，图形格式为GIF或PNG的透明色。在Flash MX 中导入该图形，图形自动存在库中。新建一个文件夹，命名FcustomIcons，把图形拖到这个文件夹内，并给图形命名fuyzTimer Component(注意文件夹是必须的，文件夹的命名也是唯一的，图形的名称必须和组件的名称相同)，这样组件的缺省图标被自创的图标替代(如果看不到的话，关闭库面板，再重新打开)，这是一个很有意思的能表现组件作者个性的的设置。

　　至此，我们的倒计时组件的制作工作已经全部结束了。现在我们的组件已经可以用了。按“Ctrl+L”打开库，将fuyzTimer组件拖到场景的第一帧上，在属性检查器中设置组件属性，在场景的第一帧上增加倒计时结束后调用的函数代码，即可欣赏到我们的成果了。

　　还有一个问题：在组件面板中还见不到我们的fuyzTimer组件，这是因为组件还没有安装(或者说还没有把这个组件的.fla文件放在正确的文件夹内)。安装的方法请继续看“Flash MX 组件的打包和发布”。

　　八、Flash MX 组件的打包发布

　　安装组件的方法有两种：

　　1.直接将组件的.fla文件放在正确的文件夹内

　　对Windows 2000 或 XP的用户将组件文件放在C:\Documents and Settings\User\Application Data\Macromedia\Flash MX\Configuration\Components\路径下；对Windows 98 and ME的用户则放在C:\Windows\Application Data\Macromedia\Flash MX\Configuration\Components\路径下(注意是源文件而不是生成文件)。在这些路径下你还能看到其他组件的源文件。这里有个小技巧：在这些路径下通过双击打开组件源文件来打开Flash MX，这时对组件进行的外观(Skins)修改将会保存下来。另外，打开组件源文件一般会看到此组件应用的实例，这对你学会此组件的使用是有帮助的。

　　2.创建标准的MXP插件

　　由于Flash MX支持标准的MXP插件封装格式，因此我们可以将测试无误的组件封装成标准的MXP插件，将它与其他朋友共享。

　　创建MXP的第一步是准备好和组件的 .fla文件相应的MXI文件。MXI文件包含了关于此组件的说明和相关信息，此文件要求为标准的XML格式，主要内容如下：

　　＜macromedia-extension

　　　　　　name="fuyzTimer"

　　　　　　version="1.1.1"

　　　　　　type="Flash Component"＞

　　　　　　＜!-- List the required/compatible products --＞

　　　　　　＜products＞

　　　　　　　　　＜product name="Flash" version="6" primary="true" /＞

　　　　　　＜/products＞

　　　　　　＜!-- Describe the author --＞

　　　　　　＜author name="傅永忠" /＞

　　　　　　＜!-- Describe the extension --＞

　　　　　　＜description＞

　　　　　　＜![CDATA[

　　　　　　这是一个倒计时器，可以设置倒计时秒数、显示时的颜色及倒计时结束后运行的程序名。

　　　　　　]]＞

　　　　　　＜/description＞

　　　　　　＜!-- Describe where the extension shows in the UI of the product --＞

　　　　　　＜ui-access＞

　　　　　　＜![CDATA[

　　　　　　 This component set will be installed into the Flash MX ＞ Components folder.

　　　　　　]]＞

　　　　　　＜/ui-access＞

　　　　　　＜!-- Describe the files that comprise the extension --＞

　　　　　　＜files＞

　　　　　　　　　＜file name="fuyzTimer.fla" destination="$flash/Components" /＞

　　　　　　＜/files＞

　　＜/macromedia-extension＞

　　编写这个MXI文件可以用Dreamweaver MX ，保存时注意存为MXI文件。这里我向你推荐另一个编写MXI的工具MXI File Creator，它是一个Windows桌面应用程序，专门用来创建和编辑Macromedia Flash MX Extensions(.mxi)，其界面如图4：

　　下载地址：http://www.muzakdeezign.com/mxi_creator/download.asp

　　创建MXP的第二步双击编写好的MXI文件，启动“Macromedia扩展管理器”按提示操作即可，但要将MXI文件和组件文件放在同一目录下。

　　至此，组件的开发工作全部结束。对此组件有兴趣请和我联系，我的Email：fuyz@btamail.net.cn。