旋轉運動

目標
製作鐘針旋轉並以按鈕控制之



學習新功能

• 移動補間→旋轉→順時

步驟

一、製作圓盤、字盤、長針、短針、軸心栓

1. 檢視 > 尺規。
2. 檢視 > 導引線 > 顯示導引線。
3. 從上側及左側的尺規拉一水平及垂直導引線相交於舞台中央。
4. 檢視 > 導引線 > 鎖定導引線。
5. 將內定圖層更名為「圓盤」，以圓形工具，按Alt+Sht鍵，在舞台上畫一圓盤，圓心落在導引線相交處。
   
6. 設定圓盤的色彩。
7. 在屬性視窗內調整圓盤外框線的粗細。

(一) 製作數盤

1. 新增圖層，取名為「數盤」。
   
2. 用文字工具在圓盤正上方鍵入數字「12」。
3. 以文字工具選取「12」成反白，於屬性視窗內選擇「齊中」。
4. 以「自由變形工具」選取數字「12」，將其物件中心移至兩導引線的交點。
5. 在「數盤」的第13影格新增一關鍵影格。
6. 於第2到12影格間影按任一格點，並於屬性視窗之「補間動畫」欄選擇「移動」。
7. 於「旋轉」欄選「順時針」。
8. 於時間軸上選第2到12影格，按滑鼠右鍵於文字選項欄選擇「轉換成關鍵影格」。
9. 依序將第2到12影格的數字改為1到11。
10. 將第13影格移除。
11. 將第1到12影格的數字打散一次，接著再將10、11及12打散一次。
12. 點按第2影格。編輯 > 剪下。
13. 點按第1影格，編輯 >在原地貼上。
14. 重復上二步驟，將第3~13影格的數字剪下，原地貼到第1影格。
15. 選取第2~12影格，移除影格。

(二) 製作時針

1. 新增一圖層，取名為「時針」，從兩導引線的交點畫一直立線，於屬性視窗內修改其色彩及粗細。
2. 選取舞台上的時針，修改 > 轉換為元件，選圖像類型，將該元件取名為「時針」。
3. 選取舞台上的針，刪除之。
   

(三) 製作分針

1. 新增一圖層，取名為「分針」，從舞台中央往上畫一直立線，於屬性對話框內修改其色彩及粗細。
2. 選取舞台上的分針，修改 > 轉換為元件，選圖像類型，將該元件取名為「分針」。
3. 選取舞台上的分針，刪除之。
   

(四) 製作軸心栓

1. 新增一圖層，取名為「軸心栓」，畫一小圓，圓心落在兩導引線的交點。

二、製作鐘針轉動元件
(一) 分針轉動影片片段

1. 新增元件，選取影片片段模式，取名為「分針clip」。
2. 從元件庫將「分針」元件拖拉放到舞台。
3. 以「自由變形工具」選取分針，將其物件中心移至物件的底端。
4. 利用對齊視窗，讓「時針」的物件中心對於原點。
5. 在第61影格新增一關鍵影格。
   擬將分針以60格旋轉一圈，因有一格會重疊，故設61。
   
6. 於第2到60影格間點按，並於屬性視窗之「補間動畫」欄選擇「移動」。
7. 於「旋轉」欄選「順時針」。
8. 於時間軸上選第2到60影格，按滑鼠右鍵選擇「轉換成關鍵影格」。
9. 將第61影格移除。

(二) 時針轉動影片片段

1. 新增元件，選取影片片段模式，取名為「時針clip」。
2. 從元件庫將「時針」元件拖拉放到舞台。
3. 以「自由變形工具」選取時針，將其物件中心移至物件的底端。
4. 利用對齊視窗，讓「時針」的物件中心對於原點。
5. 在第721影格新增一關鍵影格。
   由於擬將分針以60格旋轉一圈，故12個小時須用到720格，因繞一圈會有一格重疊，所以取721。
   
6. 於第2到720影格間點按，並於屬性視窗之「補間動畫」欄選擇「移動」。
7. 於「旋轉」欄選「順時針」。
8. 於時間軸上選第2到720影格，按滑鼠右鍵選擇「轉換成關鍵影格」。
9. 滑鼠右鍵點按第721影，選擇移除影格。

三、製作按鈕及AS

1. 切換到「場景1」。
2. 將「分針clip」影片片段移入舞台中的分針層。將其實體名稱更名為longhand_clip。
3. 將「時針clip」影片片段移入舞台中的時針層，將其實體名稱更名為shorthand_clip。
4. 新增一圖層，取名為「按鈕」。
   
5. 視窗 > 庫存元件，拖拉放播放按鈕元件及暫停元件至按鈕層，分別將其實體名稱取名為「play_btn」及「pause_btn」。
6. 新增圖層，取名為Action。按F9，鍵入語令如下：
   stop();
   play_btn.addEventListener(MouseEvent.CLICK, clickplay_btn);
   function clickplay_btn(event:Event):void {
   trace ("play_btn");
   shorthand_clip.play();
   longhand_clip.play();
   }
   
   pause_btn.addEventListener(MouseEvent.CLICK, clickpause_btn);
   function clickpause_btn(event:Event):void {
   trace ("pause_btn");
   shorthand_clip.stop();
   longhand_clip.stop();
   }
