6.1 設(shè)置組件圖標(biāo)

　　原先我們?cè)谥谱魍瓿蒚oolTip組件以后，Library中的組件圖標(biāo)是以顯示，這是組件的默認(rèn)樣式。假若Library庫(kù)中使用的組件較多，而這些組件的圖標(biāo)樣式又都是默認(rèn)樣式而無(wú)區(qū)別，這樣便會(huì)極容易造成誤認(rèn)后果，因而不利用影片的設(shè)計(jì)制作。還有一點(diǎn)是，每位組件開(kāi)發(fā)人員都希望自己編寫(xiě)的組件擁有自己的“個(gè)性化因素”，別人只要看見(jiàn)你組件的外觀就知道這組件是由你編寫(xiě)制作，這就是所謂的“組件品牌”，即：類(lèi)似于C++ Builder或是Delphi的第三方組件開(kāi)發(fā)商一樣，好的組件開(kāi)發(fā)商都已擁有自己得一套品牌內(nèi)容了。幸運(yùn)的是，F(xiàn)lashMX已經(jīng)輕易的解決了該問(wèn)題，我們只需完成簡(jiǎn)單的步驟就可將原來(lái)的組件圖標(biāo)樣式改換成自己想替換成的自定義圖標(biāo)樣式，也讓該組件的圖標(biāo)個(gè)性化。

　　首先，我們回顧一下原來(lái)ToolTip的Library的內(nèi)容，如下圖81所示，組件圖標(biāo)樣式無(wú)“特殊性”。

圖81 默認(rèn)組件圖標(biāo)樣式的Library

　　然后我們?cè)僭赑hotoShop或是FireWork中繪制一個(gè)擁有自己特色的自定義圖標(biāo)樣式。當(dāng)然，它的尺寸有所限制，寬×高為24×20象素。完成繪制以后將它們導(dǎo)出來(lái)Gif或是Png圖形格式并保存。

圖82 尺寸為24×20象素的自定義圖標(biāo)

　　我們?cè)俜祷谾lashMX的Library庫(kù)中，在Library中創(chuàng)建一個(gè)名稱(chēng)為“FCustomIcons”的文件夾（切記：此處名稱(chēng)不可另行更換改變）。

圖83 在Library中創(chuàng)建名為FcustomIcons的文件夾

　　然后我們按下Ctrl+R將原先制作完畢的用戶(hù)自定義圖標(biāo)文件導(dǎo)入Library中，將它拖

　　放至FcustomIcons文件夾目錄下，然后將它的名稱(chēng)更換為與組件名一樣的名字（我們的實(shí)例中為toolTip）。

圖84 FcustomIcons文件夾中的自定義圖標(biāo)文件

　　現(xiàn)在我們已經(jīng)完成了設(shè)置自定義組件圖標(biāo)的操作，如果現(xiàn)在的Library中ToolTip圖標(biāo)還沒(méi)有馬上更換成你所希望改換成的圖標(biāo)樣式，那請(qǐng)你暫時(shí)將Library關(guān)閉，然后再打開(kāi)就可以觀看到如圖84所演示的效果了。

　　6.2利用UI界面美化參數(shù)設(shè)置

　　到此各位對(duì)組件的Parameters參數(shù)設(shè)置面板的運(yùn)用應(yīng)該已十分的明了了，通過(guò)對(duì)Component的Parameters面板的參數(shù)設(shè)定可以設(shè)置一些組件的系統(tǒng)變量。但有些組件的參數(shù)內(nèi)容十分的煩多，而且參數(shù)類(lèi)型也十分的煩多，因而普通的Parameters參數(shù)設(shè)置面板就會(huì)使參數(shù)設(shè)置顯得十分的不方便（如圖85所示，在Parameters面板中對(duì)某些參數(shù)進(jìn)行設(shè)置需要滾動(dòng)條拖動(dòng)以后才可進(jìn)行，顯得十分的不易操作。而且參數(shù)設(shè)置后的樣式也十分的不直觀）。

