Animate動畫設計與制作實例教程（Animate CC 2019） 課件 項目7、8 制作動畫片、制作游戲

Animate動畫設計與制作實例教程

（AnimateCC2019）項目七

制作動畫片項目簡介

本項目主要介紹代碼片段和模板的使用、按分鏡頭制作動畫、將分鏡頭情節(jié)完全放入影片剪輯元件中、制作同一角色的不同動作、元件和各補間動畫的搭配使用、使用逐幀動畫制作所需效果、情節(jié)的連續(xù)和分鏡頭的承接技巧等。通過本項目的學習，讀者可以掌握用AnimateCC2019制作動畫片的技巧。學習目標掌握代碼片段和模板的使用方法；掌握魚兒游、貓和老鼠、簡單愛動畫片的制作方法。7.1.1代碼片段

代碼片段是Animate中預先編寫好的ActionScript3.0代碼段，可以方便地添加到項目里，利用“代碼片段”面板里提供的動作立即給項目添加交互功能?？梢允褂么a片段添加能影響舞臺上行為的代碼，添加能在時間軸中控制播放頭移動的代碼，還可以將創(chuàng)建的新代碼片段添加到面板中。

使用代碼片段控制對象，對象必須是影片剪輯、按鈕或者文本，必須在“屬性”面板中為對象添加實例名，代碼片段不能直接添加到對象上，只能添加到時間軸的幀中。7.1知識準備——代碼片段和模板

執(zhí)行“窗口”>“代碼片段”命令，可以打開“代碼片段”面板，如圖7-1所示?？梢詾锳ctionScript文檔、HTML5Canvas文檔和WebGL文檔添加交互代碼。圖7-11．使用代碼片段添加ActionScript代碼

在影片主時間軸上的任意一個關鍵幀以及影片剪輯元件里的任意一個關鍵幀，都可以添加ActionScript代碼。在編譯后的項目播放過程中，當播放到某一幀時，如果其中包含代碼，它們就會被執(zhí)行。2．將自定義代碼片段添加到“代碼片段”面板（1）在“代碼片段”面板中，從面板菜單中選擇“新建代碼片段”。在彈出的對話框中，為自定義的代碼片段輸入標題、工具提示文本和JavaScript或ActionScript3.0代碼。（2）單擊“自動填充”按鈕，可以將“動作”面板中選擇的任何代碼添加進去。（3）在“動作”面板中，查看新添加的代碼并根據(jù)片段開頭的說明替換必要的參數(shù)。

Animate的模板為用戶創(chuàng)作各種常見動畫題材提供了很大便利，有許多模板可供創(chuàng)作使用，如照片幻燈片模板、測驗模板、移動內(nèi)容模板等。7.1.2模板7.2.1案例效果分析

本實例制作一群小魚在水中游來游去的小動畫，主要學習元件的使用方法。效果如圖7-10所示。

本實例使用5個繪制魚兒不同形態(tài)的圖形元件組成一個影片剪輯元件，由影片剪輯元件內(nèi)部放置圖形元件的順序和幀數(shù)來控制魚兒的動作，然后導入背景圖片，并將影片剪輯元件放置在合適的位置創(chuàng)建補間動畫，完成本實例的制作。7.2任務一——制作“魚兒游”動畫圖7-107.2.2設計思路

本例在元件的不同關鍵幀中改變魚兒的形狀，以形成魚兒在水中不斷穿梭、翻騰的動畫效果。7.2.3相關知識和技能點（1）Animate中的形狀為分散的狀態(tài)，在繪制魚兒形狀時，每出現(xiàn)一處重疊的線條，魚兒形狀就被分割成分散的形狀。在調整顏色時要注意，魚兒身體是由多個分散的色塊構成的，要統(tǒng)一調配顏色。（2）將5個形態(tài)不同的魚兒圖形元件放置在一個影片剪輯元件中，再對影片剪輯元件設置補間動畫改變設置，從而制作魚兒游來游去的效果。（1）啟動AnimateCC2019，按Ctrl+N組合鍵，新建一個Animate文件。（2）按Ctrl+F8組合鍵，彈出“創(chuàng)建新元件”對話框，在“名稱”文本框中輸入“1”，選擇類型為“圖形”，如圖7-11所示。（3）單擊“確定”按鈕，進入該元件的編輯窗口，選擇工具箱中的“鉛筆”工具，在“舞臺”的中心繪制魚兒的輪廓，如圖7-12所示。7.2.4任務實施

圖7-11

圖7-12（4）在“屬性”面板中設置填充色為#FFBA94，使用“顏料桶”工具填充魚的身體部分，如圖7-13所示。（5）更改填充色為#FF9A63，填充魚的頭部，如圖7-14所示。（6）更改填充色為#FF7939，填充魚身上的花紋，如圖7-15所示。（7）刪除魚兒輪廓線，如圖7-16所示。至此，“1”元件完成。

圖7-13

圖7-14

圖7-15