7. 測試影片。
8. 存檔。

導引線運動

目標
以按鈕控制順路徑移動的影片片段

▲車子沿山起伏，點按按鈕以觀察暫停及播放的效果。

學習新功能

• 新增導引線

步驟
一、選用影片版本

1. 啟動Flash。
   
2. 新增一影片，選Flash CS3。
   

二、製作具導引線動畫的影片片段

(一) 製作小車圖像元件

1. 新增一圖形元件，畫一小車。
2. 視窗 > 對齊，將小車的底部對齊畫面原點。
   

(二) 製作影片片段元件

1. 新增一影片片段元件，將內定圖層取名為「背景」，選工具列下方的漸層色，於該層畫一漸層色大圓球。
2. 視窗 > 顏色，進行色彩調配。
3. 以「選取細部工具」將大圓的上部修改為山巒起伏狀。
4. 在「背景」層之上，新增一圖層，取名為「草葉」，畫一些裝飾用的草葉。
   
5. 在「草葉」層之上，新增一圖層，取名為「移動」，從元件庫把小車拖拉放到舞台上，並第1及第48影格間做一移動補間。

(三) 新增導引線層

1. 滑鼠右鍵點按「移動」層，從文字選項中選擇「新增導引線」，將新出現的圖層取名為「導引線」。
2. 點按「背景」層，點按圖形輪廓線，剪下。
3. 點按「導引線」層第一影格，編輯 > 在原地貼上。
4. 檢視 > 尺規，從上方拉一尺規與圓相交。
   注意：為避免擦掉其它圖層的物件，所以宜將其它圖層鎖死。
   
5. 從工具箱選「橡皮擦工具」，擦掉尺規下方的圓弧。
   
6. 將「移動」層的第1及第48鍵影格之圖像，分別移到導引線的始點及終點。
7. 視需要在「移動」層第1及第48影格內新增關鍵影格，並以變換工具調整小車前行方向。

三、在場景內增設AS

1. 點按「場景1」，離開影片片段元件的製作。
   
2. 將影片片段移入舞台，選取該影片片段，於屬性視窗內，將該影片片段之在舞台上的實體名稱改名為「mounting_clip」。
3. 新增一圖層，取名為「按鈕」。
   
4. 視窗 > 庫存元件，拖拉放播放按鈕元件及暫停元件至按鈕層，分別將其實體名稱取名為「play_btn」及「pause_btn」。
5. 新增一圖層，取名為「Action」，選取第一影格，按F9鈕，輸入以下的語令：
   //讓影片停在第一格等待
   stop();
   
   //設定函數，讓實體名稱為play_btn的按鈕被點按時會播放實體名稱為mounting_clip的影片片段。
   play_btn.addEventListener(MouseEvent.CLICK, clickplay_btn);
   function clickplay_btn(event:Event):void {
   trace ("play_btn");
   mounting_clip.play();
   }
   
   //設定函數，讓實體名稱為pause_btn的按鈕被點按時會停播實體名稱為ball_clip的影片片段。
   pause_btn.addEventListener(MouseEvent.CLICK, clickpause_btn);
   function clickpause_btn(event:Event):void {
   trace ("pause_btn");
   mounting_clip.stop();
   }
   
6. 測試影片。
7. 存檔。

媽祖露臉

目標
製作伸鏡入廟看媽祖的動畫



步驟
一、在ToonBoon做伸鏡動畫

(一)繪製動畫元素

1. 啟動ToonBoom。
2. 新增一專案，設定其畫面大小為640x360。
   
3. 視窗 > 繪圖
   
4. 分別畫出廟、順風耳、千里眼、媽祖、背景等物件。

(二)設定各動畫元素的影格數

1. 滑鼠右鍵點按Timeline的各元素層，選Extend Exposuere，為各物件設影格數60格。

(三)調整各動畫元素的Z軸深度

1. 選Timeline的元素層，點按Top View，被選的元素會呈深綠，將各元素排列，廟離相機最近，其次是順風耳與千里眼，接著是媽祖，最後是背景。

(四)調整各動畫元素的正面

1. 從Timeline視窗選各動畫元素，進入Camera視窗，觀看其正面配置。

(五)設定相機的peg

1. 於Timeline視窗，將內定的Peg層更名為「Camera_Peg」。
2. 將內定的Camera圖層拖拉放給「Camera_peg」。
3. 滑鼠右鍵點按「Camera_Peg」時間軸上的第1影格，選擇「Add Keyframe」。
4. 同上一步驟，在「Camera_Peg」時間軸上的第20、40、60影格，選擇「Add Keyframe」。
5. 進入Side View模式，從工具列選用Motion工具，移動Peg的節點。
6. 進入Camera視窗，點按播放鈕，測動伸鏡結果，調整之，迄滿意為止。

