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

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

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

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

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

snap0345.jpg

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

snap0346.jpg

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

snap0347.jpg

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

snap0348.jpg

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

snap0351.jpg

snap0352.jpg

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

snap0353.jpg

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

snap0354.jpg

snap0355.jpg

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

snap0359.jpg

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

snap0361.jpg

snap0363.jpg

snap0364.jpg

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

snap0365.jpg

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

snap0366.jpg

snap0367.jpg

snap0368.jpg

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

snap0369.jpg

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

snap0370.jpg

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

snap0371.jpg

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

snap0372.jpg

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

snap0373.jpg

snap0374.jpg

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

snap0375.jpg

snap0376.jpg

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

snap0377.jpg

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

snap0378.jpg

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

snap0379.jpg

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

snap0380.jpg

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

snap0381.jpg

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

snap0382.jpg

25.將圖層2.3.4全部刪除

snap0383.jpg

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

snap0385.jpg

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

snap0388.jpg 

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

snap0389_1.jpg

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

snap0390.jpg

snap0391.jpg

30.將整張背景選取起來

snap0393.jpg

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

snap0394.jpg

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

snap0395.jpg

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

snap0396.jpg

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

snap0397.jpg

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

snap0398.jpg

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

snap0399.jpg

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

snap0403.jpg

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

snap0404.jpg

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

snap0401.jpg

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


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

 

 


f
arrow
arrow
    全站熱搜

    魏小愛 發表在 痞客邦 留言(12) 人氣()