圖85 普通的Parameters面板
　　為了解決此類(lèi)問(wèn)題，F(xiàn)lashMX的Component支持了Parameters面板的Custom UI界面的更改操作。如圖86所示，我們將原來(lái)普通的Parameters面板的參數(shù)設(shè)置更換成了Custom UI的面板，在參數(shù)設(shè)置功能相同的基礎(chǔ)上，不僅在界面上作以了極大的美化功能，而且在參數(shù)設(shè)置的直觀性上作了極大的改進(jìn)。試想，在普通面板里進(jìn)行布爾類(lèi)型的Ture或是False進(jìn)行選擇顯得直觀性強(qiáng)些還是在Custom UI面板里用CheckBox進(jìn)行選中或不選中來(lái)顯得更為的直觀？

圖86 與圖85參數(shù)設(shè)置相同功能的Custom UI界面

　　下面我們就將制作一個(gè)fBrowserWindow的FlashMX組件，并使該組件的Parameters面板用Custom UI樣式進(jìn)行參數(shù)設(shè)置與顯示來(lái)闡述“利用UI界面美化參數(shù)設(shè)置”的用戶(hù)體驗(yàn)內(nèi)容。而在fBrowserWindow的制作過(guò)程中我們還將涉及到前面ToolTip制作過(guò)程中一些組件編寫(xiě)中未曾談及的內(nèi)容與技術(shù)。

　　fBrowserWindow組件的制作

　　依舊如前面組件制作方式一般，首先我們需要明確的是該組件需要實(shí)現(xiàn)的功能，即：想利用fBrowserWindow達(dá)到什么樣的目的。經(jīng)過(guò)提煉總結(jié)后得出此問(wèn)題的答案：我們需要將組件綁定到一個(gè)按鈕，可以使此按鈕按下以后就彈出一個(gè)指定地址的窗口，而此窗口可以由我們進(jìn)行自定義，就如一般的JavaScript的openwindow的彈出窗口一般，我們可以根據(jù)自己的需要設(shè)置是否有工具欄、狀態(tài)欄、地址欄，窗口的寬與高的大小等等內(nèi)容，還可以設(shè)置在指定的時(shí)間內(nèi)窗口自行關(guān)閉等。

　　如ToolTip組件的制作方式雷同，制作fBrowserWindow的第一步我們創(chuàng)建了一個(gè)MC，并定義該MC的參數(shù)設(shè)置的內(nèi)容，如下圖87所示：

圖87 fBrowserWindow(MC)的參數(shù)設(shè)置

　　我們?cè)俨榭匆幌耭BrowserWindow(MC)的內(nèi)容，可以發(fā)現(xiàn)它的場(chǎng)景內(nèi)容與ToolTip的場(chǎng)景內(nèi)容也是相似，只包含了一個(gè)Action層和一個(gè)fBrowserWindowIcon層（圖標(biāo)顯示層），如下圖88所示：

圖88 fBrowserWindow的場(chǎng)景內(nèi)容

　　不同于ToolTip組件，在該fBrowserWindow組件中我們?yōu)閯?chuàng)建的類(lèi)添加了屬性、方法等內(nèi)容，這使得我們的組件擁有更強(qiáng)的可操作性。如果大家回顧ToolTip組件的運(yùn)用方式或許可以發(fā)現(xiàn)ToolTip只能在Parameters參數(shù)面板中設(shè)置參數(shù)。但在fBrowserWindow中由于為fBrowserWindowClass添加了屬性與方法，我們就可以在Flash的Action面板中用代碼操作的方式來(lái)設(shè)置相應(yīng)的參數(shù)使之fBrowserWindow組件生效了。

　　例如：我們?cè)赑arameters面板中設(shè)置了toolbar、status、centered為T(mén)rue，而將url設(shè)置為http://www.macromedia.com，width與height設(shè)置為300和400，以此來(lái)進(jìn)行新窗口彈開(kāi)。

　　以上的參數(shù)設(shè)置狀況現(xiàn)在就可以在Action通過(guò)輸入如下代碼實(shí)現(xiàn)同樣效果：

//-----------------------------------------------------------------------------

//此處的fBrowserWindow為fBrowserWindow組件在場(chǎng)景中的實(shí)體名

//-----------------------------------------------------------------------------

with (fBrowserWindow) {

centered = true;

status = true;

toolbar = true;

width = 300;

height = 400;

url = "http://www.5dmedia.com";

}

　　fBrowserWindow組件UI參數(shù)設(shè)置界面的制作

