邢素萍

巧用 Flash8 制作動(dòng)態(tài)按鈕

邢素萍

利用 Flash 8.0 的按鈕實(shí)例制作一個(gè)帶有一系列動(dòng)態(tài)矩形按鈕的動(dòng)畫，實(shí)現(xiàn)了按鈕移動(dòng)動(dòng)畫。使用了按鈕實(shí)例的移動(dòng)、編輯文字變形動(dòng)畫、利用按鈕產(chǎn)生動(dòng)畫。所用的主要知識(shí)點(diǎn)有：鈕對(duì)鼠標(biāo)事件的響應(yīng)控制，包括鼠標(biāo)的滑過(guò)、滑離、按下等。通過(guò)動(dòng)作控制語(yǔ)句實(shí)現(xiàn)對(duì)按鈕動(dòng)畫過(guò)程的調(diào)用。

按鈕實(shí)例；按鈕移動(dòng)；腳本程序；電影剪輯元件

0 引言

本實(shí)例先創(chuàng)建一個(gè)能夠纏身文字變形動(dòng)畫的按鈕實(shí)例，然后復(fù)制多個(gè)該實(shí)例，創(chuàng)建按鈕移動(dòng)的動(dòng)畫，最后利用腳本程序控制這個(gè)動(dòng)畫。本實(shí)例的擴(kuò)展應(yīng)用為利用按鈕對(duì)鼠標(biāo)的響應(yīng)來(lái)使按鈕變化的動(dòng)畫。

效果如圖1所示：

圖1 動(dòng)畫效果圖

1 按鈕制作

步驟 1 執(zhí)行【文件】/【新建】命令新建一個(gè) Flash 文件。再執(zhí)行【修改】/【文檔】命令，在彈出的對(duì)話框中修改舞臺(tái)工作區(qū)的大小為 600 px×400px。

步驟 2 執(zhí)行【插入】/【新建元件】命令，建立一個(gè)新的元件。在【創(chuàng)建新元件】窗口中輸入元件名稱“button”，同時(shí)選擇【按鈕】選項(xiàng)，如圖1所示。最后單擊【確定】按鈕進(jìn)入元件編輯窗口。

步驟 3 在時(shí)間軸窗口選擇“點(diǎn)擊”幀，按 F6 鍵增加關(guān)鍵幀，在繪圖工具箱中選擇矩形工具，在場(chǎng)景中繪制一個(gè)矩形，填充色任意。

步驟 4 選中整個(gè)矩形，執(zhí)行菜單命令【窗口】/【開發(fā)面板】/【信息】，打開【信息】面板，在【信息】面板中修改參數(shù)設(shè)置：將 X 值設(shè)置為-30，Y 值設(shè)置為-8，寬度 W 設(shè)置為 60，高度 H 設(shè)置為 16，這樣就完成了按鈕的制作，如圖2圖3所示：

圖2 在【創(chuàng)建新元件】窗口中選中【按鈕】選項(xiàng)

圖3 按鈕及其信息面板

2 按鈕動(dòng)畫制作

步驟 1 執(zhí)行【插入】/【新建元件】命令，建立一個(gè)新的電影剪輯元件。在新建元件對(duì)話框中輸入元件名稱“move”，同時(shí)選擇【影片剪輯】選項(xiàng)，然后單擊【確定】按鈕。

步驟2 選擇工具欄中矩形工具，在工具欄下方將填充色設(shè)為無(wú)色，邊框顏色為藍(lán)色，在第 1 幀中繪制一個(gè)矩形框。

步驟3 選中整個(gè)矩形，在【信息】面板中修改參數(shù)設(shè)置：寬度設(shè)置為 60，高度設(shè)置為 16，X 值設(shè)置為-30，Y 值設(shè)置為-8，如圖3 所示：

