依照我上回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
創作者介紹

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

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


留言列表 (12)

發表留言
  • flamefox
  • 光是個簡單的背景,看起來就滿複雜的
    加上我也沒這套軟體,暫時應該是沒機會去嘗試了...QQ
  • 其實背景很好畫,軟體的話...
    只要你想...應該也不難到手吧,呵呵

    魏小愛 於 2010/05/06 18:56 回覆

  • 金芋涼圓
  • 寫的很用心,簡單說明,重點明確,很不錯的教學!
  • 多謝您的讚美,大家的支持是我繼續的原動力^^

    魏小愛 於 2010/05/07 00:59 回覆

  • jeffyu520
  • 很優的教學哦!…比書上的清楚多了…
  • 感謝您的讚美哦^^
    大家的支持就是我創作與教學的動力

    魏小愛 於 2010/05/07 13:20 回覆

  • maizizi
  • 若移動補間有lag那該怎麼調正呢?
  • 這個範例只需要做傳統補間
    有很多原因都會造成畫面看起來LAG
    只好針對影格、背景接縫處、步驟37有沒有做等等一個一個檢查
    如果你問的是自己的作品,可以提出來借我看,然後我才有辦法給你意見讓你參考哦^^

    魏小愛 於 2010/05/12 21:27 回覆

  • maizizi
  • 呵!那可就麻煩你了~
    因檔太大只選一個影片片段給您
    我不管是調fps40或是28都會有些lag或是抖動的感覺
    我實在不知為何有些人製作時會有移動補間範圍內設好多個關鍵影格,但我也不知要怎麼設才會順?
    http://www.badongo.com/file/22618152
  • 我看完了...只是你的圖檔超出舞台範圍太多導致他一直閃爍
    看是要把圖檔照比例縮小還是用遮色片都OK
    還是說你把你的想法告訴我,有時間我幫你改一下
    老實說...加減速感覺也怪怪的 = =
    Fps最多到24就很順暢了...不需要到40啦QQ

    魏小愛 於 2010/05/13 16:12 回覆

  • 電腦醫生
  • 好棒的教學文,希望有機會學習購高階的Flash製作。
  • 有機會的,歡迎加入我的FB粉絲團,Flash會一直教到程式碼,中間更有些其他老師沒在教的小撇步^^

    魏小愛 於 2010/05/13 18:29 回覆

  • maizizi
  • 呵!我會用那麼長也是因為想把原本圖的空間感全展示出來
    所以嘍~可是縮小的話我的版型就會有空白!
    我給你的就是要呈現那樣大小
    實說我還真的不會用太難的補間,我只會簡單的
    就是二個關鍵影格一條移動補間!哈
    一開始我也覺得因為圖太長才會這樣!
    但卻想要這樣的效果,還是無法修正呢?
  • 不是圖太長的原因,是沒遮到的顯示範圍超過太多的問題
    可以做到一模一樣的效果,只你可能要考慮把超出範圍縮小或是利用遮色片
    原則上是建議遮色片,就可以做出一樣的效果

    PS:新成立的粉絲團需要大家的支持哦^^

    魏小愛 於 2010/05/14 18:27 回覆

  • maizizi
  • 喔~不是因為設大小就可以了呀!
    用個遮色片會比較好是嗎?我來試試...
    請問你的flash檔是放在哪個空間呀!
  • 恩,先用個遮色片試試看
    我放在免費網頁空間~

    魏小愛 於 2010/05/18 18:52 回覆

  • 悄悄話
  • o迷苓o
  • 我還以為只要移動漸變就好了。((遭毆

    突然想到感覺執行後會怪怪的,嗯。
  • 這樣的確是會怪怪的...

    題外話:原來我還有Flash動畫教學要寫啊...
    都不知道欠多久了= =

    魏小愛 於 2010/07/12 21:15 回覆

  • 訪客
  • 謝謝你的小撇步 很管用 :P
  • 不客氣^^

    魏小愛 於 2011/09/19 23:06 回覆

  • yuhan
  • 感謝提供教學^O^
    不過步驟35. 我做起來是要-550耶!
  • 是-550沒錯,往左移是減,往右移是正,多謝指正哦^^

    魏小愛 於 2012/10/27 06:20 回覆