Post on 07-Aug-2020
transcript
目錄
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
第三單元:遮色片動畫
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)。
Flash & ActionScript 3.0 絕對出色影音動畫與互動媒體設計
3-6
用「選取工具」將
「m_girl1」元件從元
件庫拖曳到「girl」圖
層影格 1的舞台左邊。
此時會自動產生兩個「圖像」元件,名稱會是「元件」字
頭,在這裡是「元件 2」、「元件 3」,依據對應的 png 檔,
將這兩個元件分別命名成「m_girl1」、「m_girl2」。
在「m_girl1」元件上按滑鼠右鍵,選擇
「轉換成元件」,輸入元件名稱「m_girl」。
第三單元:遮色片動畫
3-7
利用移動補間動畫製作淡入淡出效果
在「m_girl」元件上面按滑鼠左鍵兩下,編輯影片片段元件。
在圖層 1的影格 130上按滑鼠右鍵,選擇「插入影格」。
3
在影格 1和影格 130之間按滑鼠右鍵,選
擇「建立移動補間動畫」。
在影格 1選取「m_girl1」元件,打開「屬
性」面板,在顏色效果的樣式中選擇
「Alpha」,並將 Alpha設成 0。
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
第三單元:遮色片動畫
3-9
在圖層 2的影格 1用「橢圓形工具」在舞台左邊的位置畫一個橢圓。
在圖層 2的影格 20用「自由變形工具」將橢圓形放大。
Flash & ActionScript 3.0 絕對出色影音動畫與互動媒體設計
3-10
在圖層 2的影格 21按滑鼠右鍵,選擇「插入空白關鍵影格」。讓遮色片的作用只到圖層
2的影格 20。
在圖層 2的名稱上面按滑鼠右鍵,選擇「遮色片」,會把圖層 2變成「遮色片圖層」,圖
層 1自動變成「被遮色圖層」。
在圖層 2的影格 1和影格 20之間按滑鼠右鍵,選擇「建
立形狀補間動畫」。
同時按鍵盤上的「Ctrl」鍵和「Enter」鍵,可以預覽遮色片的效果。