第8講 按鈕制作Flash高級(jí)商務(wù)動(dòng)畫(huà)設(shè)計(jì)(PPT全)(袁野版)

FLASH商務(wù)應(yīng)用

八、按鈕制作本節(jié)課主要內(nèi)容按鈕制作基本方法旋轉(zhuǎn)按鈕制作爆炸波音效按鈕制作方法公共庫(kù)中的按鈕為按鈕添加腳本一、本節(jié)課【目的】掌握按鈕四種幀的含義。掌握各種按鈕制作的方法和技巧。掌握公共庫(kù)中的按鈕的使用方法。利用按鈕制作電子琴的方法。掌握按鈕press/release事件用法。二、本節(jié)課【重點(diǎn)】

各種按鈕制作方法和技巧。按鈕事件中代碼編寫(xiě)方法。利用按鈕制作”電子琴”三、本節(jié)課【難點(diǎn)】

按鈕事件中代碼編寫(xiě)方法。按鈕（1）利用按鈕可以實(shí)現(xiàn)影片剪輯內(nèi)部的控制、跳轉(zhuǎn)和外部的超級(jí)鏈接等。這些功能只有等到講到腳本動(dòng)畫(huà)的時(shí)候才能實(shí)現(xiàn)，本節(jié)我們主要講解如何去制作不同效果的按鈕，以及按鈕各幀的含義。（2）在flashcs4中要想得到按鈕可以通過(guò)以下三個(gè)途徑：可以調(diào)用flash自帶按鈕（窗口—公用庫(kù)—按鈕）可以將圖形轉(zhuǎn)換成按鈕（F8）直接新建按鈕（ctrl+F8）（3）按鈕和影片剪輯一樣也有自己?jiǎn)为?dú)的時(shí)間軸（包括圖層和幀）等。四、實(shí)例1—基本按鈕三個(gè)狀態(tài)彈起：按鈕的原始狀態(tài)，也就是鼠標(biāo)沒(méi)有經(jīng)過(guò)按鈕上方，也沒(méi)有按下時(shí)的狀態(tài)。指針經(jīng)過(guò)：當(dāng)鼠標(biāo)從按鈕上方經(jīng)過(guò)時(shí)按鈕的狀態(tài)，鼠標(biāo)并沒(méi)有點(diǎn)擊按鈕。按下：當(dāng)鼠標(biāo)在按鈕上并點(diǎn)擊按鈕時(shí)的狀態(tài)。點(diǎn)擊：定義前三個(gè)幀中按鈕對(duì)象元件的反應(yīng)區(qū)范圍。當(dāng)鼠標(biāo)進(jìn)入此范圍時(shí)按鈕才會(huì)有反應(yīng)。這個(gè)幀中定義的動(dòng)畫(huà)不會(huì)顯示出來(lái)。缺省情況下，如果不特殊指明按鈕“點(diǎn)擊”幀對(duì)應(yīng)的范圍，F(xiàn)lash會(huì)自動(dòng)將按鈕元件在“彈起”幀中對(duì)象占用的區(qū)域設(shè)定為反應(yīng)區(qū)。四、實(shí)例1—【實(shí)例說(shuō)明】及【技術(shù)要點(diǎn)】

【實(shí)例說(shuō)明】本例完成一個(gè)基本按鈕元件的制作，對(duì)于按鈕元件三種狀態(tài)使用不同中的幾何狀來(lái)實(shí)現(xiàn)。【技術(shù)要點(diǎn)】按鈕元件的制作主要是完成“彈起”、“指針經(jīng)過(guò)”和“按下”三個(gè)狀態(tài)幀的制作。課堂示例1:關(guān)鍵步驟啟動(dòng)FlashCS4，菜單上，文件

另存為，在“另存為”的對(duì)話框上，先選擇保存文件的文件夾的位置，在文件名后輸入：基本按鈕.fla，點(diǎn)擊“保存”按鈕。菜單上，插入