步驟4 選擇時(shí)間軸中的第2幀，單擊鼠標(biāo)右鍵，從彈出菜單中選擇【插入關(guān)鍵幀】選項(xiàng)，加入一個(gè)關(guān)鍵幀，第1幀的內(nèi)容自動(dòng)復(fù)制過(guò)來(lái)。

步驟5 選擇繪圖工具箱中的顏料桶工具，改變填充顏色為黃色，將第2幀中的矩形框的內(nèi)部填充為黃色。

步驟 6 選中第 3 幀，按 F6 鍵插入關(guān)鍵幀，選擇繪圖工具箱中的矩形工具，在第 3幀再另外繪制一個(gè)藍(lán)色矩形框，在【信息】面板中設(shè)置寬度為 30，高度為 16，X 值為60，Y 值為-8，則第 3 幀的視圖中共有兩個(gè)矩形，如圖4、圖5所示：

圖4 矩形及其信息面板

圖5 畫一個(gè)小矩形

步驟 7 復(fù)制新建的黑色矩形框?qū)ο?，在?4幀到第 7幀中分別加入關(guān)鍵幀，每一幀中都復(fù)制出一個(gè)矩形框，并設(shè)置新復(fù)制出的矩形框的 X 坐標(biāo)位置依次為 120、180、240、300，Y 坐標(biāo)不變，這樣在第 7 幀處就有 5 個(gè)矩形框了，如圖6所示：

圖6 復(fù)制得到5個(gè)小矩形

步驟 8 在時(shí)間軸窗口中選擇第 11 幀，單擊鼠標(biāo)右鍵加入關(guān)鍵幀，在場(chǎng)景中刪除右側(cè)的5個(gè)小矩形，選擇繪圖工具欄中的文字工具，在視圖中單擊鼠標(biāo)左鍵，輸入下列文字“MOVIE”。

步驟 9 選擇所有文字，按 Ctrl+F3 鍵，調(diào)出文字屬性對(duì)話框，在對(duì)話框中修改文字屬性，如圖7所示：

圖7 文字屬性窗口

步驟 10 選擇文字對(duì)象，連續(xù)執(zhí)行兩次【修改】/【分離】命令，將文字對(duì)象打碎。分別選擇每一個(gè)字母，通過(guò)【信息】面板把字母分別定位到原來(lái)5個(gè)矩形框所在的位置上，并適當(dāng)調(diào)整字母的大小，結(jié)果如圖8所示：

圖8 調(diào)整后的字母

步驟 11 在時(shí)間軸窗口單擊第 7 幀，然后在對(duì)應(yīng)的【屬性】設(shè)置面板中打開【補(bǔ)間】下拉列表框，從列表框中選擇【形狀】選項(xiàng)，建立兩個(gè)關(guān)鍵幀之間的補(bǔ)間動(dòng)畫，完成由矩形對(duì)象到文字對(duì)象的變換，變化過(guò)程中的第9幀如圖9所示：

圖9 第 9幀的圖像

步驟 12 在第 13 幀按 F6 鍵插入一個(gè)關(guān)鍵幀，然后全選所有的文字，在工具欄填充色參數(shù)設(shè)置欄中選擇黃色作為填充色，同時(shí)單擊選中第 1 個(gè)矩形內(nèi)部的填充色，按 Delete鍵將其刪除，如圖10所示：

圖10 第 13 幀的圖像

步驟 13 鼠標(biāo)左擊第 1 幀，在菜單中選擇【窗口】/【開發(fā)面板】/【動(dòng)作】命令，調(diào)出【動(dòng)作】面板，在面板中為這幀添加一句腳本：

stop();

步驟 14 同樣為第 11 幀和第 13 幀添加與第 1 幀相同的幀腳本。

步驟 15 鼠標(biāo)單擊時(shí)間軸上的第 2 幀，然后在對(duì)應(yīng)的【屬性】設(shè)置面板中為這一幀添加幀標(biāo)簽“move”，如圖11所示：

