第8講 按鈕制作Flash高級商務(wù)動畫設(shè)計(PPT全)(袁野版)

1、q按鈕制作基本方法q旋轉(zhuǎn)按鈕制作q爆炸波音效按鈕制作方法q公共庫中的按鈕q為按鈕添加腳本q掌握按鈕四種幀的含義。q掌握各種按鈕制作的方法和技巧。q掌握公共庫中的按鈕的使用方法。q利用按鈕制作電子琴的方法。q掌握按鈕press/release事件用法。q各種按鈕制作方法和技巧。q按鈕事件中代碼編寫方法。q利用按鈕制作”電子琴”q按鈕事件中代碼編寫方法。q（1）利用按鈕可以實現(xiàn)影片剪輯內(nèi)部的控制、跳轉(zhuǎn)和外部的超級鏈接等。這些功能只有等到講到腳本動畫的時候才能實現(xiàn)，本節(jié)我們主要講解如何去制作不同效果的按鈕，以及按鈕各幀的含義。q（2）在flash cs4中要想得到按鈕可以通過以下三個途徑：q可以調(diào)用

2、flash自帶按鈕（窗口公用庫按鈕）q可以將圖形轉(zhuǎn)換成按鈕（F8）q直接新建按鈕（ctrl+F8）q（3）按鈕和影片剪輯一樣也有自己單獨的時間軸（包括圖層和幀）等。彈起：彈起：按鈕的原始狀態(tài)，也就是鼠標沒有經(jīng)過按鈕上方，也沒有按下時的狀態(tài)。指針經(jīng)過：指針經(jīng)過：當鼠標從按鈕上方經(jīng)過時按鈕的狀態(tài)，鼠標并沒有點擊按鈕。按下：按下：當鼠標在按鈕上并點擊按鈕時的狀態(tài)。點擊：點擊：定義前三個幀中按鈕對象元件的反應(yīng)區(qū)范圍。當鼠標進入此范圍時按鈕才會有反應(yīng)。這個幀中定義的動畫不會顯示出來。缺省情況下，如果不特殊指明按鈕“點擊”幀對應(yīng)的范圍，F(xiàn)lash會自動將按鈕元件在“彈起”幀中對象占用的區(qū)域設(shè)定為反應(yīng)區(qū)。q

3、【實例說明實例說明】q本例完成一個基本按鈕元件的制作，對于按鈕元件三種狀態(tài)使用不同中的幾何狀來實現(xiàn)。q【技術(shù)要點技術(shù)要點】q按鈕元件的制作主要是完成“彈起”、“指針經(jīng)過”和“按下”三個狀態(tài)幀的制作。 q啟動Flash CS4，菜單上，文件另存為，在“另存為”的對話框上，先選擇保存文件的文件夾的位置，在文件名后輸入：基本按鈕.fla，點擊“保存”按鈕。q菜單上，插入新建元件，打開“創(chuàng)建新元件”對話框，在名稱后輸入：“基本按鈕”，在行為后選擇：“按鈕”，如圖1所示。單擊“確定”按鈕后，進入按鈕元件編輯窗口，如圖2所示。可以看到，對于按鈕元件來說，其對應(yīng)時間軸包括三個狀態(tài)幀（“彈起”、“指針經(jīng)過”和

4、“按下”）以及一個“點擊”幀。q單擊“圖層1”對應(yīng)的“彈起”幀，選擇工具箱中的橢圓工具，設(shè)置筆觸顏色為黑色（#000000），填充顏色為藍色（#0000FF），在舞臺上拖動出一個填充圓（半徑為40），并將該填充圓相對于舞臺居中。選擇工具箱中的文本工具，在圓的下方寫上文本：原始狀態(tài)，如圖1所示。q鼠標右鍵單擊“指針經(jīng)過”幀插入空白關(guān)鍵幀，選擇工具箱中的矩形工具，設(shè)置填充色為深黃色（#CC9933），在舞臺上繪制矩形（高和寬均為80），并將該填充矩形相對于舞臺居中。選擇工具箱中的文本工具，在圓的下方寫上文本：鼠標經(jīng)過，如圖2所示。q鼠標右鍵單擊“按下”幀插入空白關(guān)鍵幀，選擇工具箱中的直線工具，在舞