新建元件，打開(kāi)“創(chuàng)建新元件”對(duì)話框，在名稱(chēng)后輸入：“基本按鈕”，在行為后選擇：“按鈕”，如圖1所示。單擊“確定”按鈕后，進(jìn)入按鈕元件編輯窗口，如圖2所示?？梢钥吹剑瑢?duì)于按鈕元件來(lái)說(shuō)，其對(duì)應(yīng)時(shí)間軸包括三個(gè)狀態(tài)幀（“彈起”、“指針經(jīng)過(guò)”和“按下”）以及一個(gè)“點(diǎn)擊”幀。

課堂示例1:關(guān)鍵步驟單擊“圖層1”對(duì)應(yīng)的“彈起”幀，選擇工具箱中的橢圓工具，設(shè)置筆觸顏色為黑色（#000000），填充顏色為藍(lán)色（#0000FF），在舞臺(tái)上拖動(dòng)出一個(gè)填充圓（半徑為40），并將該填充圓相對(duì)于舞臺(tái)居中。選擇工具箱中的文本工具，在圓的下方寫(xiě)上文本：原始狀態(tài)，如圖1所示。鼠標(biāo)右鍵單擊“指針經(jīng)過(guò)”幀

插入空白關(guān)鍵幀，選擇工具箱中的矩形工具，設(shè)置填充色為深黃色（#CC9933），在舞臺(tái)上繪制矩形（高和寬均為80），并將該填充矩形相對(duì)于舞臺(tái)居中。選擇工具箱中的文本工具，在圓的下方寫(xiě)上文本：鼠標(biāo)經(jīng)過(guò)，如圖2所示。鼠標(biāo)右鍵單擊“按下”幀

插入空白關(guān)鍵幀，選擇工具箱中的直線工具，在舞臺(tái)上繪制一個(gè)三角形（元件的寬和高均為80），選擇工具箱中的顏料桶工具，設(shè)置填充色為綠色（#00FF33），對(duì)三角形進(jìn)行填充，并將該填充三角形相對(duì)于舞臺(tái)居中。選擇工具箱中的文本工具，在圓的下方寫(xiě)上文本：鼠標(biāo)按下，如圖3所示。

課堂示例1:關(guān)鍵步驟單擊舞臺(tái)左上方“場(chǎng)景1”按鈕，切換到場(chǎng)景編輯窗口，菜單上，窗口

庫(kù)，打開(kāi)“庫(kù)”面板，將“基本按鈕”元件從庫(kù)中拖到到舞臺(tái)上，創(chuàng)建一個(gè)實(shí)例，如圖所示菜單上，控制

測(cè)試影片，移動(dòng)鼠標(biāo)到按鈕上，再單擊，觀看三種效果。菜單上，文件

保存。

菜單上，控制

啟用簡(jiǎn)單按鈕；則在舞臺(tái)上就可以直接測(cè)試按鈕效果。

五、實(shí)例2—旋轉(zhuǎn)按鈕彈起狀態(tài)“指針經(jīng)過(guò)”內(nèi)圓旋轉(zhuǎn)“按下”外圓旋轉(zhuǎn)五、實(shí)例2—【實(shí)例說(shuō)明】【實(shí)例說(shuō)明】移動(dòng)鼠標(biāo)到按鈕上，按鈕中間的圓開(kāi)始旋轉(zhuǎn)；單擊鼠標(biāo)后，按鈕外圈的圓開(kāi)始旋轉(zhuǎn)?！炯夹g(shù)要點(diǎn)】分別在“指針經(jīng)過(guò)”和“按下”幀中放置影片剪輯元件，從而實(shí)現(xiàn)鼠標(biāo)移動(dòng)到按鈕之上以及按下后的動(dòng)畫(huà)效果。五、實(shí)例2—【創(chuàng)作步驟】創(chuàng)建圖形元件創(chuàng)建旋轉(zhuǎn)圖形影片剪輯創(chuàng)建一個(gè)按鈕元件（建２個(gè)圖層）定義“彈起”幀定義“指針經(jīng)過(guò)”幀定義“按下”幀課堂示例2:關(guān)鍵步驟啟動(dòng)FlashCS4，菜單上，文件

另存為，在“另存為”的對(duì)話框上，先選擇保存文件的文件夾的位置，在文件名后輸入：旋轉(zhuǎn)按鈕.fla，點(diǎn)擊“保存”按鈕。菜單上，插入

