Flash 8.0文本應(yīng)用小制作——迷你時鐘

邢素萍

0 引言

本例先制作兩組文本框影片剪輯元件，然后使用靜態(tài)文本框布置場景，并且把文本框影片剪輯安放在合適的位置上。制作了兩個小MC動畫，一個搖擺的鬧鐘一直放置在場景中，另一個喇叭在鬧鈴響的時候顯示擴張、縮小動畫。動畫的實現(xiàn)，通過動作腳本語句控制，首先，通過Date對象獲取系統(tǒng)時間，并通過動態(tài)文本框顯示。當(dāng)設(shè)定了鬧鈴的時候，通過判斷設(shè)定值是否與當(dāng)前時間相吻合，從而決定是否播放鬧鈴聲音和動畫，如圖1所示：

圖1 制作效果圖

1 系統(tǒng)時間的顯示

步驟1：啟動Flash 8.0后，單擊【文件】/【新建】，新建一個Flash文件。單擊【修改】/【文檔】，在影片屬性對話框中，設(shè)置場景的大小為350 px×350px，背景色紫綠色，其他為默認(rèn)值。

步驟2：單擊【插入】/【新建元件】，新建一個名為“time1”的MC。

步驟3：進入“time1”的編輯界面后，用文字工具繪制一個文本框，它將要顯示系統(tǒng)日期。大小注意與場景匹配即可。在文本框被選中狀態(tài)下，在【屬性】設(shè)置對話框中設(shè)定為【動態(tài)文本】，選擇一種字體、字號和字色，選擇顯示方式為【單行】，并在【變量】一欄中給變量命名為“cudate”，如圖 2所示：

圖2 設(shè)置動態(tài)文本框?qū)傩?/p>

步驟4：拷貝復(fù)制一個同樣的文本框，它將用來顯示系統(tǒng)的時間。注意在【屬性】對話框中的設(shè)置，要給它的變量起一個新名字，這里取為“cutime”。

步驟5：把兩個文本框上下對齊，如圖3所示：

圖3 做好的“time1”MC

這就編輯好了“time1”MC，回到主場景，雙擊“圖層 1”，將其重新命名為“系統(tǒng)時間”。

步驟6：按Ctrl＋L鍵打開元件庫，用鼠標(biāo)將做好的MC元件“time1”從元件庫中拖動到場景中。選擇場景中的“time1”，在【屬性】對話框中給這個實例命名為“current”。

步驟 7：單擊選中場景中的“current”，打開【動作】面板，如圖4所示：

圖4 添加腳本代碼

在右邊的程序代碼框中添加如下腳本代碼：

步驟8 繼續(xù)添加如下代碼：

上述語句表示程序運行到第1幀的時候作出一次響應(yīng)。響應(yīng)的動作就是讀取系統(tǒng)的各項時間參數(shù)（時、分、秒、年、月、日），并分別將其賦值給各個變量。

步驟9 繼續(xù)添加如下代碼：

判斷分、秒、月份的位數(shù), 如果位數(shù)等于1時，在前面加0。并分別將時間和日期顯示在“cutime”和“cudate”動態(tài)文本中；最后重新定義一個Date對象。知識詳解：

上述步驟中使用的腳本語句on()語句和onEventClip（）語句響應(yīng)的是不同的對象。on()一般是響應(yīng)鼠標(biāo)事件；onEventClip（）是響應(yīng)一個MC實例。在onEventClip（）語句中，不同參數(shù)的響應(yīng)特點各不相同。例如本例中出現(xiàn)的onEventClip（load）只在動畫導(dǎo)入時響應(yīng)，onEventClip（enterFrame）則表示響應(yīng)的條件是，該MC所在的幀在主時間軸上被播放時。