圖7-16（8）按Ctrl+L組合鍵打開“庫”面板，選中“1”元件，用鼠標右鍵單擊，在彈出的快捷菜單中選擇“直接復制”命令，彈出“直接復制元件”對話框，修改文件名為“2”，如圖7-17所示。圖7-17（9）單擊“確定”按鈕，進入“2”元件的編輯窗口，選擇“任意變形”工具和“選擇”工具，調整魚兒的形狀。（10）重復步驟（8）、（9）的操作，復制出“3”“4”“5”元件，并依次調整魚兒的形狀，如圖7-18所示。（11）按Ctrl+F8組合鍵新建元件，命名為“魚兒”，選擇元件類型為“影片剪輯”，如圖7-19所示。（12）單擊“確定”按鈕，進入新建影片剪輯元件的編輯窗口，從“庫”面板中將“1”元件拖到如圖7-20所示的位置。圖7-18

圖7-19

圖7-20（13）選中第4幀，按F7鍵插入空白關鍵幀，將元件“2”拖到圖7-21所示的位置。圖7-21（14）在第12幀插入空白關鍵幀，從“庫”面板中將元件“3”拖到圖7-22所示的位置。圖7-22（15）在第15幀插入空白關鍵幀，從“庫”面板中將元件“5”拖到圖7-23所示的位置。圖7-23（16）在第18幀插入空白關鍵幀，從“庫”面板中將元件“4”拖到圖7-24所示的位置。圖7-24（17）選中第27幀，按F5鍵插入普通幀，如圖7-25所示。圖7-25（18）單擊“場景1”圖標，回到場景1，執(zhí)行“文件”>“導入”>“導入到庫”命令，導入一幅圖片，如圖7-26所示，調整圖片大小，使之覆蓋整個舞臺，如圖7-27所示。圖7-26

圖7-27（19）單擊“時間軸”中的“插入圖層”按鈕，新建“圖層2”，從“庫”面板中將若干“魚兒”元件拖到“圖層2”中，最終圖層和效果如圖7-28所示。（20）按Ctrl+Enter組合鍵測試影片。圖7-287.3.1案例效果分析（1）故事情節(jié)：一只貓在老鼠洞邊等著捉老鼠，老鼠一直不出來，貓等得睡著了，聽見貓的鼾聲，老鼠紛紛跑出洞來。（2）場景設計：應用3個場景，分別是Loading頁面、字幕場景和故事場景。Loading頁面由線條和圓圈構成，可通過制作的按鈕元件跳轉到字幕場景；字幕場景包括線條和閃爍小星星的變化，最后出現(xiàn)標題——貓和老鼠；通過Enter按鈕可進入故事場景。（3）具體任務分解：具體分為繪制背景、繪制角色、小貓打鼾、老鼠出洞幾個小任務。分別制作元件完成這些小任務，并將情節(jié)貫穿起來，構成本實例，靜幀效果如圖7-29所示。7.3任務二——制作“貓和老鼠”動畫圖7-297.3.2設計思路

實例由3個場景構成，按照場景可分為3部分設計。第一部分為Loading頁面，第二部分為字幕，第三部分為故事情節(jié)：一只小花貓在老鼠洞口等老鼠出來等得睡著了，小老鼠們聽到貓的鼾聲，紛紛跑了出來。7.3.3相關知識和技能點（1）設計Loading、text和maohelaoshu共3個場景，場景之間采用按鈕連接，本實例故事情節(jié)的實現(xiàn)是循環(huán)播放最后一個場景maohelaoshu，貓不斷地打鼾，老鼠不斷地跑出來。（2）使用各種元件，并通過實例練習去了解元件的應用：場景的連接使用按鈕元件，角色——貓和老鼠采用圖形元件，貓打鼾的“Z”圖形是影片剪輯元件。1．制作Loading頁面

Loading頁面的效果如圖7-30所示。（1）新建Animate文件，執(zhí)行“窗口”>“其他面板”>“場景”命令，選中“場景1”，修改名稱為“Loading”，如圖7-31所示。7.3.4任務實施圖7-30

圖7-31（2）新建一個圖形元件，命名為“circle”，如圖7-32所示。（3）新建一個圖形元件，命名為“ring”，如圖7-33所示。（4）新建一個圖形元件，命名為“backgr”，作為Loading背景，分別將圖形元件“circle”和“ring”多次拖至“舞臺”，并按不同大小放置，如圖7-34所示。圖7-32

圖7-33

圖7-34（5）新建一個按鈕元件，命名為“click”，作為Loading結束后的鏈接，如圖7-35所示。（6）返回主場景“Loading”，在時間軸上新建一個圖層，命名為“BACK”。在第1幀將圖形元件“backgr”拖至“舞臺”，在第4幀按F5鍵插入普通幀，如圖7-36所示。（7）在主場景新建一個圖層，命名為“AS”，在“AS”圖層的第4幀插入關鍵幀，按F9鍵打開“動作”面板，輸入語句“stop();”，時間軸如圖7-37所示。圖7-35

圖7-36