新建元件，打開(kāi)“創(chuàng)建新元件”對(duì)話框，在名稱(chēng)后輸入：“中心圓”，行為選擇“影片剪輯”，單擊“確定”按鈕，打開(kāi)“中心圓”元件編輯窗口；選擇工具箱中的橢圓工具，設(shè)置筆觸顏色為黑色，填充色為彩虹線性漸變色，如圖1所示，按下【Shift】鍵，在舞臺(tái)上繪制一個(gè)線性漸變填充圓，如圖2所示。

課堂示例2:關(guān)鍵步驟選擇工具箱中的箭頭工具，雙擊圓，同時(shí)選中填充部分和邊框部分。在選中對(duì)象上單擊右鍵

轉(zhuǎn)換為元件，打開(kāi)“轉(zhuǎn)換為元件”對(duì)話框，設(shè)置元件名稱(chēng)為：circle，行為選擇“圖形”，注冊(cè)點(diǎn)為對(duì)象中心，單擊“確定”按鈕完成元件的轉(zhuǎn)換。鼠標(biāo)右鍵單擊“圖層1”的第6幀

插入關(guān)鍵幀。用鼠標(biāo)右鍵單擊“圖層1”的第1幀

屬性，打開(kāi)“屬性”面板。創(chuàng)建傳統(tǒng)補(bǔ)間動(dòng)畫(huà)，在“旋轉(zhuǎn)”下拉列表框中選擇“順時(shí)針”，然后在右側(cè)的文本框中鍵入旋轉(zhuǎn)次數(shù)2，如圖1所示

課堂示例2:關(guān)鍵步驟菜單上，窗口

庫(kù)，打開(kāi)“庫(kù)”面板，在“庫(kù)”面板中，在“中心圓”影片剪輯元件上單擊鼠標(biāo)右鍵

直接復(fù)制，打開(kāi)“復(fù)制元件”對(duì)話框。設(shè)置元件名稱(chēng)為“外圓”，行為選擇“影片剪輯”，如圖1所示，單擊“確定”按鈕完成復(fù)制，即在“庫(kù)”中，多了一個(gè)“外圓”影片剪輯。雙擊“庫(kù)”面板中的“外圓”影片剪輯元件，打開(kāi)“外圓”影片剪輯元件編輯窗口。用鼠標(biāo)右鍵單擊“圖層1”的第1幀

屬性，打開(kāi)“屬性”面板，在“旋轉(zhuǎn)”下拉列表框中選擇“逆時(shí)針”。

課堂示例2:關(guān)鍵步驟在庫(kù)面板中用鼠標(biāo)右鍵單擊circle元件

直接復(fù)制，打開(kāi)“復(fù)制元件”對(duì)話框。設(shè)置元件名稱(chēng)為“outcurcle”，行為選擇“圖形”，單擊“確定”按鈕完成復(fù)制，即在“庫(kù)”中，多了一個(gè)“outcircle”圖形元件。在“庫(kù)”面板中雙擊outcircle圖形元件，打開(kāi)該元件的編輯窗口。選擇工具箱中的填充變形工具，在舞臺(tái)上的填充圓上單擊，將填充方向旋轉(zhuǎn)180度，如圖1所示。雙擊舞臺(tái)上的填充圓（同時(shí)選中填充和邊框線部分），菜單上，窗口

變形，打開(kāi)“變形”面板，設(shè)置縮放比例為110%，如圖2所示。

課堂示例2:關(guān)鍵步驟雙擊“庫(kù)”面板中的“外圓”影片剪輯，打開(kāi)該元件的編輯窗口。單擊“圖層1”的第1幀，右擊舞臺(tái)上的圓

交換元件，打開(kāi)“交換元件”對(duì)話框，單擊outcircle元件，如圖1所示，單擊“確定”按鈕，使用outcircle圖形元件替換“外圓”影片剪輯中的“circle”元件。同理，第6幀也替換。菜單上，插入