onClipEvent (load)是指在動畫導(dǎo)入的時候響應(yīng)一次，而且就這一次，除非動畫重新導(dǎo)入，一般用作定義以及初始化一些值等。上面就是在動畫導(dǎo)入后，用new Date語句自定義了一個Date類的對象timedate。onClipEvent (enterFrame)是指主時間軸每運行到該幀時就響應(yīng)一次。讀者不妨可以測試一下上面步驟的效果，可以看到，時間顯示在畫面上了，并且實時跟蹤著系統(tǒng)的當(dāng)前時間。這是因為到目前為止動畫只有一幀，所以動畫停留在第1幀，onClipEvent (enterFrame)中的響應(yīng)動作不斷地執(zhí)行，讀取、賦值、顯示系統(tǒng)的時間。在程序最后用delete語句清除了剛才定義的對象，又立刻重新將它定義，這樣再次響應(yīng) onClipEvent (enterFrame)事件時，相當(dāng)于重新對這個對象賦值了，于是實時地跟蹤了系統(tǒng)的當(dāng)前時間。

2 制作界面

步驟 1：先鎖定“系統(tǒng)時間”這層，在它之上新建一個層“界面”。從外部導(dǎo)入一張鬧鐘的小圖片，在場景中布置靜態(tài)文本，如圖5所示：

圖5 布置場景（部分）

步驟2：在“界面”層，單擊文本工具，然后在【屬性】面板中，選擇文本類型為“輸入文本”，在場景中拖出兩個輸入文本框。

步驟 3：再把“界面”這一層也鎖定，然后新建一層“鬧鈴設(shè)置”。選擇文字工具，場景中分別繪制兩個文本框，調(diào)整大小，與剛才繪制的靜態(tài)文本框匹配，并且進行對齊排列，如圖6所示：

圖6 排列好的“鬧鈴設(shè)置”文本框

步驟4：調(diào)整場景中的文本框位置，如圖7所示：

圖7 布置場景

在“鬧鈴設(shè)置”圖層，選定剛繪制的上面一個文本框，在【屬性】設(shè)置對話框中選擇【輸入文本】一項，選擇顯示方式為【單行】，并在【變量】一欄中給變量命名為“myhours”。步驟 5：同樣的方法，給下面的一個文本框設(shè)定【屬性】，不同的是【變量】一項內(nèi)取為“mymin”。

步驟6：單擊【插入】/【新建元件】，新建一個按鈕元件，命名為“按鈕”。單擊確認(rèn)進入“按鈕”元件編輯場景，制作一個確定按鈕，各幀的圖形如圖8所示（其中按下幀與指針經(jīng)過幀相同）。

圖8 “確認(rèn)”按鈕

步驟7：新建一層“按鈕”。按Ctrl＋L鍵打開元件庫，選擇“按鈕”并拖放到這一層的第 1幀，擺放在界面的下方，如圖 9所示：

圖9 放置“確認(rèn)按鈕”后的場景

步驟8：單擊選中“按鈕”，打開【動作】面板，為這個按鈕添加如下腳本語言：

知識詳解：

【輸入文本】和【動態(tài)文本】的相同點主要是它們都由變量來標(biāo)志它的一些屬性；不同點則主要表現(xiàn)在Input的可讀入性。尤其注意，這兩種文本的變量屬性在動畫中只能唯一。

在制作“確認(rèn)按鈕”的時候，通過兩個填充橢圓疊放在一起，產(chǎn)生陰影效果，被遮住的橢圓填充顏色一般深一些，這樣效果更明顯。另外，使按鈕在不同幀中的圖形不同，這樣隨著鼠標(biāo)的移動和點擊，按鈕有不同的顯示，動態(tài)效果好一些。

3 設(shè)定鬧鈴聲音和添加腳本語言

步驟 1：單擊【文件】/【導(dǎo)入】/【導(dǎo)入到庫】命令，從外部導(dǎo)入一個鬧鈴聲音文件。鼠標(biāo)右擊元件庫中的聲音文件“鬧鈴”聲音文件，在彈出快捷菜單中選【鏈接】一項，如圖10所示：

圖10 選擇聲音文件的【鏈接】選項

步驟2：打開【鏈接屬性】面板，在【鏈接】選項中勾選復(fù)選框，然后在【標(biāo)識符】一欄中輸入“mytimes”，如圖11所示：

圖11 設(shè)置聲音文件的鏈接屬性