圖7-37（8）在“AS”圖層的第4幀拖入按鈕元件“click”，“屬性”面板中設置實例名稱為“btn”，按F9鍵，在“動作”面板中輸入代碼。完成Loading頁面的制作，時間軸如圖7-38所示。圖7-38（9）執(zhí)行“插入”>“場景”命令，出現(xiàn)“場景2”，將“場景2”改名為“text”，如圖7-39所示。圖7-392．制作字幕（1）進入“text”場景，在“圖層1”上繪制一個黑色矩形，設置寬為550，高為400，“X”“Y”都為0，使之布滿整個舞臺，成為黑色背景。（2）新建圖層，命名為“l(fā)ight”，使用“橢圓”工具在“舞臺“中央繪制一個圓形，執(zhí)行“修改”>“形狀”>“柔化填充邊緣”命令，彈出“柔化填充邊緣”對話框，如圖7-40所示，柔化效果對比如圖7-41所示。圖7-40

圖7-41（3）按F8鍵，將柔化邊緣處理后的圓形轉化為元件，并命名為L1。（4）在第5幀插入關鍵幀，設置第1幀中元件的透明度“Alpha”值為0，在第1～5幀創(chuàng)建傳統(tǒng)補間動畫，編輯光線淡入效果。（5）在第10幀插入關鍵幀，使用“任意變形”工具對光圈進行變形處理，設置其透明度“Alpha”值為80%，效果如圖7-42所示。（6）新建圖層“l(fā)ine_1”，在第5幀插入關鍵幀，在“舞臺“中央繪制一條直線，設置顏色為#666666，樣式為“極細”，在第10幀插入關鍵幀，將第5幀中的線條縮到最短，在第5～10幀創(chuàng)建形狀補間動畫，如圖7-43所示。圖7-42

圖7-43（7）新建圖層“title”，在第25幀按F6鍵插入關鍵幀，在“舞臺”中央輸入文本“貓和老鼠”，格式為隸書、白色、粗體，按F8鍵，將其轉化為圖形元件title。（8）在圖層“l(fā)ight”的第25幀插入關鍵幀并創(chuàng)建傳統(tǒng)補間動畫，使用“任意變形”工具放大該幀中的元件，在“屬性”面板上將該元件的透明度設為0。（9）在圖層“title”的第55幀插入關鍵幀，并創(chuàng)建傳統(tǒng)補間動畫，將第25幀中元件的透明度設為0，形成標題文字的淡入效果。（10）新建圖層“l(fā)ine_2”，在第10幀按F6鍵插入關鍵幀，復制圖層“l(fā)ine_1”中第10幀的直線，粘貼到當前位置。分別在這兩個圖層的第25幀插入關鍵幀并創(chuàng)建形狀補間動畫，將“l(fā)ine_1”圖層中的線條向下移，“l(fā)ine_2”圖層中的線條向上移，將標題夾在它們之間，如圖7-44所示。（11）新建圖層“g_line1”，在第25幀插入關鍵幀，復制兩條分開的線到新圖層的相同位置，轉換成圖形元件“l(fā)ine”。在第35幀插入關鍵幀，使用“任意變形”工具在垂直方向上拉伸元件“l(fā)ine”，將第25幀的“緩動”設為100，在第25～35幀創(chuàng)建傳統(tǒng)補間動畫。（12）新建4個圖層，復制“g_line1”圖層的內(nèi)容，時間軸布置如圖7-45所示。

圖7-44

圖7-45（13）新建圖層“m-circle”，在第40幀插入關鍵幀，繪制圖7-46所示的發(fā)光小球，并進行組合。將該圖形復制15次，使用“修改”>“對齊”下的命令，使其以線條為參考均勻排列。（14）選中第41～55幀，按F6鍵逐幀插入關鍵幀，從第40幀開始，逐幀刪除后面的14個、13個小球組合……直到第55幀，生成小球依次出現(xiàn)的動畫效果。（15）新建圖層“m-light”，選擇相應幀，插入圖7-47所示的小球發(fā)光效果。（16）新建圖層，為標題制作倒影，并在最后一幀插入關鍵幀，按F9鍵，輸入“stop();”。添加按鈕元件“ENTER”，設置實例名稱為“btn_enter”。按F9鍵，在“動作”面板中輸入代碼。場景“text”的制作完成，靜幀效果如圖7-48所示。

圖7-46

圖7-47

圖7-483．制作故事情節(jié)（1）新建“場景3”，更名為“maohelaoshu”。繪制一個矩形框，填充背景顏色為#FFFFCC。（2）將圖層命名為“wall”，繪制圖7-49所示的墻壁圖形，然后按Ctrl+G組合鍵進行組合。（3）在圖層“wall”下新建圖層“floor”，繪制圖7-50所示的黑色不規(guī)則圖形，作為墻壁上小洞的陰影，效果如圖7-51所示。（4）新建圖形元件“mouse”，繪制老鼠的卡通形象，如圖7-52所示。圖7-49

圖7-50

圖7-51