　　完成了組件的編寫(xiě)需要繼續(xù)進(jìn)行的就是Custom UI的制作，而這要求我們首先得另行再創(chuàng)建一個(gè)新文件，我們將該文件保存為UI.fla。

　　Custom UI的場(chǎng)景大小需設(shè)置為寬為406高為72象素，這是由于Parameters面板的顯示大小只能容納如此面積的大小，我們?cè)赨I場(chǎng)景中設(shè)置了一些文件框及一些復(fù)選框，如下圖89所示：

圖89 UI的場(chǎng)景內(nèi)容

　　這將是關(guān)鍵的一步，我們將設(shè)置場(chǎng)景中的相應(yīng)文本框的屬性，而這些屬性將會(huì)讓我們明白UI的運(yùn)行機(jī)制。

圖90 curl文本框?qū)傩?/center>

　　由于我們將會(huì)在Parameters面板中輸入?yún)?shù)內(nèi)容，因而我們將文本框的類(lèi)型設(shè)置為Input Text，并將Var設(shè)置為xch.curl、xch.cheight、xch.cwidth等內(nèi)容，如圖90所示。值得注意的是這里我們必須加上x(chóng)ch這個(gè)名稱(chēng)，其實(shí)xch相當(dāng)于“exchange”的意思，即UI界面中的參數(shù)與主文件中的組件進(jìn)行一個(gè)參數(shù)傳遞，而xch的功能就是保存當(dāng)前組件參數(shù)的對(duì)象。恰恰因?yàn)槿绱?，我們需在UI文件中創(chuàng)建一個(gè)新層xch，同時(shí)再創(chuàng)建一個(gè)新的內(nèi)容為空的MC，將它拖放至xch層，并將此Mc的實(shí)體名命名為xch，如圖89所示。

　　為了確保數(shù)據(jù)輸入的正確性，我們?cè)谠O(shè)置Width、Height等數(shù)字類(lèi)型的文本內(nèi)容時(shí)我們可以將Character中的字符類(lèi)型范圍設(shè)置成Numerals(0-9)，這樣我們?cè)谠擃?lèi)文本框中只能輸入0-9之間的數(shù)字了。

　　在此還需注意的一點(diǎn)是文本框變量名的設(shè)定，我們需要強(qiáng)調(diào)的是，此處的文本框變量并非隨意擬定，請(qǐng)大家回顧一下“圖87 fBrowserWindow(MC)的參數(shù)設(shè)置”的內(nèi)容，那里我們?yōu)閒BrowserWindow組件設(shè)置了許多的變量，而我們得注意的是，在此我們?cè)O(shè)置的文本框變量名應(yīng)當(dāng)與前面fBrowserWindow組件中的Variable對(duì)應(yīng)起來(lái)，這樣才能做到UI的變量與fBrowserWindow中的變量等同起來(lái)。

　　相似的，由于CheckBox沒(méi)有Var的參數(shù)設(shè)置內(nèi)容，因而我們將場(chǎng)景中CheckBox的實(shí)體名設(shè)置為相應(yīng)的Variable的名稱(chēng)，如ccentered、cfullscreen等，然后在各個(gè)CheckBox的Change Handler參數(shù)設(shè)置中設(shè)置為GetValues（此處的GetValue為我們自定義的函數(shù)）。

//-----------------------------------------------------------------------------

//利用GetValues函數(shù)來(lái)獲取場(chǎng)景中CheckBox的Value值

//即：場(chǎng)景中的CheckBox哪些為T(mén)rue哪里為False

//-----------------------------------------------------------------------------

fscommand("allowscale", "false");

function GetValues(sender) {

xch[sender._name] = sender.getValue();

}

//-----------------------------------------------------------------------------

//利用onEnterFrame事件來(lái)保存UI參數(shù)值的設(shè)置

//即：每次組件參數(shù)設(shè)置后如進(jìn)行再設(shè)置需保存前次組件參數(shù)設(shè)置的內(nèi)容

//-----------------------------------------------------------------------------

function onEnterFrame() {

for (i in this) {

this[i].setValue(xch[i]);

}

delete this.onEnterFrame;

}

　　在完成上述內(nèi)容的操作后我們將UI.fla發(fā)布成影片格式，然后再次打開(kāi)fbrowserWindow進(jìn)行操作。