圖11 添加幀標(biāo)簽“move”

步驟 16 鼠標(biāo)單擊時(shí)間軸上的第 12 幀，先按 F7 鍵插入一個(gè)空白關(guān)鍵幀，然后在對(duì)應(yīng)的【屬性】設(shè)置面板中為這一幀添加幀標(biāo)簽“down”，此時(shí)的時(shí)間軸如圖12 所示：

圖12 “move”電影剪輯元件的時(shí)間軸

知識(shí)詳解

以上完成了按鈕動(dòng)畫的制作。其中，主要用到了繪圖和填充工具，并且制作了有關(guān)按鈕的元件，以便后面制作過(guò)程中調(diào)用。

首先，制作了按鈕元件，這個(gè)對(duì)象只有“點(diǎn)擊”一幀，主要用于設(shè)定按鈕作用范圍。然后，還制作了 move電影剪輯元件，對(duì)應(yīng)鼠標(biāo)移動(dòng)到按鈕上方以及按鈕被點(diǎn)擊時(shí)的動(dòng)畫效果。當(dāng)鼠標(biāo)移動(dòng)到按鈕上方時(shí)，按鈕中間將會(huì)出現(xiàn)黃色填充色，從按鈕中還會(huì)彈出幾個(gè)矩形，然后矩形對(duì)象再變成文字對(duì)象，可供點(diǎn)擊。當(dāng)按下鼠標(biāo)時(shí)，按鈕中的填充色將會(huì)消失，文字對(duì)象也由黑色變成黃色。

3 完成動(dòng)畫制作

步驟 1 選擇【編輯】/【編輯文檔】命令，或單擊元件編輯窗口左上角的場(chǎng)景名稱，返回到場(chǎng)景編輯舞臺(tái)。

步驟 2 單擊選擇“圖層 1”，然后單擊時(shí)間軸窗口中圖層選單中的添加圖層的圖標(biāo)按鈕，在“圖層1”的上方添加一個(gè)“圖層 2”。在“圖層 2”的上方添加“圖層 3”。選擇 3個(gè)圖層的第 10 幀，按 F5 鍵，插入幀。

步驟 3 在“圖層 1”中選擇第 1 幀，從【庫(kù)】面板中將“move”元件拖曳到場(chǎng)景中，通過(guò)【信息】面板將其定位于（50,100）。用鼠標(biāo)選中該對(duì)象，選擇【窗口】/【屬性】命令，在【實(shí)例名稱】欄中輸入名稱“move1”。

步驟 4 再?gòu)摹編?kù)】面板中將“button”元件拖曳到場(chǎng)景中，通過(guò)【信息】面板也將其定位于（50,100）。

步驟 5 單擊選中“button”按鈕元件，按 F9 鍵打開【動(dòng)作】面板，在面板中添加如下腳本語(yǔ)句：

on (rollOver){

tellTarget ("move1"){

gotoAndPlay("move");

}

}

on (press){

tellTarget ("move1"){

gotoAndPlay("down");

}

}

on (rollOut){

tellTarget ("move1"){

gotoAndStop(1);

}

}

本實(shí)例使用的腳本程序中，主要有以下幾個(gè)重要的代碼。ellTarget：后面的參數(shù)為所要操作的電影剪輯，然后加入對(duì)此電影剪輯進(jìn)行的操作程序。gotoAndStop：表示當(dāng)前影片剪輯跳到所給參數(shù)的幀上去，然后停止播放

步驟 6 單擊選中“圖層 1”的第 1 幀，右擊鼠標(biāo)在快捷菜單中選擇“拷貝幀”命令，然后在“圖層 2”的第1幀上右擊鼠標(biāo)，在快捷菜單中選擇“粘貼幀”命令。

步驟 7 在“圖層 2”的第 5 幀插入關(guān)鍵幀，選中第 5幀上的圖像，選擇【窗口】/【屬性】命令，修改其高度為200，如圖13 所示：