圖7-52（5）新建圖形元件“cat”，繪制小貓睡覺的圖形，如圖7-53所示。（6）在“floor”圖層上新建一個圖層“mouse1”，在時間軸第5幀按F6鍵插入關鍵幀，將“mouse”元件拖至“舞臺”并放置在洞口的位置，如圖7-54所示。（7）在“mouse1”圖層的第15幀和第30幀插入關鍵幀，將第5幀中“mouse”元件的透明度設為0。將第30幀中的“mouse”元件拖至洞外。在第5～15、第15～30幀創(chuàng)建傳統(tǒng)補間動畫，靜幀效果如圖7-55所示。

圖7-53

圖7-54

圖7-55（8）新建圖層“mouse2”“mouse3”，選中圖層“mouse1”的第5～30幀，用鼠標右鍵單擊，在彈出的快捷菜單中選擇“復制幀”命令，分別在“mouse2”圖層的第30幀和“mouse3”圖層的第60幀執(zhí)行“粘貼幀”命令。（9）在圖層“mouse1”的第40幀、圖層“mouse2”的第70幀和圖層“mouse3”的第95幀插入關鍵幀，分別將“mouse”元件拖至“舞臺”以外的下方、右方和左方。（10）新建圖層“cat”，將圖形元件“cat”拖至舞臺，新建圖形元件“Z”，如圖7-56所示，插入3個關鍵幀，使3個“Z”依次出現(xiàn)，制作打鼾效果?！癦”元件的時間軸如圖7-57所示。圖7-56

圖7-57（11）新建圖層“sound”，導入小貓打呼的聲音文件，在“屬性”面板上將聲音的“同步”屬性設為“事件”“循環(huán)”，在最后一幀插入空白關鍵幀，按F9鍵，在“動作”面板上輸入語句“stop();”。（12）測試影片，最終效果如圖7-58所示。圖7-587.4.1實訓概述1．動畫的制作目的與設計理念

制作本實訓的目的在于熟悉制作動畫片的邏輯過程，先設計情節(jié)和劇情，然后按照分鏡頭制作，整個動畫片由若干影片剪輯元件構成，最終場景的合成是由一個個影片剪輯元件放置在時間軸的合適位置上構成的。實訓內(nèi)容是制作一個搭配音樂的動畫片，通過一個個浪漫的情節(jié)表現(xiàn)出青年男女之間純真的愛。動畫靜幀效果如圖7-59所示。7.4實訓任務——制作“簡單愛”動畫圖7-592．動畫整體風格設計

本實訓選取“包子”為主人翁，充滿童話風格，并且大大簡化了角色設計。動畫的整體風格生動活潑，搭配清新的歌曲，體現(xiàn)了“青年男女之間純真的愛”的主題。本實訓設計了故事前奏和12個情節(jié)構成動畫整體。3．素材收集與處理

收集色彩明亮的河邊、草地、棒球等背景圖片，收集歌曲作為聲音素材，收集（元件素材多采用手繪完成）。（1）按分鏡頭制作動畫。（2）將分鏡頭情節(jié)完全放入影片剪輯元件中。（3）制作同一角色的不同動作。（4）元件和多種補間動畫的搭配使用。（5）使用逐幀動畫制作所需效果。（6）情節(jié)的連續(xù)和分鏡頭的承接技巧。7.4.2實訓要點圖7-60第一部分：前期設定（1）新建一個文檔，導入聲音文件“背景音樂”，將聲音的“同步”屬性設為“數(shù)據(jù)流”，如圖7-60所示。（2）按Enter鍵播放聲音，確定歌曲唱完一段的幀數(shù)，單擊“屬性”面板上的“編輯”按鈕，編輯聲音并設置聲音的淡入淡出效果，如圖7-61和圖7-62所示。7.4.3實訓步驟圖7-61

圖7-62第二部分：繪制主角圖7-63

圖7-64

圖7-65

圖7-66圖7-67

圖7-68

圖7-69

圖7-70圖7-71

圖7-72第三部分：制作情節(jié)1．制作前奏（1）制作開場白

圖7-73

圖7-74（2）制作搶奶瓶動畫圖7-75圖7-76

圖7-77（3）制作搶漫畫書動畫（4）制作前奏結束動畫圖7-78

圖7-792．按照分鏡頭制作動畫（1）第一分鏡頭情節(jié)

男孩和女孩相約到河邊，男孩先到河邊，邊等候邊看風景，女孩來了慢慢地走到男孩身后，卻害羞地垂下臉，不知怎么開口叫他。圖7-80（2）第二分鏡頭情節(jié)

男孩轉身去追女孩，正在找不到女孩時，女孩突然蹦出來親了男孩一口，男孩受驚轉身就跑，女孩在后面追。（3）第三分鏡情節(jié)

男孩和女孩追逐著跑過草地，來到河邊停了下來，隔壁鄰居在旁觀看。

圖7-81

圖7-82（4）第四分鏡情節(jié)