5、臺上繪制一個三角形（元件的寬和高均為80），選擇工具箱中的顏料桶工具，設(shè)置填充色為綠色（#00FF33），對三角形進行填充，并將該填充三角形相對于舞臺居中。選擇工具箱中的文本工具，在圓的下方寫上文本：鼠標按下，如圖3所示。q單擊舞臺左上方“場景1”按鈕，切換到場景編輯窗口，菜單上，窗口庫，打開“庫”面板，將“基本按鈕”元件從庫中拖到到舞臺上，創(chuàng)建一個實例，如圖所示q菜單上，控制測試影片，移動鼠標到按鈕上，再單擊，觀看三種效果。q菜單上，文件保存。q菜單上，控制啟用簡單按鈕；則在舞臺上就可以直接測試按鈕效果。彈起狀態(tài) “指針經(jīng)過”內(nèi)圓旋轉(zhuǎn) “按下”外圓旋轉(zhuǎn) q【實例說明實例說明】q移動鼠標到按鈕

6、上，按鈕中間的圓開始旋轉(zhuǎn)；q單擊鼠標后，按鈕外圈的圓開始旋轉(zhuǎn)。q【技術(shù)要點技術(shù)要點】q分別在“指針經(jīng)過”和“按下”幀中放置影片剪輯元件，從而實現(xiàn)鼠標移動到按鈕之上以及按下后的動畫效果。 q創(chuàng)建圖形元件q創(chuàng)建旋轉(zhuǎn)圖形影片剪輯q創(chuàng)建一個按鈕元件（建個圖層）q定義“彈起”幀q定義“指針經(jīng)過”幀q定義“按下”幀q啟動Flash CS4，菜單上，文件另存為，在“另存為”的對話框上，先選擇保存文件的文件夾的位置，在文件名后輸入：旋轉(zhuǎn)按鈕.fla，點擊“保存”按鈕。q菜單上，插入新建元件，打開“創(chuàng)建新元件”對話框，在名稱后輸入：“中心圓”，行為選擇“影片剪輯”，單擊“確定”按鈕，打開“中心圓”元件編輯窗口；

7、選擇工具箱中的橢圓工具，設(shè)置筆觸顏色為黑色，填充色為彩虹線性漸變色，如圖1所示，按下【Shift】鍵，在舞臺上繪制一個線性漸變填充圓，如圖2所示。q選擇工具箱中的箭頭工具，雙擊圓，同時選中填充部分和邊框部分。在選中對象上單擊右鍵轉(zhuǎn)換為元件，打開“轉(zhuǎn)換為元件”對話框，設(shè)置元件名稱為：circle，行為選擇“圖形”，注冊點為對象中心，單擊“確定”按鈕完成元件的轉(zhuǎn)換。q鼠標右鍵單擊“圖層1”的第6幀插入關(guān)鍵幀。q用鼠標右鍵單擊“圖層1”的第1幀屬性，打開“屬性”面板。創(chuàng)建傳統(tǒng)補間動畫，在“旋轉(zhuǎn)”下拉列表框中選擇“順時針”，然后在右側(cè)的文本框中鍵入旋轉(zhuǎn)次數(shù)2，如圖1所示qq菜單上，窗口庫，打開“庫”面

8、板，在“庫”面板中，在“中心圓”影片剪輯元件上單擊鼠標右鍵直接復制，打開“復制元件”對話框。設(shè)置元件名稱為“外圓”，行為選擇“影片剪輯”，如圖1所示，單擊“確定”按鈕完成復制，即在“庫”中，多了一個“外圓”影片剪輯。q雙擊“庫”面板中的“外圓”影片剪輯元件，打開“外圓”影片剪輯元件編輯窗口。q用鼠標右鍵單擊“圖層1”的第1幀屬性，打開“屬性”面板，在“旋轉(zhuǎn)”下拉列表框中選擇“逆時針” 。qq在庫面板中用鼠標右鍵單擊circle元件直接復制，打開“復制元件”對話框。設(shè)置元件名稱為“out curcle”，行為選擇“圖形”，單擊“確定”按鈕完成復制，即在“庫”中，多了一個“out circle”圖

9、形元件。q在“庫”面板中雙擊out circle圖形元件，打開該元件的編輯窗口。q選擇工具箱中的填充變形工具，在舞臺上的填充圓上單擊，將填充方向旋轉(zhuǎn)180度，如圖1所示。q雙擊舞臺上的填充圓（同時選中填充和邊框線部分），菜單上，窗口變形，打開“變形”面板，設(shè)置縮放比例為110%，如圖2所示。qq雙擊“庫”面板中的“外圓”影片剪輯，打開該元件的編輯窗口。q單擊“圖層1”的第1幀，右擊舞臺上的圓交換元件，打開“交換元件”對話框，單擊out circle元件，如圖1所示，單擊“確定”按鈕，使用out circle圖形元件替換“外圓”影片剪輯中的“circle”元件。同理，第6幀也替換。q菜單上，插入

