前面我們已經(jīng)闡述了FlashMX組件的概念、內(nèi)置組件的強(qiáng)大功能、擴(kuò)展組件的安裝和應(yīng)用，顯然這些內(nèi)容仍屬于組件應(yīng)用的范圍。FlashMX為我們提供的內(nèi)容絕不僅僅只限于這些，那它到底還隱藏了些什么呢？其實它什么也沒有隱藏，也無需隱藏，而恰因如此，越來越多的閃客閃俠加入到了FlashMX應(yīng)用組件開發(fā)的行列當(dāng)中。FlashMX應(yīng)用組件的開發(fā)？這到底是怎樣一種技術(shù)，我們又該如何去認(rèn)識它，談及到此或許我們該對FlashMX組件的衍生過程進(jìn)行一番了解。
4.1 從功能函數(shù)衍生開來
假若說到函數(shù)相信各位閃友都會眼睛一亮，平時制作Flash影片的時候經(jīng)常會用到一些函數(shù)，如：random（隨機(jī)函數(shù)）、substring（截取字符函數(shù)）、abs（絕對值函數(shù)）等Flash自帶的函數(shù)，相信熟悉Flash ActionScript的朋友對它們也一定非常熟悉，利用它們我們已經(jīng)可以完成一些常規(guī)功能的奇特效果。然而要求似乎永無休止，在許多場合我們?nèi)孕枰孕卸x一些自定義函數(shù)來解決一些特殊的要求，在此我們稱它們?yōu)椤肮δ芎瘮?shù)”。
不說還不明白，越說卻越糊涂，我想從下面的實例中或許可以讓我們對“功能函數(shù)”有進(jìn)一步認(rèn)識。
實例要求：在場景中創(chuàng)建一組按鈕，而鼠標(biāo)移至按鈕上以后就顯示相應(yīng)的按鈕功能提示信息。
制作分析：由于每分按鈕必定具有其不同的功能作用，因而鼠標(biāo)移至按鈕上時顯示的提示信息必然是不相同的。針對于此，第一印象我們或許會馬上聯(lián)想到利用按鈕 “UP”及“Down”等不同狀態(tài)時放置相應(yīng)不同的文本框，以此來達(dá)到按鈕的提示信息的功能。假若場景中只有二、三個按鈕用此方式或許尚可，但倘若按鈕一多則會顯得極為繁雜，因而我們必須想法找到更為妥善的方式來解決此類問題。由于Flash本身并無相關(guān)的函數(shù)來解決此種特定問題，因而我們自然而然的想到了利用Action創(chuàng)建一個解決此問題的特定函數(shù)，在此我們將它們命名為setTooltip及unsetToolTip——提示信息的功能函數(shù)。
首頁我們在場景中建立一個ActionScript層，如下圖52所示，然后在此關(guān)鍵幀中輸入如下代碼：
圖52 ToolTips功能函數(shù)場景內(nèi)容
//-----------------------------------------------------------------------------
//函 數(shù) 名：setTooltip();unsetToolTip();
//功 能：在MovieClip或是Button上顯示相應(yīng)的提示信息
//所需技術(shù)：
TextFormat, createTextField, setNewTextFormat, setInterval, clearInterval, removeTextField;
//所需參數(shù)：theText,timer,text_color,bg_color,border_color
//適用版本：FlashMX
//自定義函數(shù)setTooltip
MovieClip.prototype.setTooltip = function(theText, timer, text_color, bg_color, border_color) {
if (timer == undefined) {
timer = 500;
}
//定義函數(shù)addMsg
var addMsg = function (theMsg, col, bg_color, border_color, level) {
var x = _root._xmouse;
var y = _root._ymouse;
//創(chuàng)建文本格式
var f = new TextFormat();
f.font = "宋體";
f.size = 12;
f.color = col != undefined ? col : 0x000000;
//創(chuàng)建動態(tài)文本框
_level0.createTextField('tooltip', 123456, x, y, 150, 20);
//設(shè)置文本框?qū)傩?br>
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);
};
//定時調(diào)用addMsg函數(shù)
this.q_t = setInterval(addMsg, timer, theText, text_color, bg_color, border_color, this);
};
//自定義函數(shù)unsetToolTip
MovieClip.prototype.unsetToolTip = function() {
//清除文本框及清除setInterval調(diào)用
_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();
}
//-----------------------------------------------------------------------------
*/
然后我們創(chuàng)建一個按鈕只有背景內(nèi)容的按鈕Btn，如下圖53所示：
圖53 ToolTips的銨扭內(nèi)容
接下來我們再在場景中放置一些文本框用以作為按鈕的標(biāo)題內(nèi)容，如下圖54所示：
圖54 ToolTips的文本框標(biāo)題
最后，我們根據(jù)前面函數(shù)中的“使用方法”在不同的按鈕中輸入不同的提示信息函數(shù)參數(shù)便可，如以下代碼所示：
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();
}
查看上述代碼我們再結(jié)合前面ToolTips自定義函數(shù)我們就可以總結(jié)出“功能函數(shù)”之所以存在的緣由了，我們使用類似的“功能函數(shù)”而只需更改少許的參數(shù)就可以完成我們需求的特定要求，下圖55就演示了函數(shù)范圍的最終效果。
圖55 ToolTips功能函數(shù)成品效果
歸納總結(jié)上述實例我們可以發(fā)現(xiàn)一個關(guān)鍵性問題：在編寫ToolTips功能函數(shù)時我們不斷的提煉出一些“固定不變的變量”（參數(shù)），并在以后利用這些參數(shù)來達(dá)到更改死氣沉沉按鈕ToolTips外觀樣式的作用。這是一個提煉與精華的過程，我們必須認(rèn)清自己最終要達(dá)到什么樣的目的，其中哪些內(nèi)容是可以改變的，哪些內(nèi)容又是固定不變的，只有在不斷的精煉過程中我們才能完善這個過程。
在此我不得不重申一下“固定不變的變量”這個詞的概念。所謂固定在此實例中表現(xiàn)為theText,text_color,bg_color,border_color等內(nèi)容，它們代表了提示文本信息、文本顏色、文本背景顏色及文本框邊框顏色等。顯然，每個按鈕的提示信息里都會具有這些內(nèi)容，因而我們將它們稱之為“固定不變”?！白兞俊奔礊榭勺兊膬?nèi)容部分，我們前面的這些固定不變的內(nèi)容在每個按鈕提示信息的應(yīng)用里我們又可將它們設(shè)置為不同的變量值，因而我們將它們稱之為“變量”。確定“固定不變的變量”是整個效果實現(xiàn)的關(guān)鍵，影片會表現(xiàn)出怎么樣的最終效果與我們提煉出多少的“固定不變的變量”與提煉出什么“固定不變的變量”有著密不可分的關(guān)系，因而我們編寫“功能函數(shù)”來實現(xiàn)特殊效果的時候也需三思而后行之。不知各位是否有所感覺，一旦我們編寫完該特殊的“功能函數(shù)”后，以后如果再有遇及相似的情況只需加入此函數(shù)并進(jìn)行調(diào)用即可，卻實也達(dá)到了一旦完工后事無憂的成效哦。
4.2 組件衍生過程的綜合思想
從Function到Smart Clip再到FlashMX Components，這是一個進(jìn)化與不斷提煉的過程，雖然從功能與實現(xiàn)效果及效率上它們是日漸發(fā)展，但不管從形式上如何區(qū)別這些內(nèi)容之間的差異，從本質(zhì)上來說它們的最終目的都是為了“功能再利用”。我們可以從下面組件發(fā)展的流程趨勢圖中顯式的了解這一過程。
功能性函數(shù)
Function
從所需實現(xiàn)功能要求中提取“固定不變的變量”，明確這些變量的意義，清晰實現(xiàn)該項具體要求的方法。
優(yōu)勢：能夠解決某些具體問題
弊?。簩儆陂_發(fā)人員級技術(shù)難度，無用戶界面操作，不具備良好的用戶體驗。
智能剪輯影片
Smart Clip
繼續(xù)延伸“固定不變的變量”提取方式，并在設(shè)計階段提供參數(shù)設(shè)置，讓這些參數(shù)在智能剪輯影片運(yùn)行期進(jìn)行傳遞并起作用。
優(yōu)勢：改進(jìn)用戶體驗，允許用戶自行操作進(jìn)行參數(shù)設(shè)置，將設(shè)計與開發(fā)區(qū)分開來。
弊?。壕幊淘聿⒎敲嫦?qū)ο罂蚣芙Y(jié)構(gòu)。
很難通過變量來捕獲MovieClip的外觀，因而不具備良好的設(shè)計外觀。
Flash組件
FlashMX Components
貫穿提取“固定不變的變量”的思想，不但可以在設(shè)計階段提供參數(shù)設(shè)置，而且還可以在設(shè)計階段就可以根據(jù)提供的參數(shù)預(yù)覽到最后的成品效果。
優(yōu)勢：完美用戶體驗，設(shè)計與應(yīng)用分離，可更改外觀并增強(qiáng)其可設(shè)計性，無限擴(kuò)展性等。
弊?。洪_發(fā)相對較難，開發(fā)階段需考慮因素需全面，周全。
縱觀該演化過程我們可以發(fā)現(xiàn)，組件的發(fā)展是在強(qiáng)調(diào)解決針對性問題的同時不斷的提高用戶體驗的優(yōu)化，以此為基礎(chǔ)并逐步將設(shè)計與開發(fā)兩者相分離，使得大部分不具備擁有開發(fā)編寫函數(shù)或是組件的朋友同樣有機(jī)會利用已經(jīng)現(xiàn)有的組件來解決一些具體的操作。雖然每個過程中都有其利弊的存在，但在每個階段都同樣具備的共性則是“提煉”工作，這一工作是組件開發(fā)過程中首先需完成的也是最為重要的工作之一。我們所述的提煉不光是“固定不變的變量”的提煉，還有設(shè)計開發(fā)思路的提煉，甚至是用戶體驗的提煉等等，因而我們將組件衍生過程的綜合思想歸納為“提煉”兩字似乎也并不顯得太為過份。在以后的組件開發(fā)的章節(jié)內(nèi)容我們還會將此概念更深入的進(jìn)行灌輸，希望每位朋友對此都能夠引起十二分重視。