互相深情款款地對視，愛意在男孩和女孩之間傳送。（5）第五分鏡情節(jié)

男孩和女孩由對視到牽手。圖7-83

圖7-84（6）第六分鏡情節(jié)

天色漸漸變暗，男孩和女孩手牽手回家。（7）第七分鏡情節(jié)

男孩和女孩隨著云彩反復上下飄動。圖7-85

圖7-86

圖7-87（8）第八分鏡情節(jié)

男孩騎著單車載著女孩向前駛去，去看棒球比賽。（9）第九分鏡情節(jié)

棒球比賽非常精彩，看完球賽兩人拉著手邊唱歌邊走。圖7-88

圖7-89（10）第十分鏡情節(jié)

兩人手牽著手轉圈。

圖7-90（11）第十一分鏡情節(jié)

女孩走累了，讓男孩背著她，女孩伏在男孩肩上貌似睡著了，男孩小聲說了句“我愛你”，沒想到女孩卻聽到了，男孩的臉紅了。3．最終合成圖7-91

圖7-927.5評價考核能力類型考

核

內(nèi)

容評

價學

習

目

標評

價

項

目321職業(yè)能力掌握使用Animate繪制圖形、編輯圖形的方法和技能；掌握動畫片分鏡頭設計方法；會使用“代碼片段”面板和模板能夠熟練使用Animate繪圖

能夠靈活運用場景和元件

能夠使用“代碼片段”面板

能夠使用模板

能夠使用Animate設計制作動畫片

通用能力造型能力

審美能力

組織能力

解決問題能力

自主學習能力

創(chuàng)新能力

綜合評價

項目七任務評價考核表7.6.1參考制作效果

本例的靜幀效果如圖7-93所示。7.6課外拓展——制作“親吻豬”動畫圖7-937.6.2知識要點（1）使用傳統(tǒng)補間動畫制作小豬的位置變化。（2）使用形狀補間動畫制作中心的變化。7.6.3參考制作過程Animate動畫設計與制作實例教程

（AnimateCC2019）項目八

制作游戲項目簡介

使用Animate制作的游戲以其小巧靈活、老少皆宜的特性，獲得了很多人的青睞。

本項目主要介紹AnimateCC2019“動作”面板的組成及使用、ActionScript3.0基礎、事件和事件處理函數(shù)、時間軸控制函數(shù)和程序的3種基本結構。通過幾個應用范例，講解AnimateCC2019

在游戲制作中的應用。通過本項目的學習，讀者可以掌握“動作”面板、MouseEvent.事件和時間軸的使用方法和技能，掌握用Animate進行游戲制作的方法和技巧。學習目標了解ActionScript3.0基礎知識；掌握“石頭剪刀布”游戲的制作方法；掌握拼圖游戲的制作方法；掌握填色游戲的制作方法。8.1.1ActionScript3.0概述1．“動作”面板概述

“動作”面板是Animate程序編輯環(huán)境。使用該面板可以開發(fā)與編輯用于FlashPlayer或AIR的ActionScript腳本程序，也可開發(fā)和編輯用于HTML5Canvas文檔的JavaScript程序，這里主要介紹ActionScript腳本語言。在Animate中，ActionScript3.0有兩種編寫方法，一種是在時間軸的幀上編寫，另一種是在AS文件中編寫。

啟動AnimateCC2019，執(zhí)行“窗口”>“動作”命令或按F9鍵打開“動作”面板，如圖8-1所示。8.1知識準備——ActionScript3.0基礎圖8-1

“動作”面板由以下幾部分組成?！蚰_本窗口：提供了必要的代碼編輯工具，用來編輯腳本?！蚰_本選項：“動作”面板右上角有各種查找、替換和插入代碼的選項，還有一個“使用向導添加”的按鈕，是一個簡單易用的代碼自動生成向導，可用于HTML5畫布文件類型?！蚰_本導航器：用于查找代碼所處的位置，Animate將代碼存放在時間軸的關鍵幀上，可在多個時間軸和關鍵幀上直接切換導航。2．編程要素（1）數(shù)據(jù)類型

簡單數(shù)據(jù)類型：Boolean（布爾）、int（有符號整型）、Number（浮點）、String（字符串）、uint（無符號整型）。

復雜數(shù)據(jù)類型：Array（數(shù)組）、Date（日期）、Error（異常）、Function（函數(shù)）、RegExp（正則表達）。（2）運算符和表達式

運算符是用于對表達式中各個運算量進行各種運算的符號。通過運算符可以對一個或多個值計算新值。Animate提供的運算符主要有以下幾種?！蚝缶Y：x++、x--?！蛞辉?+x、--x、+、-、～、!、delete、typeof、void。◎乘除法：*、/、%。◎加減法：+、-?！虬次灰莆唬?lt;<、>>、>>>。◎關系：<、>、<=、>=、asininstanceof、is。◎等于：==、!=、===、!==?！虬次弧芭c”：&。◎按位“異或”：^?！虬次弧盎颉保簗?！蜻壿嫛芭c”：&&?！蜻壿嫛盎颉保簗|?！驐l件：?:?！蛸x值：=、*=、/=、%=、+=、-=、<<=、>>=、>>>=、&=、^=、|=?！蚨禾枺?。