10、新建元件，打開“創(chuàng)建新元件”對話框，設(shè)置名稱為：“旋轉(zhuǎn)按鈕，行為選擇“按鈕”，單擊“確定”按鈕，打開該元件的編輯窗口。q單擊“彈起”幀，從庫面板中依次將out circle和circle圖形元件拖到舞臺上（分2層），并將它們調(diào)整到舞臺中心，如圖2所示。q圖2創(chuàng)建out circle和circle實例 圖3創(chuàng)建out circle和“中心圓”實例q鼠標右鍵單擊“指針經(jīng)過”幀插入空白關(guān)鍵幀，從庫面板中依次將out circle圖形元件和“中心圓”影片剪輯元件拖動到舞臺上。并將它們調(diào)整到舞臺中心，如圖3所示。qq鼠標右鍵單擊“按下”幀插入空白關(guān)鍵幀，從庫面板中依次將“外圓”和circle元件拖動到舞

11、臺上。并將它們調(diào)整到舞臺中心。q菜單上，編輯編輯文檔，切換到文檔編輯窗口（場景窗口）。從庫面板中將“旋轉(zhuǎn)按鈕”影片剪輯元件拖動到舞臺上，創(chuàng)建一個實例。q菜單上，控制測試影片，測試按鈕效果。q菜單上，文件保存。q移動鼠標到按鈕上，按鈕周圍出現(xiàn)一圈一圈的爆炸波。q在“爆炸按鈕”元件的基礎(chǔ)上，創(chuàng)建帶有聲音效果的按鈕。將鼠標移動到按鈕上，以及在按下鼠標時，都會發(fā)出不同聲音效果。 q使用移動動畫創(chuàng)建爆炸波影片剪輯元件，然后在按鈕的“指針經(jīng)過”幀中添加該影片剪輯元件的實例。 q分別在“指針經(jīng)過”幀和“按下”幀中添加聲音效果。 q創(chuàng)建一個“爆炸波”的影片剪輯，三個幀當中三個幀當中可可以以放置動態(tài)的影片剪輯。

12、放置動態(tài)的影片剪輯。q創(chuàng)建一個按鈕（個圖層）q定義“彈起”幀q定義“指針經(jīng)過”幀q定義“按下”幀q定義“指針經(jīng)過”幀和“按下”幀的聲音q啟動Flash CS4，菜單上，文件另存為，在“另存為”的對話框上，先選擇保存文件的文件夾的位置，在文件名后輸入：爆炸按鈕.fla，點擊“保存”按鈕。q菜單上，插入新建元件，打開“創(chuàng)建新元件”對話框，在名稱后輸入：“爆炸波”，在行為后選擇：“影片剪輯”。單擊“確定”按鈕后，進入按鈕元件編輯窗口。q菜單上，視圖網(wǎng)格編輯網(wǎng)格，打開“網(wǎng)格”對話框。設(shè)置網(wǎng)格間距大小為10px10px,并選中“顯示網(wǎng)格” 復選框，如圖1所示。q單擊“確定”按鈕，關(guān)閉“網(wǎng)格”對話框，在舞

13、臺上顯示網(wǎng)格線，如圖2所示。qq在舞臺右上角的“縮放比例”下拉列表框中鍵入300，從而將舞臺放大到300%，如圖1所示。q選擇工具箱中的箭頭工具，設(shè)置筆觸顏色為紅色，在舞臺上繪制通過舞臺中心的多條直線段，如圖2所示。q選擇工具箱中的橢圓工具，設(shè)置筆觸顏色為無，填充顏色為綠色，以舞臺中心繪制一個小的填充圓，如圖1所示。q繼續(xù)使用橢圓工具，設(shè)置筆觸顏色為黑色，填充顏色為無，繪制一個以舞臺中心為圓心的稍大一些的空心圓，如圖2所示q選擇工具箱中的箭頭工具，單擊中間的填充圓，按下【Delete】鍵，將之刪除，依次單擊外圓之外的線段，按下【Delete】鍵，將之刪除；雙擊外圓，按下【Delete】鍵，將之

14、刪除；此時舞臺上僅剩下如圖1所示的圖形。q選擇工具箱中的箭頭工具，在舞臺上拖動出一個矩形框，同時選中舞臺上的所有對象。菜單上，插入轉(zhuǎn)換為元件，打開“轉(zhuǎn)換為元件”對話框，設(shè)置名稱為“波紋”，行為選擇“圖形”，注冊點選中心如圖2所示q用鼠標右鍵單擊“圖層1”的第12幀插入關(guān)鍵幀，并將舞臺大小縮小到100%。q選擇工具箱中的箭頭工具，單擊選中第12幀對應(yīng)舞臺上的波紋實例，菜單上，窗口變形，打開“變形”面板，設(shè)置縮放比例為1000%，打【Enter】鍵。q用鼠標右鍵單擊“圖層1”的第1幀創(chuàng)建補間動畫，創(chuàng)建從第1幀至第12幀之間的動畫。此時時間軸如圖1所示。q單擊“圖層1”的第12幀，然后使用箭頭工具單

