食譜｜料理教學｜愛的私房菜

　　依照我上回PO的公告，也就是今天要教大家如何利用Flash做動畫，有鑑於前幾次PO的PI、PS與Painter的教學都有人反應說太難...(我在檢討中了= =)，所以Flash就從最基本的背景動畫開始教起；不過雖說是從基本開始，但軟體的工具介面那些還是要靠自己去掌握哦，我個人因為時間有限，所以不大可能從最初的介面一一教起，當然也不大可能會有人能耐住性子看完介面教學，因此我的教學多半都會以實作為主，過程中自然而然的會有些觀念可以教給大家，至於已上手的專家如有不認同我觀念的，請看過就算，真想探討的也希望可以理性的提出，我一定會回文的。

　　那麼，就準備開始囉，今天所分享的背景動畫教學，重點會放在【無接縫】的背景動畫上面，實際上很少有人會在Flash中做構圖的，多半都會在AI或是PS裡面完成後再帶入到Flash裡面，但今天為了教學方便，所以我會教大家如何在Flash中完成簡易的背景圖，然後讓他毫無接縫並連貫的動起來。(如下圖)

好啦 = = 我知道畫的不是很好看，我很少用Flash畫圖的咩 (藉口...) ，接下來就要教大家如何製作了哦。

1.首先打開Flash CS4 (舊版的也行)，開啟ActionScript 3.0的新檔 (舊版開2.0就好)

2.新增完畢後，打開【檢視/尺規】

3.【檢視/貼齊/貼齊格線】

4.如下圖在畫面中的尺規處，用滑鼠左鍵拖曳出導引線來，分別拖曳4條導引線貼齊檔案舞台

5.待舞台四周的導引線架設完成後，回到【檢視/貼齊/貼齊格線】，將此項取消勾選

6.利用【矩形工具】，做【形狀繪圖】，筆畫=無，填色=#7DCDF4，拉出一個與場景一樣大小的矩形

7.鎖定圖層1，接著新增圖層2

8.【橢圓形工具】，【形狀繪圖】，筆畫=無，填色=白色，如下圖以堆疊法畫出白雲

9.最左邊的白雲請畫超出邊界，右邊的不用，畫好後用【直接選取】工具選左邊的雲，選好後按下快捷CTRL+C複製，然後CTRL+SHIFT+V原地貼上

10.維持選取狀態，在屬性面版參考這朵雲的X座標位置，如下圖將這數字加上550後就會多一朵雲偏移到右邊去

11.圖層2上鎖，接著新增圖層3

12.再一次【橢圓型工具】，這次用【物件繪製】，筆畫=#036B38，筆畫粗細=2，填色=#5FB744，如下圖般畫出幾個橢圓形來當作山，最左邊的記得超出邊界一些

13.接著以直接選取工具去適當的調整山的大小，然後選取最左邊的山

14.選好最左邊的山後，一樣按下快捷CTRL+C複製，CTRL+SHIFT+V原地貼上，接著如下圖去修改屬性面板的X參數，將原本數值加上550

15.把步驟14完成後，如下圖多了一座山在最右邊

16.鎖定圖層3，新增圖層4

17.【矩形工具】，【形狀繪圖】，筆畫=無，填色=#C4D700，如下圖拉出一個比場景略寬的矩形要來當作道路

18.【鋼筆/增加錨點工具】，如下圖適當的在道路上緣，點出幾個錨點來

19.用直接選取工具，將道路稍微拉出曲線狀，但是要讓左右兩端保持平整

20.將4個圖層的鎖定都解除

21.用直接選取工具將所有物件選取

22.選取完畢後，指定工作圖層在圖層1

23.快捷CTRL+X剪下所有物件，然後CTRL+SHIFT+V原地貼上在圖層1

24.CTRL+B將所有物件打散成為形狀繪圖，接著CTRL+D取消選取

25.將圖層2.3.4全部刪除

26.利用直接選取工具將場景外多餘的邊刪除

27.將所有圖層1的繪圖選取起來，快捷CTRL+G群組 (修改/群組 也可以)

 

28.選取剛建立的群組，快捷CTRL+C複製，CTRL+SHIFT+V原地貼上，然後照之前教的複製雲朵跟山的辦法，去修改屬性的X參數將兩張背景圖無接縫的合併起來

29.可以將顯示導引線關掉，來檢查是否有做到無接縫

30.將整張背景選取起來

31.按下快捷F8，來建立元件，並取名背景

32.建立完畢後，再按一次F8，再度建立一次元件，這次命名為背景影片
(因為我們要在元件中直接把背景動畫做好，所以要建立兩次元件)

33.在建立成元件的背景圖上，用滑鼠左鍵連點兩下，會如下圖進入元件修改視窗

34.在上方的時間軸120格處，按下快捷F6新增關鍵影格

35.選定120格的關鍵影格後，在屬性面板修改背景圖的X參數-550，讓背景圖左移到貼齊場景右邊緣
(第一格關鍵影格可以設定為X=0、Y=0)

36.在1~120格之間隨便一處，按下滑鼠右鍵選擇【建立傳統補間動畫】

37.在119格按下F6建立關鍵影格，接著在120處按下快捷SHIFT+F5刪除影格
(因為一直跑到120格會跟第一格影格內容有部分重複造成動畫停頓，所以將120刪除可以跑得更順沒有停頓)

38.就像下圖那樣，如果不做此修改想讓畫面變順就只能去寫一小段程式碼了
(這是懶人偷雞法 = =)

39.這樣就大功告成了，可以去存檔囉

40.最後可以試著按下CTRL+ENTER，就可以預覽你完成的動畫了

---

PS：裡面有很多操作上的問題，例如為什麼要用形狀繪圖或是物件繪製等諸如此類的問題，其實都是些很基本的概念，因為這一篇的圖文太多，怕開啟不順，所以這些需要更多圖文去解釋的基本概念就不在此闡述，下次有時間我會將這些基本概念整理完畢一次補上，等不及的請先去買一些基礎的書來學習，不過我想可能也看不大懂...畢竟Flash的書絕大多數都很難懂 = =