表達式是由常量、變量、函數(shù)及運算符按照運算法則組成的計算式。（3）對象

客觀世界中的任何一個事物都可以看成是一個對象。在Animate中，每一個可以訪問的目標都是一個對象，如“舞臺”中的圖形、按鈕、影片剪輯等。（4）類

類是一批對象的共同特征（稱為“屬性”）和共同行為（稱為“方法”）的描述。類是對象的抽象。一般也把對象稱為類的實例。（5）屬性

類的屬性是指類中對象共有的特性和特征。例如，影片剪輯（MovieClip）類的屬性有：寬度（width）、高度（height）、位置（x,y）、透明度（alpha）、旋轉度（rotation）等。（6）方法

類的方法是指可以由類中所有對象執(zhí)行的操作。一般由系統(tǒng)內(nèi)已經(jīng)定義好的一段有特定功能的代碼來實現(xiàn)，可以在需要時直接調用這樣的方法。例如，play()就是影片剪輯的方法。（7）變量

變量是指程序運行中可以改變的量。變量由兩部分構成：變量名和變量的值。

變量的相關語法如下。◎聲明變量：vari;◎將變量與一個數(shù)據(jù)類型相關聯(lián)：vari:int;◎為變量賦值：vari:int;i=20;◎在聲明變量的同時為變量賦值：vari:int=20（8）函數(shù)

函數(shù)是用來對常量、變量等進行某種運算的程序代碼。這些代碼在程序中可重復使用。在編程時可以將需要處理的值或對象通過參數(shù)的形式傳遞給函數(shù)，該函數(shù)將對這些值執(zhí)行運算后返回結果。

定義函數(shù)的一般形式如下。

function

函數(shù)名稱(參數(shù)1,參數(shù)2,……,參數(shù)n)

{

//

函數(shù)的程序代碼

}

3．ActionScript的語法規(guī)則

編寫ActionScript腳本時應遵循以下語法規(guī)則?！蛴冒虢欠痔枺?）作為一個語句的結束標志?！蛴脠A括號()來放置函數(shù)中的相關參數(shù)，在定義函數(shù)時要將所有參數(shù)都放在圓括號中?！蛴么罄ㄌ杮}將語句組合在一起，形成邏輯上的一個程序塊。注意括號使用時要匹配。◎用點標記（.）指出一個對象的屬性、特性或方法，或用于指示一個對象的目標路徑?！蜃⑨專簡涡凶⑨專谝恍兄械娜我馕恢梅胖脙蓚€斜杠來指定單行注釋。程序將忽略斜杠后直到該行末尾的所有內(nèi)容。多行注釋，多行注釋包括一個開始注釋標記（/*）、注釋內(nèi)容和一個結束注釋標記（*/）。無論注釋跨多少行，程序都將忽略開始標記與結束標記之間的所有內(nèi)容。◎關鍵字：是ActionScript中有特殊用途的保留字。不能使用關鍵字作為函數(shù)名、變量名和標識符。◎區(qū)分大小寫。1．常見事件類型（1）鼠標事件

MouseEvent類定義了10種常見的鼠標事件，具體如下?！駽LICK：定義鼠標單擊事件?！駾OUBLE_CLICK：定義鼠標雙擊事件?！騇OUSE_DOWN：定義鼠標按鍵按下事件。◎MOUSE_MOVE：定義鼠標指針移動事件。8.1.2ActionScript3.0的事件處理◎MOUSE_OUT：定義鼠標指針移出事件。◎MOUSE_OVER：定義鼠標指針移過事件?！騇OUSE_UP：定義鼠標按鍵松開事件?！騇OUSE_WHEEL：定義鼠標滾輪滾動觸發(fā)事件?！騌OLL_OUT：定義鼠標指針滑入事件?！騌OLL_OVER：定義鼠標指針滑出事件。（2）鍵盤事件◎KeyboardEvent.KEY_DOWN：定義按下鍵盤按鍵時事件。◎KeyboardEvent.KEY_UP：定義松開鍵盤按鍵時事件。（3）幀循環(huán)事件

幀循環(huán)事件是ActionScript3.0中動畫編程的核心事件。該事件能夠控制代碼跟隨Animate的幀頻播放，在每次刷新屏幕時改變顯示對象。使用該事件時，需要把該事件代碼寫入事件偵聽函數(shù)中，然后在每次刷新屏幕時，都會調用Event.ENTER_FRAME事件，從而實現(xiàn)動畫效果。2．事件偵聽器

ActionScript3.0中的事件偵聽器也就是以前版本中的事件處理函數(shù)，是事件的處理者，負責接收事件攜帶的信息，并在接收到該事件之后執(zhí)行事件處理函數(shù)體內(nèi)的代碼。