15、擊舞臺上的波紋實例，菜單上，窗口屬性，打開“屬性”對話框（與舞臺左下角點擊“屬性”按鈕打開“屬性”對話框一樣）；在“顏色”后下拉列表框中選擇Alpha，并設(shè)置Alpha值為10%，如圖2所示.q菜單上，插入新建元件，打開“創(chuàng)建新元件”對話框，設(shè)置新元件名稱為“爆炸按鈕”，行為選擇“按鈕”，單擊“確定”按鈕，打開元件編輯窗口。q單擊“彈起”幀，選擇工具箱中的橢圓工具，設(shè)置筆觸顏色為黑色，填充顏色為無，按下【Enter】鍵的同時在舞臺上繪制一個直徑為60的圓，如圖1所示。q用鼠標右鍵單擊“指針經(jīng)過”幀插入空白關(guān)鍵幀。q菜單上，窗口庫，打開庫面板，將庫中的“波紋”影片剪輯元件拖動到舞臺上，調(diào)整其位置

16、，使其與舞臺中心對齊，如圖2所示q用鼠標右鍵單擊“按下”幀插入空白關(guān)鍵幀。q選擇工具箱中的橢圓工具，設(shè)置筆觸顏色為無，填充顏色為灰色（#66666），在舞臺上繪制一個無邊框的灰色填充圓，直徑為60，如圖1所示q單擊時間軸窗口左下方的“插入圖層”按鈕，在“圖層1”之上新建“圖層2”。q單擊“圖層2”的“彈起”幀，選擇工具箱中的文本工具，在舞臺上添加文本對象“Touch”,如圖2所示。q單擊舞臺左上方的“場景1”按鈕切換到場景編輯窗口。從庫面板中將“爆炸按鈕”拖動到舞臺上，創(chuàng)建它的一個實例。q菜單上，控制測試影片，測試按鈕效果。q菜單上，文件保存。q【實例說明】【實例說明】在“爆炸按鈕”元件的基礎(chǔ)

17、上，創(chuàng)建帶有聲音效果的按鈕。將鼠標移動到按鈕上，以及在按下鼠標時，都會發(fā)出不同聲音效果。q【技術(shù)要點】【技術(shù)要點】導入已有影片文件中的元件；修改導入的按鈕元件，分別在“指針經(jīng)過”幀和“按下”幀中添加聲音效果。q啟動Flash，菜單上，文件另存為，在“另存為”的對話框上，先選擇保存文件的文件夾的位置，在文件名后輸入：音效按鈕.fla，點擊“保存”按鈕。q菜單上，文件以庫打開，打開“以庫打開”對話框，選擇先前創(chuàng)建的“爆炸按鈕”影片文件，單擊“打開”，將“爆炸按鈕”影片以庫的形式打開。q從庫面板中將“爆炸按鈕”按鈕元件拖動到“音效按鈕”影片面的舞臺上，關(guān)閉爆炸按鈕庫面板。菜單上，窗口庫，打開本文檔的

18、庫面板。q在庫面板中用鼠標右鍵單擊“爆炸按鈕”按鈕元件重命名，此時元件名稱處于編輯狀態(tài)，更名元件名稱為“音效按鈕” 。q在庫面板中雙擊“音效按鈕”元件圖標，打開該元件編輯窗口。q在已有的圖層之上新建一個“聲音”圖層q分別用鼠標右鍵單擊“聲音”圖層的“指針經(jīng)過”和“按下”幀插入空白關(guān)鍵幀。q菜單上，窗口公用庫Sounds，打開“公用庫”聲音為面板。q單擊“聲音”圖層的“指針經(jīng)過”幀，從公用庫面板中將名為Cloth Rip的聲音元件拖動到舞臺上，從而為鼠標經(jīng)過按鈕上的狀態(tài)添加聲音效果。q單擊“聲音”圖層的“按下”幀，從公用庫面板中將名為Brick Drops的聲音元件拖到到舞臺上，從而為鼠標按下的狀態(tài)添加聲音效果。q單擊舞臺左上方的“場景1”按鈕，切換到場景編輯窗口。在場景對應(yīng)的舞臺上，已經(jīng)有一個“音效