1、機械工業出版社中等職業教育中等職業教育“十一五十一五”規劃教材規劃教材?電子商務專業電子商務專業機械工業出版社Flash cs5 動畫設計實例教程動畫設計實例教程 目標技能目標技能了解按鈕元件時間軸的4種狀態熟練掌握自建按鈕元件的制作方法能夠利用按鈕元件制作交互動畫熟悉按鈕庫中的按鈕元件，能夠熟練操作按鈕庫了解Flash中的聲音類型能夠熟練地導入聲音文件，能夠編輯聲音文件第第6章章 按鈕制作與聲音設置按鈕制作與聲音設置機械工業出版社中等職業教育中等職業教育“十一五十一五”規劃教材規劃教材?電子商務專業電子商務專業機械工業出版社Flash cs5 動畫設計實例教程動畫設計實例教程 本章目錄本章目

2、錄6.1 6.1 自建按鈕自建按鈕6.2 6.2 利用按鈕庫制作按紐利用按鈕庫制作按紐6.3 Flash6.3 Flash中聲音的控制實例中聲音的控制實例機械工業出版社中等職業教育中等職業教育“十一五十一五”規劃教材規劃教材?電子商務專業電子商務專業機械工業出版社Flash cs5 動畫設計實例教程動畫設計實例教程 本章重點：按鈕元件制作及如何導入聲音文件 本章難點：創建動態按鈕和音效動畫制作機械工業出版社中等職業教育中等職業教育“十一五十一五”規劃教材規劃教材?電子商務專業電子商務專業機械工業出版社Flash cs5 動畫設計實例教程動畫設計實例教程6.1 自建按鈕自建按鈕按鈕元件可以改變動

3、畫的播放順序，控制動畫的播放時間和播放速度，并可以隨時調用電影片段和控制它的屬性，按鈕是交互動畫中的常用對象。按鈕元件的四種狀態是：彈起狀態： 鼠標和按鈕不發生接觸，按鈕處于一般狀態。 機械工業出版社中等職業教育中等職業教育“十一五十一五”規劃教材規劃教材?電子商務專業電子商務專業機械工業出版社Flash cs5 動畫設計實例教程動畫設計實例教程指針經過狀態：鼠標經過按鈕但沒有按下時的狀態。按下狀態：在按鈕按下鼠標時的狀態。點擊狀態：此狀態定義響應鼠標事件的有效區域范圍，且此區域不會顯示在影片中。 機械工業出版社中等職業教育中等職業教育“十一五十一五”規劃教材規劃教材?電子商務專業電子商務專業

4、機械工業出版社Flash cs5 動畫設計實例教程動畫設計實例教程6.1.1 6.1.1 繪制按鈕繪制按鈕創建按鈕元件的方式有以下幾種：創建按鈕元件的方式有以下幾種：1）選擇菜單欄中的）選擇菜單欄中的“插入插入”“新建元件新建元件”命令，直接新建一個按鈕元件，然后進入按命令，直接新建一個按鈕元件，然后進入按鈕元件的編輯模式，對按鈕的每種狀態進行鈕元件的編輯模式，對按鈕的每種狀態進行編輯；編輯；2）在舞臺上畫一個任意形狀的圖形，然后）在舞臺上畫一個任意形狀的圖形，然后選中它，單擊鼠標右鍵，從彈出的快捷菜單選中它，單擊鼠標右鍵，從彈出的快捷菜單中選擇【轉換為元件中選擇【轉換為元件】命令，將它轉換為

5、】命令，將它轉換為按鈕元件，再進入按鈕元件編輯模式編輯按按鈕元件，再進入按鈕元件編輯模式編輯按鈕；鈕；機械工業出版社中等職業教育中等職業教育“十一五十一五”規劃教材規劃教材?電子商務專業電子商務專業機械工業出版社Flash cs5 動畫設計實例教程動畫設計實例教程3）把圖形元件或影片剪輯元件轉換為按鈕元）把圖形元件或影片剪輯元件轉換為按鈕元件。選中圖形元件或影片剪輯元件，單擊鼠件。選中圖形元件或影片剪輯元件，單擊鼠標右鍵，從彈出的快捷菜單中選擇【轉換為標右鍵，從彈出的快捷菜單中選擇【轉換為元件元件】命令，在打開的】命令，在打開的“轉換為元件轉換為元件”對對話框中，將類型修改為按鈕，就將其轉換為

