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

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

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

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

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

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

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

新建元件，打開“創(chuàng)建新元件”對話框，在名稱后輸入：“基本按鈕”，在行為后選擇：“按鈕”，如圖1所示。單擊“確定”按鈕后，進(jìn)入按鈕元件編輯窗口，如圖2所示。可以看到，對于按鈕元件來說，其對應(yīng)時間軸包括三個狀態(tài)幀（“彈起”、“指針經(jīng)過”和“按下”）以及一個“點擊”幀。

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

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

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

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

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

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

保存。

菜單上，控制

啟用簡單按鈕；則在舞臺上就可以直接測試按鈕效果。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

測試影片，測試按鈕效果。菜單上，文件

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

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

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

網(wǎng)格

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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