　　我們右鍵點(diǎn)擊fbrowserWindow組件，再次打開(kāi)Component Definition面板，在Parameters項(xiàng)目?jī)?nèi)容下面我們會(huì)看到Custom UI參數(shù)設(shè)置（如圖91所示），我們當(dāng)點(diǎn)set按鈕將會(huì)調(diào)出Custom UI選擇面板，如圖92所示。

圖91 Custom UI參數(shù)設(shè)置

圖92 Custom UI參數(shù)選擇面板

　　為了以后的操作方便，我們將Type類(lèi)型選擇為Custom UI with .swf file embedded in類(lèi)型（即UI面板植入該組件中），而將Display選擇為Display in Property Inspector，然后我們按下Browser選擇我們剛才制作的UI.swf影片，至此我們就完成了組件UI參數(shù)面板界面的設(shè)置工作。

　　為了檢驗(yàn)我們的成果，我們將fbrowserWindow組件拖至場(chǎng)景的某一個(gè)按鈕上，然后點(diǎn)擊選中該組件，此時(shí)按下Ctrl+F3調(diào)出參數(shù)設(shè)置面板我們可以發(fā)現(xiàn)原來(lái)的Parameters的面板已經(jīng)被替換成我們剛才制作的UI界面了，如圖93所示。

圖93 fbrowserWindow的UI界面

　　到此刻我們已經(jīng)基本學(xué)會(huì)了UI參數(shù)面板的制作與運(yùn)用了，但是由于在此實(shí)例中我們只運(yùn)用了Text與CheckBox，因而還有許多功能未曾涉及，例子RadioBox等，所以我們必須仔細(xì)理解UI的運(yùn)行機(jī)制，清楚UI影片與組件之間的參數(shù)是利用xch來(lái)保存與傳遞的，這一點(diǎn)的理解非常重要。

　　6.3利用LivePreview迅速查看組件效果

　　在我們完成ToolTip與fbrowserWindow組件后也許會(huì)意識(shí)到一個(gè)不引人注意的問(wèn)題，這兩個(gè)組件均為隱式組件，不同與CheckBox、ListBox或是Scroll等組件一般，它們?cè)谟捌\(yùn)行期在場(chǎng)景中是不顯示的。大家對(duì)它們化碼中初始化操作里的_visiable或許記憶猶新，那么顯式的組件又該如果制作呢？而顯式組件與LivePreview又有何對(duì)應(yīng)關(guān)系呢？我們帶著這些問(wèn)題，帶著我們的思考，帶著疑問(wèn)來(lái)完成本節(jié)的內(nèi)容，相信在你閱讀完該部分內(nèi)容以后這些難題都將會(huì)迎刃而解了。

　　對(duì)于顯式組件的應(yīng)用我們?cè)贔lashMX內(nèi)置組件部分應(yīng)當(dāng)說(shuō)介紹的十分詳實(shí)了，而大家在使用那些組件的時(shí)候是否曾有所感覺(jué)：在完成對(duì)組件的參數(shù)設(shè)置以后，組件無(wú)法立即顯示出參數(shù)更改后的狀態(tài)，而只能通過(guò)Ctrl+Enter發(fā)布影片進(jìn)行效果查看，這不僅為我們影片制作增添了許多手續(xù)，而且還隨之帶來(lái)了許多時(shí)間上的浪費(fèi)。于是我們產(chǎn)生了如此的想法：是否有一種途徑能夠讓我們?cè)趯?duì)組件完成參數(shù)設(shè)置以后，該組件在場(chǎng)景中會(huì)立即產(chǎn)生反映而將組件的外觀等內(nèi)容馬上顯示為影片測(cè)試時(shí)的效果狀態(tài)。萬(wàn)幸的是，該問(wèn)題的答案是肯定的，組件的LivePreview為我們提供了此項(xiàng)功能。下面我們就帶領(lǐng)大家對(duì)于這里提及的幾個(gè)問(wèn)題一同繼續(xù)前往FlashMX組件的天堂，通過(guò)制作一款新的顯式組件AxisGrid來(lái)分析顯式組件與LivePreview的結(jié)合運(yùn)用的功能。

　　AxisGrid組件的制作