6、話框中，將類型修改為按鈕，就將其轉換為按鈕元件了。按鈕元件了。制作動畫：繪制按鈕制作動畫：繪制按鈕步驟：步驟：1）打開）打開Flash cs5，新建一個，新建一個Flash文檔，設文檔，設置影片尺寸為置影片尺寸為“200px200px”,背景顏色為背景顏色為“白白機械工業出版社中等職業教育中等職業教育“十一五十一五”規劃教材規劃教材?電子商務專業電子商務專業機械工業出版社Flash cs5 動畫設計實例教程動畫設計實例教程色色”，幀頻為，幀頻為“12”。2）選擇）選擇“插入插入” “新建元件新建元件”命令，打命令，打開開“創建新元件創建新元件”對話框，名稱框設為對話框，名稱框設為“按按鈕元件鈕

7、元件”，類型為，類型為“按鈕按鈕”，如圖示。，如圖示。機械工業出版社中等職業教育中等職業教育“十一五十一五”規劃教材規劃教材?電子商務專業電子商務專業機械工業出版社Flash cs5 動畫設計實例教程動畫設計實例教程3）單擊“確定”，進入按鈕元件的編輯模式。4）在按鈕元件編輯模式下，將當前圖層名稱修改為按鈕外觀，單擊第1幀（彈起），選擇工具箱中“橢圓”工具按鈕，設置筆觸顏色為無，填充色為“紅色”。按住Shift鍵，在場景編輯區畫一個無邊框的圓，調整圓的位置，使圓心與中心點對齊。機械工業出版社中等職業教育中等職業教育“十一五十一五”規劃教材規劃教材?電子商務專業電子商務專業機械工業出版社Flas

8、h cs5 動畫設計實例教程動畫設計實例教程5）單擊插入圖層按鈕，新建一個圖層，重新命名為文本。6）單擊文本圖層的第1幀，選擇工具箱中的文本工具按鈕，設置填充色為黑色。在場景中繪制一個文本框，在文本框中輸入文字彈起，調整文字位置，將它置于圓上。7）右鍵單擊按鈕外觀圖層的第2幀（指針經過），從彈出的快捷菜單中選擇【插入關鍵幀】命令。設置工具箱中的填充色為綠色，使用工具箱中的顏料桶工具按鈕，將圖形的填充色改為綠色。機械工業出版社中等職業教育中等職業教育“十一五十一五”規劃教材規劃教材?電子商務專業電子商務專業機械工業出版社Flash cs5 動畫設計實例教程動畫設計實例教程右鍵單擊文本圖層的第2幀

9、，從彈出的快捷菜單中選擇【插入關鍵幀】命令，雙擊文本框，在文本框編輯模式下，修改文本框中的文字為經過。8）右鍵單擊按鈕外觀圖層的第3幀（按下），從彈出的快捷菜單中選擇【插入關鍵幀】命令。設置工具箱中的填充色為藍色，使用工具箱中顏料桶工具按鈕，將圖形的填充色改為藍色。右鍵單擊文本圖層的第3幀，從彈出的快捷菜單中選擇【插入關鍵幀】命令，雙擊文本框，在文本框編輯模式下，修改文本框中的文字為按下。機械工業出版社中等職業教育中等職業教育“十一五十一五”規劃教材規劃教材?電子商務專業電子商務專業機械工業出版社Flash cs5 動畫設計實例教程動畫設計實例教程9）右鍵單擊按鈕外觀圖層的第四幀（點擊），從彈

10、出的快捷菜單中選擇【插入關鍵幀】命令，使用工具箱中的橢圓工具按鈕，重新繪制一個無邊框的黃色的圓，將它蓋住藍色的圓，作為按鈕的有效點擊區。10）單擊返回場景按鈕，回到場景編輯模式。選擇菜單欄“窗口”“庫”命令，打開庫面板，會看到將剛才制作的按鈕元件已經添加到庫中。11）拖到按鈕元件到舞臺，創建一個按鈕元件實例。機械工業出版社中等職業教育中等職業教育“十一五十一五”規劃教材規劃教材?電子商務專業電子商務專業機械工業出版社Flash cs5 動畫設計實例教程動畫設計實例教程12）選擇菜單欄“控制” “啟用簡單按鈕”命令，就可以在編輯區中測試按鈕元件的效果，也可以按【Ctrl】+【Enter】鍵預覽動