新建元件，打開(kāi)“創(chuàng)建新元件”對(duì)話框，設(shè)置名稱(chēng)為：“旋轉(zhuǎn)按鈕，行為選擇“按鈕”，單擊“確定”按鈕，打開(kāi)該元件的編輯窗口。單擊“彈起”幀，從庫(kù)面板中依次將outcircle和circle圖形元件拖到舞臺(tái)上（分2層），并將它們調(diào)整到舞臺(tái)中心，如圖2所示。圖2創(chuàng)建outcircle和circle實(shí)例

圖3創(chuàng)建outcircle和“中心圓”實(shí)例鼠標(biāo)右鍵單擊“指針經(jīng)過(guò)”幀

插入空白關(guān)鍵幀，從庫(kù)面板中依次將outcircle圖形元件和“中心圓”影片剪輯元件拖動(dòng)到舞臺(tái)上。并將它們調(diào)整到舞臺(tái)中心，如圖3所示。

課堂示例2:關(guān)鍵步驟鼠標(biāo)右鍵單擊“按下”幀

插入空白關(guān)鍵幀，從庫(kù)面板中依次將“外圓”和circle元件拖動(dòng)到舞臺(tái)上。并將它們調(diào)整到舞臺(tái)中心。菜單上，編輯

編輯文檔，切換到文檔編輯窗口（場(chǎng)景窗口）。從庫(kù)面板中將“旋轉(zhuǎn)按鈕”影片剪輯元件拖動(dòng)到舞臺(tái)上，創(chuàng)建一個(gè)實(shí)例。菜單上，控制

測(cè)試影片，測(cè)試按鈕效果。菜單上，文件

保存。六、實(shí)例3、４—爆炸按鈕及音效按鈕六、實(shí)例3、４—【實(shí)例說(shuō)明】移動(dòng)鼠標(biāo)到按鈕上，按鈕周?chē)霈F(xiàn)一圈一圈的爆炸波。在“爆炸按鈕”元件的基礎(chǔ)上，創(chuàng)建帶有聲音效果的按鈕。將鼠標(biāo)移動(dòng)到按鈕上，以及在按下鼠標(biāo)時(shí)，都會(huì)發(fā)出不同聲音效果。六、實(shí)例3、４—【技術(shù)要點(diǎn)】使用移動(dòng)動(dòng)畫(huà)創(chuàng)建爆炸波影片剪輯元件，然后在按鈕的“指針經(jīng)過(guò)”幀中添加該影片剪輯元件的實(shí)例。分別在“指針經(jīng)過(guò)”幀和“按下”幀中添加聲音效果。六、實(shí)例3、４—【創(chuàng)作步驟】創(chuàng)建一個(gè)“爆炸波”的影片剪輯，三個(gè)幀當(dāng)中可以放置動(dòng)態(tài)的影片剪輯。創(chuàng)建一個(gè)按鈕（３個(gè)圖層）定義“彈起”幀定義“指針經(jīng)過(guò)”幀定義“按下”幀定義“指針經(jīng)過(guò)”幀和“按下”幀的聲音課堂示例3、4:關(guān)鍵步驟啟動(dòng)FlashCS4，菜單上，文件

另存為，在“另存為”的對(duì)話框上，先選擇保存文件的文件夾的位置，在文件名后輸入：爆炸按鈕.fla，點(diǎn)擊“保存”按鈕。菜單上，插入

新建元件，打開(kāi)“創(chuàng)建新元件”對(duì)話框，在名稱(chēng)后輸入：“爆炸波”，在行為后選擇：“影片剪輯”。單擊“確定”按鈕后，進(jìn)入按鈕元件編輯窗口。菜單上，視圖

網(wǎng)格

編輯網(wǎng)格，打開(kāi)“網(wǎng)格”對(duì)話框。設(shè)置網(wǎng)格間距大小為10px×10px,并選中“顯示網(wǎng)格”復(fù)選框，如圖1所示。單擊“確定”按鈕，關(guān)閉“網(wǎng)格”對(duì)話框，在舞臺(tái)上顯示網(wǎng)格線，如圖2所示。

課堂示例2:關(guān)鍵步驟在舞臺(tái)右上角的“縮放比例”下拉列表框中鍵入300，從而將舞臺(tái)放大到300%，如圖1所示。

