Flash 8.0文本應用小制作——迷你時鐘

邢素萍

0 引言

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

圖1 制作效果圖

1 系統時間的顯示

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

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

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

圖2 設置動態文本框屬性

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

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

圖3 做好的“time1”MC

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

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

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

圖4 添加腳本代碼

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

步驟8 繼續添加如下代碼：

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

步驟9 繼續添加如下代碼：

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

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

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

2 制作界面

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

圖5 布置場景（部分）

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

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

圖6 排列好的“鬧鈴設置”文本框

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

圖7 布置場景

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

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

圖8 “確認”按鈕

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

圖9 放置“確認按鈕”后的場景

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

知識詳解：

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

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

3 設定鬧鈴聲音和添加腳本語言

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

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

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

圖11 設置聲音文件的鏈接屬性

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

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

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

步驟5：單擊“界面”這一層的第2幀，按F6鍵插入一個關鍵幀，第1幀的內容自動復制過來。

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

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

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

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

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

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

圖14 “關閉鬧鈴”按鈕各幀的圖形

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

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

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

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

4 總結

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

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

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

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