　　相信大家對(duì)于AxisGrid這個(gè)詞的概念還未曾了解，對(duì)于AxisGrid組件的功能更是莫提。為了不至于讓大家產(chǎn)生莫名其妙的感覺(jué)我們將AxisGrid組件欲實(shí)現(xiàn)的目標(biāo)作以簡(jiǎn)要描述：我們都清楚在FlashMX中繪制網(wǎng)格線是件十分麻煩的事情，AxisGrid組件就是為了解決該問(wèn)題而編寫(xiě)制作的。我們只需將AxisGrid組件拖放至場(chǎng)景中，設(shè)置組件的相應(yīng)參數(shù)，即可使組件在影片中顯示相應(yīng)行與列的網(wǎng)格表格。

　　如ToolTip與fbrowserWindow組件的制作過(guò)程一般，我們先在影片中創(chuàng)建一個(gè)MovieClip，并定義它的Component Definition，如下圖94所示：

圖94 AxisGrid的Component Definition

　　在此我們?yōu)锳xisGrid組件設(shè)置了類(lèi)似于坐標(biāo)軸顏色、網(wǎng)絡(luò)線顏色、網(wǎng)格寬度、網(wǎng)格高度等變量，這些變量中包括了前面我們未曾用過(guò)的Color類(lèi)型。

　　然后我們又為該組件的Linkage設(shè)置為AxisGrid。

　　顯然上述幾個(gè)步驟應(yīng)該是組件編寫(xiě)的必要操作了，希望大家能夠經(jīng)過(guò)這里反復(fù)的闡述培養(yǎng)出自己良好的組件編寫(xiě)習(xí)慣。

　　接下來(lái)的操作是為了讓我們?cè)诮M件應(yīng)用時(shí)能夠有一個(gè)顯式的界面外觀，我們又創(chuàng)建了一個(gè)名為BoundingBox的MovieClip，它包括了一個(gè)大小為200×200象素的正方形色塊，如下圖95所示，它將為該組件起到網(wǎng)格邊界判定的作用。

圖95 BoundingBox的內(nèi)容

　　我們將該MovieClip拖放至AxisGrid中，并設(shè)置該MC場(chǎng)景中的實(shí)體名稱(chēng)也為BoundingBox。

　　然后在AxisGrid中再新建一層Class層，用以放置我們編寫(xiě)的代碼內(nèi)容。

　　由于AxisGrid組件的代碼編寫(xiě)部分的方式與fbrowserWindow基本無(wú)異，并且其中的代碼內(nèi)容亦無(wú)太復(fù)雜難懂之處，因而我們不作太多分析。需要注意的一點(diǎn)是，在redraw函數(shù)中我們通過(guò)with(this)來(lái)引用對(duì)象進(jìn)行操作，而此對(duì)象就是組件其本身。介于組件的實(shí)物內(nèi)容中包含了一個(gè)boundingBox的對(duì)象，因而該對(duì)象即成為了網(wǎng)格繪制的邊界線的起終點(diǎn)了。

　　在完成了該組件以后，我們想在場(chǎng)景中運(yùn)用該組件，并且渴望達(dá)到在場(chǎng)景中更改參數(shù)即可更改組件顯示樣式的效果，那么我們即需要來(lái)繼續(xù)下面這些有關(guān)LivePrevie制作與應(yīng)用的操作步驟了。

　　AxisGrid組件LivePreview界面的制作

　　首先我們將AxisGrid.fla文件另存為AxisGrid_lp.fla，然后我們將場(chǎng)景大小設(shè)置為200×200象素大小。

　　接下來(lái)我們將剛才制作的AxisGrid組件從Library中拖放至場(chǎng)景中，由于原先組件的大小也應(yīng)為200×200，因而組件在場(chǎng)景中的位置應(yīng)該與場(chǎng)景大小一致，如下圖96所示。

圖96 AxisGrid的場(chǎng)景內(nèi)容

　　然后我們新建一層ActionScript層，用以輸入代碼以便進(jìn)行操作，其ActionScript層代碼內(nèi)容如下：

//更新參數(shù)事件

function onUpdate() {

AxisGrid.axisColor = xch.axisColor;

AxisGrid.lineColor = xch.lineColor;

AxisGrid.cellW = xch.cellW;

AxisGrid.cellH = xch.cellH;

AxisGrid.xMin = xch.xMin;

AxisGrid.xMax = xch.xMax;

AxisGrid.yMin = xch.yMin;

AxisGrid.yMax = xch.yMax;

AxisGrid.redraw();

}

