第三單元 遮色片動畫 - 碁峰資訊epaper.gotop.com.tw/PDFSample/AEU009900.pdf ·...

7
目錄 v 第三單元 遮色片動畫 在製作動畫的時候如果只想顯示物件中某部分,可以利 用遮色片來達到這個效果。遮色片的原理就好像現實生 活中拿兩張色紙,把上面一張色紙剪出一個形狀,就可 以透過這個形狀看到下一張色紙的顏色。利用遮色片效 果可以做出掃光等特效的動畫。 3-1 遮色片與圖層 ...................................................... 3-2 3-2 範例實習 - 淡入淡出遮色片動畫 ......................... 3-5 3-3 掃光特效............................................................ 3-11 3-4 範例實習 - 文字掃光特效 .................................. 3-11 3-5 移動補間動畫路徑之應用.................................. 3-17 3-6 範例實習 - 落花特效.......................................... 3-17 3-7 計時器的功能 .................................................... 3-26 3-8 範例實習 - 定時換圖.......................................... 3-27 第四單元 聲光效果 製作動畫或遊戲等多媒體內容時如果能配上聲音及音樂 將帶來更豐富的使用者體驗。Flash 能夠將聲音檔匯入元 件庫中,視不同的需求將這些聲音檔加在場景或元件內, 在不同的事件中播放。 4-1 加入聲音的使用................................................... 4-2 4-2 場景串連.............................................................. 4-8 4-3 控制場景播放 .................................................... 4-10 4-4 輸出成網頁動畫檔及執行檔.............................. 4-10 4-5 範例實習 - 場景切換.......................................... 4-12 第五單元 ActionScript 3.0 設計好的 Flash 動畫,如果想要有互動的功能,就必須使 用程式來控制。例如:滑鼠移到某個按鈕上,Flash 動畫 就開始播放,或者是按了某個按鈕,就開啟了某個網頁 等等,這些用來產生互動效果的程式就是 ActionScript5-1 ActionScript 基本語法 ......................................... 5-2 5-2 事件處理函數之應用 ........................................... 5-8 5-3 範例實習 - 控制冰淇淋車 .................................... 5-9

Transcript of 第三單元 遮色片動畫 - 碁峰資訊epaper.gotop.com.tw/PDFSample/AEU009900.pdf ·...

Page 1: 第三單元 遮色片動畫 - 碁峰資訊epaper.gotop.com.tw/PDFSample/AEU009900.pdf · 第五單元 ActionScript 3.0 設計好的Flash 動畫,如果想要有互動的功能,就必須使

目錄

v

第三單元 遮色片動畫

在製作動畫的時候如果只想顯示物件中某部分,可以利

用遮色片來達到這個效果。遮色片的原理就好像現實生

活中拿兩張色紙,把上面一張色紙剪出一個形狀,就可

以透過這個形狀看到下一張色紙的顏色。利用遮色片效

果可以做出掃光等特效的動畫。

3-1 遮色片與圖層 ......................................................3-2

3-2 範例實習 -淡入淡出遮色片動畫 .........................3-5

3-3 掃光特效 ............................................................3-11

3-4 範例實習 -文字掃光特效 ..................................3-11

3-5 移動補間動畫路徑之應用 ..................................3-17

3-6 範例實習 -落花特效 ..........................................3-17

3-7 計時器的功能 ....................................................3-26

3-8 範例實習 -定時換圖 ..........................................3-27

第四單元 聲光效果

製作動畫或遊戲等多媒體內容時如果能配上聲音及音樂

將帶來更豐富的使用者體驗。Flash能夠將聲音檔匯入元

件庫中,視不同的需求將這些聲音檔加在場景或元件內,

在不同的事件中播放。

4-1 加入聲音的使用 ...................................................4-2

4-2 場景串連 ..............................................................4-8

4-3 控制場景播放 ....................................................4-10

4-4 輸出成網頁動畫檔及執行檔 ..............................4-10

4-5 範例實習 -場景切換 ..........................................4-12

第五單元 ActionScript 3.0設計好的 Flash動畫,如果想要有互動的功能,就必須使

用程式來控制。例如:滑鼠移到某個按鈕上,Flash動畫

就開始播放,或者是按了某個按鈕,就開啟了某個網頁

等等,這些用來產生互動效果的程式就是 ActionScript。

5-1 ActionScript基本語法 .........................................5-2

5-2 事件處理函數之應用 ...........................................5-8

5-3 範例實習 -控制冰淇淋車 ....................................5-9

Page 2: 第三單元 遮色片動畫 - 碁峰資訊epaper.gotop.com.tw/PDFSample/AEU009900.pdf · 第五單元 ActionScript 3.0 設計好的Flash 動畫,如果想要有互動的功能,就必須使