添加事件偵聽的過程分為兩步：第一步是創(chuàng)建一個事件偵聽函數(shù)第二步是使用addEvenListener()方法在事件目標或者任何顯示對象上注冊偵聽器函數(shù)

ActionScript3.0中控制影片剪輯播放的常用方法如下。（1）停止方法stop()：停止正在播放的動畫。此方法沒有參數(shù)。（2）播放方法play()：當動畫被停止播放之后，使用play()方法使動畫繼續(xù)播放。此方法沒有參數(shù)。（3）停止播放聲音方法stopAllSounds()：在不停止播放頭的情況下停止SWF文件中當前正在播放的所有聲音。此方法沒有參數(shù)。（4）跳轉播放方法gotoAndPlay。8.1.3控制影片剪輯播放的方法（5）跳轉停止方法gotoAndStop：與跳轉播放方法類似，跳轉到指定幀停止。（6）跳轉到下一幀方法nextFrame()：將播放頭轉到下一幀并停止。如果當前幀為最后一幀，則播放頭不移動。無參數(shù)。（7）跳轉到上一幀方法prevFrame()：將播放頭轉到前一幀并停止。如果當前幀為第一幀，則播放頭不移動。無參數(shù)。（8）跳轉到下一場景方法nextScene()：將播放頭移到下一場景的第1幀并停止。無參數(shù)。1．順序結構

按照語句的順序逐句執(zhí)行，只執(zhí)行一次。2．選擇結構

用if語句實現(xiàn)，可以是函數(shù)嵌套，只執(zhí)行程序的某一個分支。3．循環(huán)結構

可實現(xiàn)程序塊的循環(huán)，循環(huán)的次數(shù)不定。用while、do…while、for語句實現(xiàn)。8.1.4程序結構8.2.1案例效果分析

本案例設計的是“石頭剪刀布”游戲。作為玩家，用戶可以單擊“石頭”“剪刀”“布”按鈕中的任一個，在玩家和電腦中有伸手的動作，玩家出的是玩家單擊的按鈕，而電腦是隨機出的。會顯示當前是第幾局，玩家贏了幾局，電腦贏了幾局，平局數(shù)是幾。當玩夠30局后，游戲跳到另一個界面，顯示你贏了或者你輸了，可以單擊“重玩”按鈕重新開始游戲。運行中的某個畫面如圖8-8所示。8.2任務一——制作“石頭剪刀布”游戲圖8-88.2.2設計思路（1）制作“石頭”“剪刀”“布”元件及對應的按鈕元件。（2）用一個影片剪輯元件實現(xiàn)猜拳的3種動作。（3）用動態(tài)文本實現(xiàn)計數(shù)，用if函數(shù)判斷電腦實例顯示石頭、剪刀或布。8.2.3相關知識和技能點（1）特殊字體的使用。（2）動態(tài)文本的使用。（3）if函數(shù)、gotoAndStop()語句的使用。（1）新建一個尺寸為400像素×300像素的Animate文件（選擇ActionScript3.0）。（2）新建圖形元件“布”，在元件的編輯窗口，選擇布的圖形放入到元件中，如圖8-9所示。（3）新建圖形元件“剪刀”，選擇剪刀的圖形放入到元件中，如圖8-10所示。（4）新建圖形元件“石頭”，選擇石頭的圖形放入到元件中，如圖8-11所示。8.2.4任務實施圖8-9

圖8-10

圖8-11（5）新建影片剪輯“石頭剪刀布”，進入元件的編輯窗口，在第4幀插入空白關鍵幀，添加代碼“stop();”。在第5幀插入空白關鍵幀，在“屬性”面板中設置幀標簽“a”，如圖8-12所示。（6）在第7幀插入空白關鍵幀，將“石頭”元件拖至“舞臺”。在第11幀插入關鍵幀，將該幀中的“石頭”向左移動一段距離。在此幀上添加代碼“stop();”。將第5～11幀選中，進行“復制幀”操作，在第20幀和第40幀各執(zhí)行一次“粘貼幀”操作，將第20幀的幀標簽改為“b”，將第40幀的幀標簽改為“c”。用鼠標右鍵單擊第22幀中的“石頭”，在彈出的快捷菜單中選擇“交換元件”命令。在“交換元件”對話框中選擇“剪刀”圖形元件，單擊“確定”按鈕或按Enter鍵；對第26幀（交換為剪刀）、第42幀（交換為布）和第46幀（交換為布）中的元件進行交換元件操作。完成的時間軸如圖8-13所示。圖8-12

圖8-13（7）新建按鈕元件“布1”，在“彈起”幀，將圖形元件“布”拖至“舞臺”，添加文字“布”；在“指針經(jīng)過”幀插入關鍵幀，更改圖形大?。辉凇包c擊”幀插入關鍵幀后，繪制一個矩形，矩形的大小恰好能覆蓋手及文字。（8）用類似方法制作“剪刀1”和“石頭1”按鈕元件。（9）返回“場景1”，設置背景為灰色。在第2幀插入空白關鍵幀，繪制一個矩形，填充紅色，復制該矩形并移到右側，填充藍色。將3個按鈕拖至“舞臺”；輸入靜態(tài)文本“玩家”“電腦”“現(xiàn)在是第回合”“玩家贏：”“電腦贏：”“平局：”，效果如圖8-14所示。（10）在“現(xiàn)在是第回合”的空處，使用“文本”工具拖出一個矩形塊，在“屬性”面板中選擇“動態(tài)文本”，并設置實例名稱為“sum_text”，如圖8-15所示。圖8-14