(六)設定動畫元素的peg

1. 點按Timeline視窗上方的「Add Peg」鈕以新增一peg圖層，將該圖層更名為「SoonPhone_peg」。
2. 把順風耳圖層拖拉放到「SoonPhone_peg」層。
3. 依序在「SoonPhone_peg」時間軸上的第40及60影格，以「Add Keyframe」新增關鍵影格。
4. 進入Top View模式，從工具列選用Motion工具，移動Peg的節點，使順風耳往右移動。
5. 同上三步驟，新增Senliyen_peg，將千里眼做出在影格40往左移的動畫。

二、存檔

1. 儲存檔案。
2. 輸出為swf，取名為mazu_1.swf

三、在Flash新增Play及Replay按鈕

1. 開啟Flash，設定畫面大小為640x360。
2. 檔案 >匯入至舞台，選mazu_1.swf。
3. 新增一圖層，取名為「按鈕」。
4. 加入播放及重播按鈕。(參考伸鏡入景法之步驟十~十二)
5. 加入AS語令。(參考伸鏡入景法之步驟十三)
   
6. 另存新檔，測試影片。
   
7. 將上一步驟的swf取名為mazu_btn.swf，將它上傳到部落格。
   
   

遮色片應用

目標
遮色片的應用

▲左側大風扇附屬在遮色片之下，且可由按鈕控制。

學習新功能

• 遮色片

觀念
遮色片是一圖層，會使緊接其下的圖層(又稱被遮層)不見，若欲看被遮層，須在遮色片層畫出實色區，則被遮層只有實色區範圍內的圖像會出現。

步驟
一、製作影片片段元件

1. 製作風扇圖像元件，注意軸心對齊舞台原點。
2. 以風扇圖像元件製作一移動補間，於屬性對話框內之旋轉欄內選擇順時鐘。
   補充：
   旋轉時，須以「自由變形工具」將物件的中心移到軸心點。
   當設定成轉一圈時，循環播放時，由首尾影格會重復，所以尾格須去掉。作法是在移動補間的時間軸內選首尾之外的其他影格，滑鼠右鍵，於文字選項內選擇「轉換成關鍵影格」。再將末尾的關鍵影格移除。
   

二、設定實體

1. 切換到場景。
2. 將內定圖層取名為「大風扇」。
3. 新增一圖層，取名為「小風扇」。
4. 在「大風扇」、「小風扇」層，從元件庫拖拉放影片片段一次，分置舞台左右。
5. 利用縮放工具，將上述二影片片段縮放成左大右小。
6. 選取舞台上的大影片片段，在屬性視窗內將實體名稱設為「big_fan」。
   

三、加入遮色片
利用遮色片做動畫

1. 新增圖層，取名「遮色片」。
2. 在「遮色片」層畫一實色圓形，用細部選取工具，將圓形改為有機形，使其位置及大小可以蓋住大風扇百分九十左右。
3. 選取該有機形輪廓，滑鼠右鍵，選擇「剪下」。
4. 在「遮色片」層上方新增一圖層，取名為「輪廓」。
5. 編輯 > 在原地貼上。
   
6. 滑鼠右鍵點按「遮色片」層，於文字選項中選擇「遮色片」。
7. 測試影片
   比較加入遮色片前後的差異。

四、加入背景

1. 新增圖層，取名為「小草」，將該圖層置於「風扇」層之下，以畫筆工具畫數筆草葉。
2. 新增圖層，取名為「背景」，將該圖層置於「小草」層之下，以漸層色調畫一矩形漸層色塊。

五、將背景移入遮入片底下

1. 將「小草」圖層直接拖拉放到「大風扇」層，並居於「大風扇」層之下。
2. 將「背景」圖層直接拖拉放到「小草」層，並居於「小草」層之下。
3. 測試影片。

六、新增按鈕

1. 在「小風扇」圖層上方新增一圖層，取名為「按鈕」。
   
2. 視窗 > 庫存元件，拖拉放播放按鈕元件及暫停元件至按鈕層，分別將其實體名稱取名為「play_btn」及「pause_btn」。
3. 在「按鈕」圖層上方新增一圖層，取名為「Action」，按F9鈕，輸入以下的語令：
   //讓影片停在第一格等待
   stop();
   
   //設定函數，讓實體名稱為play_btn的按鈕被點按時會播放實體名稱為bigfan_clip的影片片段。
   play_btn.addEventListener(MouseEvent.CLICK, clickplay_btn);
   function clickplay_btn(event:Event):void {
   trace ("play_btn");
   big_fan.play();
   }
   
   //設定函數，讓實體名稱為pause_btn的按鈕被點按時會停播實體名稱為ball_clip的影片片段。
   pause_btn.addEventListener(MouseEvent.CLICK, clickpause_btn);
   function clickpause_btn(event:Event):void {
   trace ("pause_btn");
   big_fan.stop();
   }
   
   
4. 存檔。
5. 測試影片。