【教學】你也可以學會用Flash做動畫(一)鏡頭平移背景動畫

以下內容轉載自我的部落格"亞希斯夢遊幻鏡",如果因為圖片外連流量超過負荷,無法看到完整圖文教學請"點擊這裡"前往觀賞。

引用或轉載麻煩點擊上方連結先前往我的部落格,在該文章的迴響處知會我一下,並請記得註明出處,以及加上我的部落格文章連結如有盜用絕對會追究法律責任,感謝配合。

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


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


按這裡檢視網頁 真糟糕...這裡好像沒辦法放Flash的動畫SWF檔...有心想學卻看不到的還是只好麻煩大家"點擊這裡"前往觀看完整教學

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

<!-- more -->


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的書絕大多數都很難懂 = =



 


 


 


 


 

2010-05-06 21:22 發佈
很詳細簡易的說明
來賓掌聲鼓勵鼓勵!!!
silverarrow wrote:
很詳細簡易的說明來賓...(恕刪)


感謝您的讚美^^
大家的支持是我繼續PO教學文的動力
歡迎參觀我的部落格 http://www.imaginelens.com/
yoshice wrote:
感謝您的讚美^^大家...(恕刪)


圖片外連使用量已達到上線..........
笨冰 wrote:
圖片外連使用量已達到...(恕刪)


拍謝,我前面有提到了...免費空間圖片外連流量有限
真的看不到煩請點此連結前往觀看

這真的不是故意的
歡迎參觀我的部落格 http://www.imaginelens.com/
內文搜尋
X
評分
評分
複製連結
Mobile01提醒您
您目前瀏覽的是行動版網頁
是否切換到電腦版網頁呢?