进入Flash MX组件时代之四 组件的衍生
关注+2004-11-07作者：蓝点
前面我们已经阐述了FlashMX组件的概念、内置组件的强大功能、扩展组件的安装和应用，显然这些内容仍属于组件应用的范围。FlashMX为我们提供的内容绝不仅仅只限于这些，那它到底还隐藏了些什么呢？其实它什么也没有隐藏，也无需隐藏，而恰因如此，越来越多的闪客闪侠加入到了FlashMX应用组件开发的行列当中。FlashMX应用组件的开发？这到底是怎样一种技术，我们又该如何去认识它，谈及到此或许我们该对FlashMX组件的衍生过程进行一番了解。
4.1 从功能函数衍生开来
假若说到函数相信各位闪友都会眼睛一亮，平时制作Flash影片的时候经常会用到一些函数，如：random（随机函数）、substring（截取字符函数）、abs（绝对值函数）等Flash自带的函数，相信熟悉Flash ActionScript的朋友对它们也一定非常熟悉，利用它们我们已经可以完成一些常规功能的奇特效果。然而要求似乎永无休止，在许多场合我们仍需要自行定义一些自定义函数来解决一些特殊的要求，在此我们称它们为“功能函数”。
不说还不明白，越说却越糊涂，我想从下面的实例中或许可以让我们对“功能函数”有进一步认识。
实例要求：在场景中创建一组按钮，而鼠标移至按钮上以后就显示相应的按钮功能提示信息。
制作分析：由于每分按钮必定具有其不同的功能作用，因而鼠标移至按钮上时显示的提示信息必然是不相同的。针对于此，第一印象我们或许会马上联想到利用按钮 “UP”及“Down”
等不同状态时放置相应不同的文本框，以此来达到按钮的提示信息的功能。假若场景中只有二、三个按钮用此方式或许尚可，但倘若按钮一多则会显得极为繁杂，因而我们必须想法找到更为妥善的方式来解决此类问题。由于Flash本身并无相关的函数来解决此种特定问题，因而我们自然而然的想到了利用Action创建一个解决此问题的特定函数，在此我们将它们命名为setTooltip及unsetToolTip——提示信息的功能函数。首页我们在场景中建立一个ActionScript层，如下图52所示，然后在此关键帧中输入如下代码：
//-----------------------------------------------------------------------------
//函 数 名：setTooltip();unsetToolTip();
//功 能：在MovieClip或是Button上显示相应的提示信息
//所需技术：
TextFormat, createTextField, setNewTextFormat, setInterval, clearInterval, removeTextField;
//所需参数：theText,timer,text_color,bg_color,border_color
//适用版本：FlashMX
//自定义函数setTooltip
MovieClip.prototype.setTooltip = function(theText, timer, text_color, bg_color, border_color) {
if (timer == undefined) {
timer = 500;
}
//定义函数addMsg
var addMsg = function (theMsg, col, bg_color, border_color, level) {
var x = _root._xmouse;
var y = _root._ymouse;
//创建文本格式
var f = new TextFormat();
f.font = "宋体";
f.size = 12;
f.color = col != undefined ? col : 0x000000;
//创建动态文本框
_level0.createTextField('tooltip', 123456, x, y, 150, 20);
//设置文本框属性
with (_level0.tooltip) {
setNewTextFormat(f);
text = theMsg;
selectable = false;
autoSize = true;
background = true;
border = true;
borderColor = border_color != undefined ? border_color : 0x000000;
backgroundColor = bg_color != undefined ? bg_color : 0xFFFFEE;
_y -= _height;
}
clearInterval(level.q_t);
};
//定时调用addMsg函数
this.q_t = setInterval(addMsg, timer, theText, text_color, bg_color, border_color, this);
};
//自定义函数unsetToolTip
MovieClip.prototype.unsetToolTip = function() {
//清除文本框及清除setInterval调用
_level0.tooltip.removeTextField();
clearInterval(this.q_t);
};
/*
//使用方法：
setToolTip("你想显示的提示信息！",timer, text_color, bg_color, border_color);
unsetToolTip();
//使用示例：
on (rollOver)
{
setTooltip("你想显示的提示信息！", 500, 0x000000, 0xFFFFEE, 0x000000);
或setTooltip("你想显示的提示信息！\n还可以折行显示信息！");
}
on (rollOut, release, press)
{
unsetToolTip();
}
//-----------------------------------------------------------------------------
*/
然后我们创建一个按钮只有背景内容的按钮Btn，如下图53所示：
接下来我们再在场景中放置一些文本框用以作为按钮的标题内容，如下图54所示：
最后，我们根据前面函数中的“使用方法”在不同的按钮中输入不同的提示信息函数参数便可，如以下代码所示：
FlashMX按钮代码
on (rollOver) {
setTooltip("FlashMX", 500, 0x000000, 0xFFFFEE, 0x000000);
}
on (press, release, rollOut) {
unsetToolTip();
}
FireWorkMX按钮代码
on (rollOver) {
setTooltip("FireWorkMX", 500, 0xffcc00, 0xFFFFEE, 0x000000);
}
on (press, release, rollOut) {
unsetToolTip();
}
DreamWeaverMX按钮代码
on (rollOver) {
setTooltip("FireWorkMX", 500, 0xff0000, 0xFFcc00, 0x000000);
}
on (press, release, rollOut) {
unsetToolTip();
}
查看上述代码我们再结合前面ToolTips自定义函数我们就可以总结出“功能函数”之所以存在的缘由了，我们使用类似的“功能函数”而只需更改少许的参数就可以完成我们需求的特定要求，下图55就演示了函数范围的最终效果。
归纳总结上述实例我们可以发现一个关键性问题：在编写ToolTips功能函数时我们不断的提炼出一些“固定不变的变量”（参数），并在以后利用这些参数来达到更改死气沉沉按钮ToolTips外观样式的作用。这是一个提炼与精华的过程，我们必须认清自己最终要达到什么样的目的，其中哪些内容是可以改变的，哪些内容又是固定不变的，只有在不断的精炼过程中我们才能完善这个过程。
在此我不得不重申一下“固定不变的变量”这个词的概念。所谓固定在此实例中表现为theText,text_color,bg_color,border_color等内容，它们代表了提示文本信息、文本颜色、文本背景颜色及文本框边框颜色等。显然，每个按钮的提示信息里都会具有这些内容，因而我们将它们称之为“固定不变”。“变量”即为可变的内容部分，我们前面的这些固定不变的内容在每个按钮提示信息的应用里我们又可将它们设置为不同的变量值，因而我们将它们称之为“变量”。确定“固定不变的变量”是整个效果实现的关键，影片会表现出怎么样的最终效果与我们提炼出多少的“固定不变的变量”与提炼出什么“固定不变的变量”有着密不可分的关系，因而我们编写“功能函数”来实现特殊效果的时候也需三思而后行之。不知各位是否有所感觉，一旦我们编写完该特殊的“功能函数”后，以后如果再有遇及相似的情况只需加入此函数并进行调用即可，却实也达到了一旦完工后事无忧的成效哦。
4.2 组件衍生过程的综合思想
从Function到Smart Clip再到FlashMX Components，这是一个进化与不断提炼的过程，虽然从功能与实现效果及效率上它们是日渐发展，但不管从形式上如何区别这些内容之间的差异，从本质上来说它们的最终目的都是为了“功能再利用”。我们可以从下面组件发展的流程趋势图中显式的了解这一过程。
功能性函数
Function
从所需实现功能要求中提取“固定不变的变量”，明确这些变量的意义，清晰实现该项具体要求的方法。
优势：能够解决某些具体问题
弊病：属于开发人员级技术难度，无用户界面操作，不具备良好的用户体验。
智能剪辑影片
Smart Clip
继续延伸“固定不变的变量”提取方式，并在设计阶段提供参数设置，让这些参数在智能剪辑影片运行期进行传递并起作用。
优势：改进用户体验，允许用户自行操作进行参数设置，将设计与开发区分开来。
弊病：编程原理并非面向对象框架结构。
很难通过变量来捕获MovieClip的外观，因而不具备良好的设计外观。
Flash组件
FlashMX Components
贯穿提取“固定不变的变量”的思想，不但可以在设计阶段提供参数设置，而且还可以在设计阶段就可以根据提供的参数预览到最后的成品效果。
优势：完美用户体验，设计与应用分离，可更改外观并增强其可设计性，无限扩展性等。
弊病：开发相对较难，开发阶段需考虑因素需全面，周全。
纵观该演化过程我们可以发现，组件的发展是在强调解决针对性问题的同时不断的提高用户体验的优化，以此为基础并逐步将设计与开发两者相分离，使得大部分不具备拥有开发编写函数或是组件的朋友同样有机会利用已经现有的组件来解决一些具体的操作。虽然每个过程中都有其利弊的存在，但在每个阶段都同样具备的共性则是“提炼”工作，这一工作是组件开发过程中首先需完成的也是最为重要的工作之一。我们所述的提炼不光是“固定不变的变量”的提炼，还有设计开发思路的提炼，甚至是用户体验的提炼等等，因而我们将组件衍生过程的综合思想归纳为“提炼”两字似乎也并不显得太为过份。在以后的组件开发的章节内容我们还会将此概念更深入的进行灌输，希望每位朋友对此都能够引起十二分重视。