!『嵐設』免費電子報訂閱募集中!

在下方輸入您的Email訂閱就可收到本部落最新文章資訊喔!

Delivered by FeedBurner

      相信有在使用Flash的人一定對於『遮色片動畫』的製作不陌生,製作上也不難~~不過常常會有同學問設計嵐這樣的動畫技巧在實務上有哪些應用呢?這問題其實很大,因為動畫的製作除了軟體的操作之外,更多的成分在於『創意』的應用,如何用同樣的軟體指令變化出不同的動畫內容,是Flash動畫學習上要努力的地方;因此設計嵐寫了這篇教學文章,提供大家在使用遮色片動畫應用上的一個參考,各位可以根據需要將內容替換,就會是個不錯的作品喔!

 ◎完成品請點下方連結預覽:

 http://www.poweros.net/~kav68795/2.swf

1.開啟全新的Flash檔案。

1.jpg 

2.執行『修改』→『文件』,設定專案的尺寸以及速率等相關參數。

2.jpg 

3.這邊的重點在於專案的尺寸,『寬度』要等同於待會使用的影像素材,『高度』則要比影像素材大一些;至於速率和背景顏色則可以根據需要自行設定。

3.jpg 

4.舞台區的尺寸設定好之後,執行『檔案』→『匯入』→『匯入至舞台區』,將影像素材匯入。

 4.jpg 

5.選取要匯入的影像素材,然後按下『開啟』。

5.jpg 

6.素材匯入後,可利用『對齊』面板→對齊舞台→水平、垂直居中,讓素材放在舞台區正中間。

6.jpg 

7.接著在『時間軸』面板上新增一個『左邊捲軸』圖層,準備繪製畫軸。

7.jpg 

8.在『左邊捲軸』圖層上利用矩形工具+任意填色+無線條色彩,在舞台區左邊繪製一個高度等同影像的細長矩形。

8.jpg 

9.矩形畫好後利用『顏色』面板→將矩形填入『線性』漸層色,起始色以及結束色可以自訂,正中間請設定白色,好製作出卷軸的明暗立體感。

9.jpg 

10.接著用相同的方式,繪製捲軸上下的捲桿,長寬比例式當就好,漸層色彩可以深一點,但是中間一樣要使用白色做亮面。

10.jpg 

p.s.這個動作要注意,軸桿的亮面要對齊捲軸的亮面,才有一致性;此外,整個捲軸要畫在舞台區範圍內並且貼齊左邊緣,以免輸出時在舞台區外的物件會被切掉。

11.完成後選取全部的捲軸物件,執行『修改』→『轉換成元件』。

11.jpg 

12.為元件命名,類型則選擇『圖像』,然後按下『確定』。

12.jpg 

13.接著利用時間軸面板在新建一個『右邊捲軸』圖層,並且將上一步驟完成的捲軸圖像元件拖曳治舞台區,放在左邊捲軸的右邊。

13.jpg 

14.接著根據規畫的影片總長度,在適當影格反白選取三個圖層的影格→按右鍵→插入影格,將三個圖層的演出時間延長。

 14.jpg 

15.接著製作右邊捲軸動畫,在『右邊捲軸』圖層最後一個影格上按右鍵→插入關鍵影格。

15.jpg 

16.接著將舞台區的右邊捲軸元件水平往右移動至舞台區右邊(移動時按住SHIFT可以水平移動)。

16.jpg 

17.然後在兩個關鍵影格之間按右鍵→建立傳統捕間動畫。

17.jpg 

18.接著在底圖圖層上方建立『遮色片』圖層。

19.jpg  

19.利用矩形工具+任意填色+無線條色彩,準備繪製遮色片。

20.jpg 

20.在舞台區的左邊緣繪製一個與底圖影像等高,但是寬度不超過左邊捲軸的矩形。

21.jpg 

21.接著在『遮色片』圖層最後一個影格上按右鍵→插入關鍵影格。

22.jpg 

22.接著利用『自由變型工具』將遮色片色塊從右邊控制點往右拉長,寬度大約到右邊捲軸的一半。

23.jpg  

http://www.poweros.net/~kav68795/1.swf

24.jpg 

p.s.在這步驟一定要按下CTRL+ENTER進行測試,確定遮色片的動畫與右邊捲軸的移動可以配合在一起,不會速度不一,如果速度不一致就必須調整。

◎目前進度的動畫可點選以下連結進行預覽:

http://www.poweros.net/~kav68795/1.swf

      通常速度會不一致的主因在於遮色片的寬度不適當,可參考以下兩個畫面作為調整的參考:

A.第一個關鍵影格,遮色片的寬度如下,請參考下圖紅框處的顯示:

25.jpg 

B.第二個關鍵影格,遮色片要拉長到右邊捲軸的左邊緣,如下圖顯示:

26.jpg 

23.在遮色片圖層上按右鍵→遮色片,將色塊轉換成遮色片物件,動畫便製作完成。

27.jpg 

      所謂的『遮色片』就是用來定義顯示範圍的區域,在遮色片的色塊範圍內,會顯示下方的『底圖影像』;相反的在遮色片色塊範圍之外,則不會顯示底圖影像而是顯示更下層的背景顏色,於是我們便利用遮色片的特性,製作出一幅畫慢慢展開的動畫效果。

      上述的遮色片動畫設計手法,在Flash動畫的實務應用上,算是常用而且好用的技術,只要懂得變化且運用得當,可以設計出很多不同的動畫效果,大家不妨多試試。

 

 

 

 

創作者介紹

『嵐設』-設計教學部落

設計嵐 發表在 痞客邦 PIXNET 留言(4) 人氣()


留言列表 (4)

發表留言
  • 亞希斯.雷
  • 你的教學很詳盡^^

    我的串連貼紙也是利用Flash的遮色片+形狀補間做的^^
    因為沒啥時間就用簡單的技巧來去做~呵呵
  • 您太客氣了..^^..版大的用心經營有目共睹.^^.

    設計嵐 於 2010/05/12 10:00 回覆

  • 亞希斯.雷
  • 貼紙我帶走囉^^

    不嫌棄的話,來交換一下吧
    我的流量還算OK的^^
  • 禮尚往來是一定要的..^^..我也來去接收版大您的貼紙嚕..^^

    設計嵐 於 2010/05/12 10:01 回覆

  • happygo876
  • 第一次來你家,覺得獲益良好,你的教學部份,我大多有去上過課,老師講得很清楚,我聽得很模糊,更不會靈活運用,實在也很頭大
    以後可能會常常來取經,別嫌我煩吧!
  • 歡迎歡迎~~熱烈的歡迎~~不只要常來~~有問題也要常問!!我會很樂意回答的~~絕不會嫌煩^^

    設計嵐 於 2010/07/30 15:00 回覆

  • hugo0714
  • 要如何放在網頁上??
    要去那裡下載Flash??
  • 1.必須利用flash的發怖功能將作好的動畫檔案輸出程SWF格式,再利用網頁編輯軟體將動畫置入到網頁中再上傳或是將動畫檔上傳至支援SWF格式的網路相簿後再進行連結。
    2.Flash是付費軟體~~官方網站有試用版可供下載www.adobe.com.tw

    設計嵐 於 2011/01/04 19:36 回覆