選擇工具箱中的箭頭工具，設(shè)置筆觸顏色為紅色，在舞臺(tái)上繪制通過(guò)舞臺(tái)中心的多條直線段，如圖2所示。

課堂示例2:關(guān)鍵步驟選擇工具箱中的橢圓工具，設(shè)置筆觸顏色為無(wú)，填充顏色為綠色，以舞臺(tái)中心繪制一個(gè)小的填充圓，如圖1所示。繼續(xù)使用橢圓工具，設(shè)置筆觸顏色為黑色，填充顏色為無(wú)，繪制一個(gè)以舞臺(tái)中心為圓心的稍大一些的空心圓，如圖2所示

課堂示例2:關(guān)鍵步驟選擇工具箱中的箭頭工具，單擊中間的填充圓，按下【Delete】鍵，將之刪除，依次單擊外圓之外的線段，按下【Delete】鍵，將之刪除；雙擊外圓，按下【Delete】鍵，將之刪除；此時(shí)舞臺(tái)上僅剩下如圖1所示的圖形。選擇工具箱中的箭頭工具，在舞臺(tái)上拖動(dòng)出一個(gè)矩形框，同時(shí)選中舞臺(tái)上的所有對(duì)象。菜單上，插入

轉(zhuǎn)換為元件，打開(kāi)“轉(zhuǎn)換為元件”對(duì)話框，設(shè)置名稱(chēng)為“波紋”，行為選擇“圖形”，注冊(cè)點(diǎn)選中心如圖2所示

用鼠標(biāo)右鍵單擊“圖層1”的第12幀

插入關(guān)鍵幀，并將舞臺(tái)大小縮小到100%。選擇工具箱中的箭頭工具，單擊選中第12幀對(duì)應(yīng)舞臺(tái)上的波紋實(shí)例，菜單上，窗口

變形，打開(kāi)“變形”面板，設(shè)置縮放比例為1000%，打【Enter】鍵。

課堂示例2:關(guān)鍵步驟用鼠標(biāo)右鍵單擊“圖層1”的第1幀

創(chuàng)建補(bǔ)間動(dòng)畫(huà)，創(chuàng)建從第1幀至第12幀之間的動(dòng)畫(huà)。此時(shí)時(shí)間軸如圖1所示。單擊“圖層1”的第12幀，然后使用箭頭工具單擊舞臺(tái)上的波紋實(shí)例，菜單上，窗口

屬性，打開(kāi)“屬性”對(duì)話框（與舞臺(tái)左下角點(diǎn)擊“屬性”按鈕打開(kāi)“屬性”對(duì)話框一樣）；在“顏色”后下拉列表框中選擇Alpha，并設(shè)置Alpha值為10%，如圖2所示.

課堂示例2:關(guān)鍵步驟菜單上，插入

新建元件，打開(kāi)“創(chuàng)建新元件”對(duì)話框，設(shè)置新元件名稱(chēng)為“爆炸按鈕”，行為選擇“按鈕”，單擊“確定”按鈕，打開(kāi)元件編輯窗口。單擊“彈起”幀，選擇工具箱中的橢圓工具，設(shè)置筆觸顏色為黑色，填充顏色為無(wú)，按下【Enter】鍵的同時(shí)在舞臺(tái)上繪制一個(gè)直徑為60的圓，如圖1所示。用鼠標(biāo)右鍵單擊“指針經(jīng)過(guò)”幀

插入空白關(guān)鍵幀。菜單上，窗口

庫(kù)，打開(kāi)庫(kù)面板，將庫(kù)中的“波紋”影片剪輯元件拖動(dòng)到舞臺(tái)上，調(diào)整其位置，使其與舞臺(tái)中心對(duì)齊，如圖2所示

課堂示例2:關(guān)鍵步驟用鼠標(biāo)右鍵單擊“按下”幀

插入空白關(guān)鍵幀。選擇工具箱中的橢圓工具，設(shè)置筆觸顏色為無(wú)，填充顏色為灰色（#66666），在舞臺(tái)上繪制一個(gè)無(wú)邊框的灰色填充圓，直徑為60，如圖1所示單擊時(shí)間軸窗口左下方的“插入圖層”按鈕，在“圖層1