11、畫效果。13）選擇菜單欄“文件”“保存文件”命令，將文件命名為“繪制按鈕.fla”。14）選擇菜單欄“文件”“發布”命令，生成“繪制按鈕.swf”。機械工業出版社中等職業教育中等職業教育“十一五十一五”規劃教材規劃教材?電子商務專業電子商務專業機械工業出版社Flash cs5 動畫設計實例教程動畫設計實例教程6.1.2 創建動態按鈕創建動態按鈕為了增加按鈕的動感和交互性，在按鈕的制作過程中還可以為按鈕元件不同的幀添加簡單動畫或者聲音，制作動態按鈕。制作動畫：“飛舞的蝴蝶”動態按鈕。1）打開上節制作的“繪制按鈕.fla”文件。2）選擇菜單欄“窗口”“庫”命令，打開“庫”面板。 機械工業出版社中等

12、職業教育中等職業教育“十一五十一五”規劃教材規劃教材?電子商務專業電子商務專業機械工業出版社Flash cs5 動畫設計實例教程動畫設計實例教程單擊“庫”面板下方的新建元件圖標按鈕，在彈出的“創建新元件”對話框中，設置名稱框為蝴蝶，類型為影片剪輯。3）在蝴蝶影片剪輯的編輯模式，選擇菜單欄“文件”“導入”命令，導入一張蝴蝶圖片，調整圖片至適當大小，調整圖片位置到中心點的左側，雙擊圖層名稱框，修改該圖層名稱為蝴蝶。4）右鍵單擊第30幀，從彈出的快捷菜單中選擇【插入關鍵幀】命令。 機械工業出版社中等職業教育中等職業教育“十一五十一五”規劃教材規劃教材?電子商務專業電子商務專業機械工業出版社Flash

13、 cs5 動畫設計實例教程動畫設計實例教程5）右鍵單擊第1幀，從彈出的快捷菜單中選擇【創建傳統補間】命令。6）在蝴蝶圖層名稱框上單擊鼠標右鍵，從彈出的快捷菜單中選擇【添加引導層】命令。7）選擇工具箱中的鉛筆工具，在引導層第幀處繪制蝴蝶運轉的軌跡，然后再移動蝴蝶圖層中第1幀中的蝴蝶到所繪制軌跡的起點處，移動第30幀中的蝴蝶到所繪制的終點處。機械工業出版社中等職業教育中等職業教育“十一五十一五”規劃教材規劃教材?電子商務專業電子商務專業機械工業出版社Flash cs5 動畫設計實例教程動畫設計實例教程8）單擊編輯元件圖標，在彈出的選項中選擇“按鈕元件”選項。9）在按鈕元件編輯區，選擇插入圖層按鈕，

14、在文本圖層的上面，新建一個圖層，將該圖層命名為蝴蝶飛。10）在蝴蝶飛圖層的第3幀（按下），單擊鼠標右鍵，選擇【插入關鍵幀】命令。機械工業出版社中等職業教育中等職業教育“十一五十一五”規劃教材規劃教材?電子商務專業電子商務專業機械工業出版社Flash cs5 動畫設計實例教程動畫設計實例教程11）選擇菜單欄“窗口”“庫”命令，打開“庫”面板，將蝴蝶影片剪輯拖入到第3幀（按下）中。12）單擊返回場景按鈕，回到場景編輯模式。13）在按鈕元件中做了添加蝴蝶影片剪輯的改動，這種改動會自動對場景中的按鈕元件實例進行更新，所以返回場景后，不用再將庫中改動后的按鈕元件添加到場景中。機械工業出版社中等職業教育中

15、等職業教育“十一五十一五”規劃教材規劃教材?電子商務專業電子商務專業機械工業出版社Flash cs5 動畫設計實例教程動畫設計實例教程14）按【Ctrl】+【Enter】鍵預覽動畫效果。15）選擇菜單欄“文件”“保存文件”命令，將文件命名為“飛舞的蝴蝶.fla”。16）選擇菜單欄“文件”“發布命令”，生成“飛舞的蝴蝶.swf”。機械工業出版社中等職業教育中等職業教育“十一五十一五”規劃教材規劃教材?電子商務專業電子商務專業機械工業出版社Flash cs5 動畫設計實例教程動畫設計實例教程6.2 利用按鈕庫制作按鈕利用按鈕庫制作按鈕6.2.1 介紹按鈕庫介紹按鈕庫Flash自帶了一個按鈕庫，在這

