2.7 交互動畫

與許多動畫制作工具相比，Animate CC 2017動畫有一個最大的特點就是具有強大的交互性，瀏覽者在觀賞動畫的同時，可以自由控制動畫的播放進程。

2.7.1 初識動作腳本

動作腳本是Animate CC 2017具有強大交互功能的靈魂所在。使用動作腳本可以與Animate CC 2017后臺數(shù)據(jù)庫進行交流，結(jié)合動作腳本，可以制作出交互性強、動畫效果更加絢麗的動畫。動作腳本是一種編程語言，Animate CC 2017使用的是ActionScript 3.0版本的動作腳本。Animate CC 2017動畫之所以具有交互性，是通過對按鈕、關(guān)鍵幀和影片剪輯設(shè)置動作腳本來實現(xiàn)的，所謂“動作”指的是一套命令腳本語句，當某事件發(fā)生或某條件成立時，就會發(fā)出命令來執(zhí)行設(shè)置的動作。

執(zhí)行菜單中的“窗口|動作”命令（快捷鍵〈F9〉），可以調(diào)出“動作”面板，如圖2-153所示。

1．腳本導(dǎo)航器

腳本導(dǎo)航器用于顯示包含腳本的Animate CC元素（影片剪輯、幀和按鈕等）的分層列表。使用腳本導(dǎo)航器可在Animate CC 2017文檔中的各個腳本之間快速移動。如果單擊腳本導(dǎo)航器中的某一項目，與該項目相關(guān)聯(lián)的腳本將顯示在腳本窗口中。

2．工具欄

“動作”面板工具欄位于“腳本”窗格上方，包含6個工具按鈕，這些按鈕的具體作用如下。

●（固定腳本）：單擊該按鈕后會顯示為狀態(tài)，此時可以固定當前幀當前圖層的腳本。

●（插入實例路徑和名稱）：單擊該按鈕，打開“插入目標路徑”對話框，如圖2-154所示，從中可以選擇插入按鈕或影片剪輯元件的目錄路徑。

●（查找）：單擊該按鈕，將展開高級選項，如圖2-155所示，在文本框中輸入內(nèi)容，可以進行查找與替換。

●（設(shè)置代碼格式）：單擊該按鈕，可以為寫好的腳本提供默認的代碼格式。

●（代碼片段）：單擊該按鈕，可以調(diào)出“代碼片段”面板，如圖2-156所示，從中可以選擇預(yù)設(shè)的ActionScript語言。

●（幫助）：單擊該按鈕，可以打開鏈接網(wǎng)頁，在該網(wǎng)頁中提供了ActionScript語言的幫助信息。

3．“腳本”窗格

“腳本”窗格用來輸入和調(diào)用動作腳本。“腳本”窗格右上方為工具欄。

2.7.2 動畫的跳轉(zhuǎn)控制

關(guān)于動畫的跳轉(zhuǎn)控制，將通過下面的實例進行講解，具體操作步驟如下。

1）打開網(wǎng)盤中的“素材及結(jié)果\2.7.2動畫的跳轉(zhuǎn)控制\動畫跳轉(zhuǎn)控制-素材.fla”文件，如圖2-157所示。

2）執(zhí)行菜單中的“控制|測試影片”（組合鍵〈Ctrl+Enter〉）命令，可以看到兩幅圖片連續(xù)切換播放的效果。

3）制作動畫播放到結(jié)尾第20幀時停止播放的效果。方法：將時間定位在第20幀，然后執(zhí)行菜單中的“窗口|動作”面板，調(diào)出“動作”面板，如圖2-158所示。接著在“動作”面板中單擊右上角的（代碼片段）按鈕，調(diào)出“代碼片段（斷）”面板，如圖2-159所示。

4）在“代碼片段”面板的“ActionScript/時間軸導(dǎo)航/在此幀處停止”命令處雙擊鼠標，如圖2-160所示，此時在“動作”面板中會自動輸入動作腳本，如圖2-161所示。同時會自動創(chuàng)建一個名稱為“Actions”的圖層，并且第20幀處多出了一個字母“a”，在如圖2-162所示。

5）執(zhí)行菜單中的“控制|測試影片”命令，即可看到當動畫播放到第20幀時，動畫停止的效果。

6）制作動畫播放到結(jié)尾再跳轉(zhuǎn)到第1幀后停止播放的效果。方法：在“動作”面板中刪除注釋和腳本，然后輸入腳本“gotoAndStop（1）”。接著執(zhí)行菜單中的“控制|測試影片”命令，即可看到當動畫播放到第20幀時，自動跳轉(zhuǎn)到第1幀循環(huán)播放的效果。