步驟3：新建一層名為“code”，單擊選中這層的第1幀，選【窗口】/【開發(fā)面板】/【動作】一項，打開【動作】面板，在程序輸入欄中為幀添加如下代碼：

步驟 4：新建一個MC元件“鬧鈴 mc”，創(chuàng)建一個鬧鈴的動畫。為一個小喇叭變大然后縮小的補間動畫，在第5幀和第10幀都插入一個關(guān)鍵幀，然后把第5幀的小喇叭放大，并創(chuàng)建第1～5幀和第6～10幀的補間動畫，如圖12所示：

圖12 鬧鈴MC第1幀和第5幀的圖形

步驟5：單擊“界面”這一層的第2幀，按F6鍵插入一個關(guān)鍵幀，第1幀的內(nèi)容自動復(fù)制過來。

步驟6：新建一層“鬧鈴”。這一層的第1幀為空白幀，在第2幀插入空白關(guān)鍵幀，然后從元件庫中把剛才創(chuàng)建的“鬧鈴MC”拖放到場景中合適的地方，如圖13所示：

圖13 放置“鬧鈴MC”后的場景

在【屬性】對話框中，將這個實例命名為“nao”。

步驟7：單擊“鬧鈴設(shè)置”這層的第2幀，插入一個關(guān)鍵幀將第1幀的內(nèi)容復(fù)制過來。這層的內(nèi)容就是兩個文本框。在第2幀里，選中上面的一個文本框，在【屬性】設(shè)置框中，將它的類型由【輸入文本】選擇為【動態(tài)文本】類型，并且在【變量】一欄中給變量重新命名為“myhours2”。

步驟8：類似的做法，再將下面那個用來輸入分鐘的文本框作同樣的類型轉(zhuǎn)換，在【變量】一項內(nèi)命名為“mymin2”。步驟9：選中“code”這層的第2幀，插入一個空白關(guān)鍵幀，并為這一幀添加如下腳本：

步驟 10：制作一個用來關(guān)閉鬧鈴的按鈕，各幀中的圖形如圖14所示：

圖14 “關(guān)閉鬧鈴”按鈕各幀的圖形

在“按鈕”這一層的第2幀將它從元件庫中拖放到場景中，取代剛才的確認(rèn)按鈕的位置。然后在“關(guān)閉鬧鈴”按鈕的【動作】面板面板中，為這一幀添加如下腳本：

步驟11：在“系統(tǒng)時間”這層的第2幀插入一個關(guān)鍵幀，將第1幀的內(nèi)容復(fù)制過來。對這個MC實例的文本框不作修改，而要對它的腳本進行修改。修改后的腳本及解釋如下：

以上語句與第 1幀大致相同，但是刪除了第 1幀中的onClipEvent (load)語句，在后面添加了控制聲音播放的語句。

步驟 12：到此為止整個鬧鈴的制作過程全部完成，可以按Ctrl+Enter鍵預(yù)覽效果。

4 總結(jié)

本文通過制作了簡單鬧鈴，它有可以實現(xiàn)顯示時間和鬧鈴的功能。在制作過程中，主要用到了時間Date對象，通過該對象獲取系統(tǒng)時間，并賦值給動態(tài)文本框。對文本框的使用也很頻繁，應(yīng)該熟練掌握文本框的使用，文本有3種類型：靜態(tài)文本、動態(tài)文本和輸入文本。對于后兩種類型的文本，要對其指定變量名，就是上面在【變量】一欄中填入的名字。在后面的 Action編程中對文本的控制都是通過這個變量名來進行的。深入體會理解這類特點和問題，是熟練掌握ActionScript的基礎(chǔ)，讀者可以嘗試制作自己的鬧鐘。

[1]李敏，《Flash 8 中文版實用教程》，[M]北京，機械工業(yè)出版社2009年2月

[2]潘明寒，《Flash 8動畫與交互動畫制作教程》[M]北京，航空航天大學(xué)出版社 2008年1月

[3]林華，姜靈敏，《Flash8.0中文版動畫制作》 [M]廣州，華南理工大學(xué)出版社 2007年8月