16、個按鈕庫中有許多樣式精美的按鈕。機械工業出版社中等職業教育中等職業教育“十一五十一五”規劃教材規劃教材?電子商務專業電子商務專業機械工業出版社Flash cs5 動畫設計實例教程動畫設計實例教程6.2.2 添加和修改按鈕庫添加和修改按鈕庫如果要將自己制作的按鈕、圖片或影片元件放到公用庫中，也就是說，要在“公用庫”中添加素材，則需要打開Flash cs5的庫文件夾，在庫文件夾中進行添加。一般情況下，庫文件夾的路徑是：c:ProgramFilesMacromediaFlashcs5zh_cnConfigurationLibraries機械工業出版社中等職業教育中等職業教育“十一五十一五”規劃教材規

17、劃教材?電子商務專業電子商務專業機械工業出版社Flash cs5 動畫設計實例教程動畫設計實例教程6.3 FlashFlash中聲音的控制實例中聲音的控制實例6.3.1 介紹介紹FlashFlash中的聲音類型中的聲音類型按鈕元件可以改變動畫的播放順序，控制動畫的播放時間和播放速度，并可以隨時調用電影片段和控制它的屬性，按鈕是交互動畫中的常用對象。機械工業出版社中等職業教育中等職業教育“十一五十一五”規劃教材規劃教材?電子商務專業電子商務專業機械工業出版社Flash cs5 動畫設計實例教程動畫設計實例教程將上節中制作的“按鈕.fla”文件添加到公用庫中。步驟為：1）打開“繪制按鈕.fla”文

18、件。2）選擇菜單欄“文件”“保存”命令，將該文件保存到ProgramFilesMacromediaFlashcs5zh_cnConfigurationLibraries文件夾。3）打開Libraries文件夾。 機械工業出版社中等職業教育中等職業教育“十一五十一五”規劃教材規劃教材?電子商務專業電子商務專業機械工業出版社Flash cs5 動畫設計實例教程動畫設計實例教程4）單擊菜單欄“窗口”“公用庫”命令，在彈出的下級菜單中增加了一個“繪制按鈕”選項。5）單擊“繪制按鈕”選項，就可以像使用公用庫中的其它按鈕一樣，使用該按鈕。6）打開的“庫-繪制按鈕”窗口，直接將其拖入場景使用。機械工業出版社

19、中等職業教育中等職業教育“十一五十一五”規劃教材規劃教材?電子商務專業電子商務專業機械工業出版社Flash cs5 動畫設計實例教程動畫設計實例教程6.3 Flash中聲音的控制實例 6.3.1 6.3.1 介紹介紹flashflash中的聲音類型中的聲音類型 Flash cs5中聲音類型有兩種：事件聲音和數據流聲音。在Flash cs5中，可導入的聲音文件格式有兩類：MP3：MP3具有壓縮的高效性，能使小文件產生高質量的音頻效果，跨平臺性能好。機械工業出版社中等職業教育中等職業教育“十一五十一五”規劃教材規劃教材?電子商務專業電子商務專業機械工業出版社Flash cs5 動畫設計實例教程動畫

20、設計實例教程WAV：是默認的聲音文件，導入的WAV文件既可以是單聲道的，也可以是雙聲道的，該類聲音文件支持不同的采樣率和位分辨率。機械工業出版社中等職業教育中等職業教育“十一五十一五”規劃教材規劃教材?電子商務專業電子商務專業機械工業出版社Flash cs5 動畫設計實例教程動畫設計實例教程6.3.2 導入聲音導入聲音導入一個外部聲音文件到庫中導入一個外部聲音文件到庫中步驟：步驟：打開打開Flash cs5，新建一個，新建一個Flash文檔。文檔。1）選擇菜單欄）選擇菜單欄“文件文件”“導入導入”“導入到庫導入到庫“命令，打開命令，打開“導入到庫導入到庫”對話框。對話框。2）選擇聲音文件，單擊

21、）選擇聲音文件，單擊“打開打開”，就將聲音文，就將聲音文件導入到庫中了。件導入到庫中了。機械工業出版社中等職業教育中等職業教育“十一五十一五”規劃教材規劃教材?電子商務專業電子商務專業機械工業出版社Flash cs5 動畫設計實例教程動畫設計實例教程3）選擇菜單欄“窗口”“庫“命令，打開“庫”面板，會看到剛才導入的聲音文件。4）單擊波形右上方的按鈕，試聽一下效果。機械工業出版社中等職業教育中等職業教育“十一五十一五”規劃教材規劃教材?電子商務專業電子商務專業機械工業出版社Flash cs5 動畫設計實例教程動畫設計實例教程6.3.3 聲音的編輯在“效果”下拉列表框中，可以設置音頻效果：無：不使