圖8-15（11）用類似方法，在“玩家贏：”后面添加動態(tài)文本框，實例名稱為“w1_text”。在“電腦贏：”后面添加動態(tài)文本框，實例名稱為“d1_text”。在“平局：”后面添加動態(tài)文本框，實例名稱為“p1_text”。（12）從“庫”面板中將“石頭剪刀布”影片剪輯拖到藍色區(qū)域，使用“變形”工具旋轉?90°，添加實例名稱“mc_d”。復制該影片剪輯實例，移到紅色矩形中，改變實例名稱為“mc_w”，并使用“變形”工具，進行水平翻轉。使用“對齊”面板使“mc_d”“mc_w”處于同一水平線上。（13）新建“圖層3”，第2幀插入空白關鍵幀，添加“剪刀”的動作代碼，“動作”面板如圖8-16所示。在“圖層3”中的第2幀添加的“石頭”的代碼如圖8-17所示。圖8-16

圖8-17（14）在“圖層3”中的第2幀添加“布”按鈕的代碼，與剪刀、石頭的代碼類似。（15）在第1幀添加動作代碼“varw1:int=0;varp1:int=0;vard1:int=0;varsum:int=0;”，在第2幀添加動作代碼“stop();”，在后面10幀插入空白關鍵幀，添加幀標簽“wy”，在該幀的“舞臺”中輸入“恭喜！你贏了！”，并添加一個“重玩”按鈕，實例名稱為yan。在新建“圖層3”的第10幀上添加代碼，如圖8-18所示。（16）測試影片，保存為“石頭剪刀布.fla”。圖8-188.3.1案例效果分析

本案例設計的是拼圖游戲，游戲規(guī)則是當鼠標指針在某個小圖片上時，按下鼠標左鍵不松開進行拖曳，該小圖片跟隨鼠標指針移動，當移動到小圖片的正確位置并松開鼠標時，該圖片停留在正確位置，否則回到原來的位置。完成的效果截圖如圖8-19所示。8.3任務二——制作拼圖游戲圖8-198.3.2設計思路（1）將小圖片都轉化為元件，并重新排列好。（2）用按鈕記錄小圖片的正確位置。（3）為小圖片添加動作，使小圖片到正確位置時停留，否則返回原位置。8.3.3相關知識和技能點（1）影片剪輯方法stopDrag()。（2）碰撞檢測方法hitTestPoint()、hitTestObject()。（3）“對齊”面板、查找與替換。（1）新建一個尺寸為640像素×480像素的Animate文件（選擇ActionScript3.0），“舞臺”背景色設置為#003300。（2）執(zhí)行“文件”>“導入”>“導入到庫”命令，將images文件夾中的所有圖片導入“庫”面板中。（3）按Ctrl+F8組合鍵，新建“影片剪輯”元件，名稱為“tu1”，從“庫”面板中將“pdsu-1.gif”拖至“舞臺”中，將它轉換為影片剪輯元件。（4）重復上一步的操作，把“pdsu-2.gif”轉換為“tu2”，“pdsu-3.gif”轉換為“tu3”…“pdsu-16.gif”轉換為“tu16”。（5）將“舞臺”中的16個影片剪輯打亂次序后，使用“對齊”面板排列，如圖8-20所示。將“圖層1”命名為“小圖形”，并鎖定。8.3.4任務實施圖8-20（6）在“庫”面板中，用鼠標右鍵單擊“tu1”，選擇“直接復制”命令，在彈出的“直接復制元件”對話框中輸入名稱為“bt”，選擇類型為“按鈕”，單擊“確定”按鈕，這時就有一個按鈕元件“bt”。在“庫”面板中雙擊“bt”按鈕圖標，進入按鈕的編輯窗口。將“彈起”幀的內(nèi)容全選后，執(zhí)行“修改”>“分離”命令（或按Ctrl+B組合鍵）把圖像打散，使用“墨水瓶”工具給它添加黑色邊框后，將填充刪除，只留邊框。在“點擊”幀插入關鍵幀，并填充漸變色，效果如圖8-21所示。圖8-21（7）返回“場景1”。新建一個圖層，將該圖層拖到“圖形”層的下面。將按鈕“bt”拖至“舞臺”中，選擇該按鈕，按Alt鍵拖動按鈕“bt”橫向復制4個，再選中這4個按鈕縱向復制4排，如圖8-22所示。對按鈕按先行后列的順序將實例命名為“bt1”…“bt16”，如圖8-23所示。將該層命名為“按鈕”并