第三單元:遮色片動畫

3-5

3-2 範例實習 -淡入淡出遮色片動畫(參考檔:samples\3\PicMaskOK.swf)

1 開啟預先準備好的檔案(參考檔:samples\3\PicMask.fla)

執行「檔案」→「開啟舊檔」,開啟 PicMask.fla。

製作m_girl元件在「背景」圖層上面新增「girl」圖層。

2

匯入書附光碟中的女孩檔案,執行「檔案」→「匯入」→「匯入至元件庫」(檔名:

samples\3\girl1.png、girl2.png)。

Page 3: 第三單元 遮色片動畫 - 碁峰資訊epaper.gotop.com.tw/PDFSample/AEU009900.pdf · 第五單元 ActionScript 3.0 設計好的Flash 動畫,如果想要有互動的功能,就必須使

Flash & ActionScript 3.0 絕對出色影音動畫與互動媒體設計

3-6

用「選取工具」將

「m_girl1」元件從元

件庫拖曳到「girl」圖

層影格 1的舞台左邊。

此時會自動產生兩個「圖像」元件,名稱會是「元件」字

頭,在這裡是「元件 2」、「元件 3」,依據對應的 png 檔,

將這兩個元件分別命名成「m_girl1」、「m_girl2」。

在「m_girl1」元件上按滑鼠右鍵,選擇

「轉換成元件」,輸入元件名稱「m_girl」。

Page 4: 第三單元 遮色片動畫 - 碁峰資訊epaper.gotop.com.tw/PDFSample/AEU009900.pdf · 第五單元 ActionScript 3.0 設計好的Flash 動畫,如果想要有互動的功能,就必須使

第三單元:遮色片動畫

3-7

利用移動補間動畫製作淡入淡出效果

在「m_girl」元件上面按滑鼠左鍵兩下,編輯影片片段元件。

在圖層 1的影格 130上按滑鼠右鍵,選擇「插入影格」。

3

在影格 1和影格 130之間按滑鼠右鍵,選

擇「建立移動補間動畫」。

在影格 1選取「m_girl1」元件,打開「屬

性」面板,在顏色效果的樣式中選擇

「Alpha」,並將 Alpha設成 0。

Page 5: 第三單元 遮色片動畫 - 碁峰資訊epaper.gotop.com.tw/PDFSample/AEU009900.pdf · 第五單元 ActionScript 3.0 設計好的Flash 動畫,如果想要有互動的功能,就必須使

Flash & ActionScript 3.0 絕對出色影音動畫與互動媒體設計

3-8

在影格 130選取「m_girl1」元件,打開「屬性」面板,在顏色效果的樣式中選擇「Alpha」,

並將 Alpha設成 0。

同時按鍵盤上的「Ctrl」鍵和「Enter」鍵,可以預覽淡入淡出動畫的效果。

利用形狀補間動畫製作遮色片效果

現在要做出一開始只有看到臉,逐漸放大看到全身的遮色片效果。在圖層 1的上面

新增圖層。Flash 會自動命名成圖層 2。

在影格 20選取「m_girl1」元件,打開「屬性」面板,在顏色效果的樣式中選擇「Alpha」,

並將 Alpha設成 100。

在影格 110上面按滑鼠右鍵,選擇「插入關鍵影格」,再選擇「顏色」。

4

Page 6: 第三單元 遮色片動畫 - 碁峰資訊epaper.gotop.com.tw/PDFSample/AEU009900.pdf · 第五單元 ActionScript 3.0 設計好的Flash 動畫,如果想要有互動的功能,就必須使

第三單元:遮色片動畫

3-9

在圖層 2的影格 1用「橢圓形工具」在舞台左邊的位置畫一個橢圓。

在圖層 2的影格 20用「自由變形工具」將橢圓形放大。

Page 7: 第三單元 遮色片動畫 - 碁峰資訊epaper.gotop.com.tw/PDFSample/AEU009900.pdf · 第五單元 ActionScript 3.0 設計好的Flash 動畫,如果想要有互動的功能,就必須使

Flash & ActionScript 3.0 絕對出色影音動畫與互動媒體設計

3-10

在圖層 2的影格 21按滑鼠右鍵,選擇「插入空白關鍵影格」。讓遮色片的作用只到圖層

2的影格 20。

在圖層 2的名稱上面按滑鼠右鍵,選擇「遮色片」,會把圖層 2變成「遮色片圖層」,圖

層 1自動變成「被遮色圖層」。

在圖層 2的影格 1和影格 20之間按滑鼠右鍵,選擇「建

立形狀補間動畫」。

同時按鍵盤上的「Ctrl」鍵和「Enter」鍵,可以預覽遮色片的效果。