22、用任何效果，選擇此項可刪除以前所設置的效果。左聲道： 只有左邊的聲道才會有音效。右聲道： 只有右邊的聲道才會有音效。從左到右淡出： 音效會從左邊的聲道轉移到右邊的聲道。從右到左淡出： 音效會從右邊的聲道轉移到左邊的聲道。機械工業出版社中等職業教育中等職業教育“十一五十一五”規劃教材規劃教材?電子商務專業電子商務專業機械工業出版社Flash cs5 動畫設計實例教程動畫設計實例教程淡入： 音效從無聲漸漸變成正常音效。淡出： 音效從有聲漸漸變成無聲音效。自定義： 可以自己設置音效。機械工業出版社中等職業教育中等職業教育“十一五十一五”規劃教材規劃教材?電子商務專業電子商務專業機械工業出版社Flas

23、h cs5 動畫設計實例教程動畫設計實例教程6.3.4 聲音的使用方法聲音的使用方法制作音效動畫：架子鼓步驟：1）打開Flash cs5，新建一個Flash文檔，設置影片尺寸為“400px292px”,背景顏色為“白色”，幀頻為“12”。2）選擇菜單欄“文件”“導入”“導入到舞臺”命令，導入一幅圖片jzg.bmp（圖片在所附光盤中）到舞臺，適當調整圖片的位置。機械工業出版社中等職業教育中等職業教育“十一五十一五”規劃教材規劃教材?電子商務專業電子商務專業機械工業出版社Flash cs5 動畫設計實例教程動畫設計實例教程3）選擇菜單欄“文件”“導入”“導入到庫”命令，打開“導入到庫”窗口，將架子

24、鼓中各部件的圖片g1、g2、g3、g4、g5、g6、g7分別導入到庫中。4）按【Ctrl】+【R】快捷鍵，打開“導入”窗口，快速導入架子鼓中各部件所對應的聲音文件s1、s2、s3、s4、s5、s6、s7。5）選擇菜單欄“插入”“新建元件”命令，新建一個圖形元件t1。機械工業出版社中等職業教育中等職業教育“十一五十一五”規劃教材規劃教材?電子商務專業電子商務專業機械工業出版社Flash cs5 動畫設計實例教程動畫設計實例教程6）在圖形元件t1編輯模式下，選擇第1幀，單擊鼠標右鍵，從彈出的快捷菜單中選擇【插入關鍵幀】命令。7）選擇菜單欄“窗口”“庫”命令，打開“庫”面板，拖動g1.bmp到t1第

25、1幀。8）重復步驟5至7，分別建立圖形元件t2，t3，t4，t5，t6, t7。機械工業出版社中等職業教育中等職業教育“十一五十一五”規劃教材規劃教材?電子商務專業電子商務專業機械工業出版社Flash cs5 動畫設計實例教程動畫設計實例教程9）選擇菜單欄“插入”“新建元件”命令，新建一個按鈕元件b1。10）選擇按鈕元件的彈起幀，單擊鼠標右鍵，從彈出的快捷菜單中選擇【插入關鍵幀】命令；選擇按鈕元件的指針經過幀，單擊鼠標右鍵，從彈出的快捷菜單中選擇【插入關鍵幀】命令。11）選擇指針經過幀，選擇菜單欄“窗口”“庫”命令，打開“庫”面板，拖動s1.mp3到指針經過幀。機械工業出版社中等職業教育中等職

26、業教育“十一五十一五”規劃教材規劃教材?電子商務專業電子商務專業機械工業出版社Flash cs5 動畫設計實例教程動畫設計實例教程12）選擇按鈕元件的點擊幀，單擊鼠標右鍵，從彈出的快捷菜單中選擇【插入關鍵幀】命令，選擇菜單欄“窗口”“庫”命令，打開“庫”面板，拖動圖形元件t1到點擊幀。13）重復步驟9至12，分別建立按鈕元件b2，b3，b4，b5，b6 ,b7,如圖627所示。14）選擇菜單欄“插入”“新建元件”命令，新建一個影片剪輯元件m1。機械工業出版社中等職業教育中等職業教育“十一五十一五”規劃教材規劃教材?電子商務專業電子商務專業機械工業出版社Flash cs5 動畫設計實例教程動畫設計實例教程15）選擇m1的第1幀，單擊鼠標右鍵，從彈出的快捷菜單中選擇【插入關鍵幀】命令，選擇第1幀，單擊“動作”面板，在面板中添加腳本：stop(); 表示沒部觸發時，影片剪輯是停止狀態。16）選擇m1的第2幀，單擊鼠標右鍵，從彈出的快捷菜單中選擇【插入關鍵幀】命令，選擇菜單欄“