圖13 向下移動(dòng)圖像

步驟 8 單擊第 5 幀上的“move” 電影剪輯元件實(shí)例，在對(duì)應(yīng)【屬性】設(shè)置面板中將這個(gè)實(shí)例命名為“move2”。

步驟9 單擊第1幀，在對(duì)應(yīng)的【屬性】設(shè)置面板中打開【補(bǔ)間】下拉列表框，從列表框中選擇【動(dòng)作】選項(xiàng)，建立兩個(gè)關(guān)鍵幀之間的補(bǔ)間動(dòng)畫。

步驟 10 在第 5 幀上，單擊選中這幀的按鈕元件，打開【動(dòng)作】面板，在【動(dòng)作】面板中已有為“圖層1”上的按鈕編寫的腳本，在這里只需要將其中的“move1”替換為“move2”即可。

步驟 11 類似的方法，在“圖層 3”上創(chuàng)建第 6 幀到第10 幀的過(guò)渡動(dòng)畫，同時(shí)將第 10 幀上的“move”電影剪輯元件實(shí)例命名為“move”，同時(shí)將其對(duì)應(yīng)腳本語(yǔ)句中的“move1”替換為“move3”。

步驟 12 在時(shí)間軸窗口中用鼠標(biāo)左鍵單擊“圖層 3”中的第 10 幀，從菜單中選擇【窗口】/【開發(fā)面板】/【動(dòng)作】選項(xiàng)，在【動(dòng)作】面板中加入控制語(yǔ)句“stop()”。按鈕動(dòng)畫的時(shí)間軸窗口如圖14所示：

圖14 按鈕動(dòng)畫的時(shí)間軸窗口

步驟 13 單擊選擇“圖層 2”，然后單擊時(shí)間軸窗口中圖層選單中的添加圖層的圖標(biāo)按鈕，在“圖層2”上方添加一個(gè)“圖層 3”，改名為“背景”，并將其移動(dòng)到時(shí)間軸窗口的最底層。

步驟 14 在“背景”圖層中繪制場(chǎng)景布局，導(dǎo)入了一幅圖畫，這個(gè)動(dòng)畫就完成了。最終效果如圖15所示：

圖15 最終效果圖

4 總結(jié)

本文實(shí)現(xiàn)了按鈕實(shí)例的移動(dòng)動(dòng)畫，腳本程序制作了一個(gè)帶有一系列動(dòng)態(tài)按鈕的動(dòng)畫，所用的主要知識(shí)點(diǎn)有：鈕對(duì)鼠標(biāo)事件的響應(yīng)控制，包括鼠標(biāo)的滑過(guò)、滑離、按下等。

通過(guò)動(dòng)作控制語(yǔ)句實(shí)現(xiàn)對(duì)按鈕動(dòng)畫過(guò)程的調(diào)用。使用的腳本命令有：Tell Target，gotoAndStop。通過(guò)本文的介紹，讀者可以嘗試制作波動(dòng)的文字按鈕動(dòng)畫。

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

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

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

Using Flash8 to Make Dynamic Button

Xing Suping
(School of Computer and Software, Nanjing Institute of Industry Technology, Nanjing 210046, China)

In this paper, by using Flash 8 button makes an example of a series of dynamic rectangle button animation. It realizes the animation button. Using the mobile of button instance and editing text deformation animation produce animation. The main knowledge points is the control response button on the mouse events, including the mouse slipping, sliding off and pressing. The button animation procedure calls through the action of control statements.

Button; Button Moves; Examples of Script; Film Editing Component

TP311

A

1007-757X(2014)02-0051-03

2014.11.20)

邢素萍(1957-)，南京工業(yè)職業(yè)技術(shù)學(xué)院，教授，研究方向：軟件開發(fā)，計(jì)算機(jī)輔助設(shè)計(jì)，南京，210046