　　特別注意：如UI界面制作中一樣，在LivePreview中我們?nèi)孕枰獂ch（exchange）來(lái)收集參數(shù)設(shè)置中傳遞過(guò)來(lái)的變量，以便通過(guò)傳遞過(guò)來(lái)的參數(shù)對(duì)組件進(jìn)行應(yīng)用與更新。而提到更新，LivePreview中又提供了onLoad（組件放置到場(chǎng)景中時(shí)執(zhí)行的事件句柄）、onUpdate（組件參數(shù)更新后所執(zhí)行的事件句柄）來(lái)進(jìn)行相應(yīng)操作。

　　上述代碼通過(guò)xch傳遞參數(shù)變量，再利用onUpdate對(duì)組件更新后作以相應(yīng)的操作，最終完成LivePreview的制作。

　　現(xiàn)在我們就將AxisGrid_lp.fla發(fā)布成影片，等待我們返回組件中進(jìn)行再設(shè)定。

　　現(xiàn)在我們應(yīng)該做的就是返回AxisGrid.fla內(nèi)繼續(xù)我們尚未完全完工的AxisGrid組件的LivePreview的設(shè)定。

　　依舊打開(kāi)的是組件的Component Definition參數(shù)設(shè)置面板，大家應(yīng)該注意到在Custom UI設(shè)定的內(nèi)容下面還有一項(xiàng)Live的設(shè)置項(xiàng)，如下圖97所示：

圖97 AxisGrid的Component Definition中Live的設(shè)置項(xiàng)

　　我們點(diǎn)擊set按鈕彈出參數(shù)設(shè)置對(duì)話(huà)框，在選項(xiàng)Live Preview with .swf file embedded被選中的情況下我們?cè)龠x擇剛才制作完成的AxisGrid_lp.swf，那么現(xiàn)在我們就將可以感受到LivePreview的魅力所在了。

　　現(xiàn)在我們只需要場(chǎng)景中新建一層，然后將AxisGrid從Library中拖放至場(chǎng)景，然后按下Ctrl+F3調(diào)出屬性設(shè)置的Parameters面板進(jìn)行網(wǎng)格設(shè)置，當(dāng)我們進(jìn)行參數(shù)設(shè)置以后場(chǎng)景中立即會(huì)更新組件內(nèi)容而顯示為符合相應(yīng)參數(shù)內(nèi)容的界面樣式，如圖98所示，應(yīng)當(dāng)說(shuō)它與組件發(fā)布成影片后的顯示樣式無(wú)太大差異，對(duì)比圖99所示。

圖98 即設(shè)即顯的AxisGrid組件在場(chǎng)景中的顯示狀態(tài)（LivePreview應(yīng)用）

圖99 AxisGrid組件應(yīng)用發(fā)布成影片后樣式

　　到這，關(guān)于組件LivePreview的內(nèi)容也差不多介紹完畢，而再次起到關(guān)鍵作用的仍有xch的影響，當(dāng)然還不應(yīng)該忘記onUpdate的更新作用哦。相信大家都已經(jīng)急不可耐的想嘗試編寫(xiě)自己的LivePreview的新組件了，現(xiàn)在可以展開(kāi)你的想象力，動(dòng)起你的手指，進(jìn)行我們的全新組件新進(jìn)程了。

　　Icon的設(shè)置、Custom UI界面的制作以及LivePreview組件的深入，上面的幾部分內(nèi)容其實(shí)都還是獨(dú)立的技術(shù)內(nèi)容，將它們分開(kāi)敘述并不是說(shuō)它們?cè)诮M件制作中只能存在其一，我們只是想通過(guò)各部分的剖析讓諸位能夠更完美的理解各部分的內(nèi)容。恰恰相反的是我們以后組件編寫(xiě)過(guò)程中應(yīng)當(dāng)將這些部分完善的結(jié)合起來(lái)，將它們撮合成一個(gè)有機(jī)的整體，讓我們的組件擁有最完美的用戶(hù)體驗(yàn)感覺(jué)。當(dāng)然，這部分的內(nèi)容有待于各位親自去體驗(yàn)其中的樂(lè)趣了。