邢素萍

0 引言

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

圖1 制作效果圖

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

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

步驟2：?jiǎn)螕簟静迦搿?【新建元件】，新建一個(gè)名為“time1”的MC。

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

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

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

步驟5：把兩個(gè)文本框上下對(duì)齊，如圖3所示：

圖3 做好的“time1”MC

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

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

步驟 7：?jiǎn)螕暨x中場(chǎng)景中的“current”，打開【動(dòng)作】面板，如圖4所示：

圖4 添加腳本代碼

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

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

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

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

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

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

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

2 制作界面

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

圖5 布置場(chǎng)景（部分）

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

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

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

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

圖7 布置場(chǎng)景

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

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

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

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

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

步驟8：?jiǎn)螕暨x中“按鈕”，打開【動(dòng)作】面板，為這個(gè)按鈕添加如下腳本語(yǔ)言：

知識(shí)詳解：

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

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

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

步驟 1：?jiǎn)螕簟疚募?【導(dǎo)入】/【導(dǎo)入到庫(kù)】命令，從外部導(dǎo)入一個(gè)鬧鈴聲音文件。鼠標(biāo)右擊元件庫(kù)中的聲音文件“鬧鈴”聲音文件，在彈出快捷菜單中選【鏈接】一項(xiàng)，如圖10所示：

圖10 選擇聲音文件的【鏈接】選項(xiàng)

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

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

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

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

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

步驟5：?jiǎn)螕簟敖缑妗边@一層的第2幀，按F6鍵插入一個(gè)關(guān)鍵幀，第1幀的內(nèi)容自動(dòng)復(fù)制過來(lái)。

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

圖13 放置“鬧鈴MC”后的場(chǎng)景

在【屬性】對(duì)話框中，將這個(gè)實(shí)例命名為“nao”。

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

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

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

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

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

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

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

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

4 總結(jié)

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

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

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

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