2.7.3 交互按鈕的實現(xiàn)

用戶除了在關(guān)鍵幀中可以設(shè)置動作腳本外，在按鈕中也可以設(shè)置動作腳本，從而實現(xiàn)按鈕交互動畫。下面通過一個實例進行講解，具體操作步驟如下。

1）打開網(wǎng)盤中的“素材及結(jié)果\2.7.3交互按鈕的實現(xiàn)\交互按鈕的實現(xiàn)-素材.fla”文件。

2）執(zhí)行菜單中的“控制|測試影片”（組合鍵〈Ctrl+Enter〉）命令，可以看到小球依次沿4個橢圓運動的效果。

3）制作小球開始時靜止的效果。方法：執(zhí)行菜單中的“窗口|動作”面板，調(diào)出“動作”面板，然后在“動作”面板中單擊右上角的（代碼片段）按鈕，調(diào)出“代碼片段”面板。接著在“代碼片段”面板的“ActionScript/時間軸導(dǎo)航/在此幀處停止”命令處雙擊鼠標，如圖2-163所示，此時在“動作”面板中會自動輸入動作腳本，如圖2-164所示。同時會自動創(chuàng)建一個名稱為“Actions”的圖層，如圖2-165所示。最后執(zhí)行菜單中的“控制|測試影片”（組合鍵〈Ctrl+Enter〉）命令，測試影片，即可看到小球開始時靜止的效果。

4）制作單擊“播放”按鈕，小球開始依次沿4個橢圓運動的效果。方法：在舞臺中分別選擇“播放”按鈕實例，然后在“屬性”面板中將它的實例名稱命名為“pl”，如圖2-166所示。

5）在“代碼片段”面板的“ActionScript/事件處理函數(shù)/Mouse Click事件”命令處雙擊鼠標，如圖2-167所示，此時在“動作”面板中會自動輸入動作腳本，如圖2-168所示。然后刪除{}之間的注釋和腳本，再輸入腳本“play()”，如圖2-169所示。

6）執(zhí)行菜單中的“控制|測試影片”（組合鍵〈Ctrl+Enter〉）命令，即可測試小球開始時靜止，當單擊“播放”按鈕后開始依次沿4個橢圓運動的效果。

7）制作單擊“暫停”按鈕，小球暫停其依次沿4個橢圓運動的效果。方法：在舞臺中分別選擇“暫停”按鈕實例，然后在“屬性”面板中將它的實例名稱命名為“ps”，如圖2-170所示。

8）在“代碼片段”面板的“ActionScript/事件處理函數(shù)/Mouse Click事件”命令處雙擊鼠標，此時在“動作”面板中會自動輸入動作腳本。然后刪除{}之間的注釋和腳本，再輸入腳本“stop()”，如圖2-171所示。

9）至此，整個動畫制作完畢。下面執(zhí)行菜單中的“控制|測試影片”（組合鍵〈Ctrl+Enter〉）命令，打開播放器窗口，然后單擊“播放”和“暫停”按鈕即可看到效果。

2.7.4 類與綁定

類綁定是ActionScript 3.0代碼與Animate CC 2017結(jié)合的重要途徑。在ActionScript 3.0中，每一個顯示對象都是一個具體類的實例，使用Animate CC 2017制作的動畫也不例外。采用類和庫中的影片剪輯綁定，可以使漂亮的動畫具備程序模塊式的功能。一旦影片和類綁定后，放進舞臺的這些影片就被視為該類的實例。當一個影片和類綁定后，影片中的子顯示對象和幀播放都可以被類中定義的代碼控制。

類文件有什么含義呢？例如，用戶想讓一個影片剪輯對象有很多功能，比如支持拖動、支持雙擊等，可以先在一個類文件中寫清楚這些實現(xiàn)的方法，然后用這個類在舞臺上創(chuàng)建許多實例，此時這些實例全部具有類文件中已經(jīng)寫好的功能。只需寫一次，就能使用很多次，最重要的是它還可以通過繼承來重用很多代碼，為將來制作動畫節(jié)省很多時間。關(guān)于類的具體應(yīng)用請參見本書中的“5.10在小窗口中瀏覽大圖像效果”“5.11下雪效果”“5.12禮花綻放效果”和“5.13砸金蛋游戲”。