媽祖露臉

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



步驟
一、在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，將它上傳到部落格。
   
   

伸鏡入景技法

目標
利用ToonBoom營造運鏡入景的特效

步驟
一、製作場景背景色

1. 啟動ToonBoom。
2. File > Animation Properties...設定影片畫面的大小為640x360。
3. Window > Scene Manger，在該視窗的Scene欄按右鍵，點按 Properties...，再點按Background Color色票，從Select Color視窗內選取或設定場景的背景色。
   

二、為向量圖像訂製色盤

1. Window > Show Properties。
2. 點按Properties視窗上的Color標貼。
3. 滑鼠右鍵點按Name欄，選Palette→New Palette。
4. 將Name欄內預設的名稱改為你所要的色盤名。
5. 再點按該視窗上的+圖示，從調色盤上選色及取名。
6. Window > Show Properties，點按Drawing標貼。
   
7. 點按繪圖工具，在Drawing工作區繪製一座山，找對應的色盤選所需的色相。
8. Window > Show Exposure Sheet。
9. 點按物件的第一穴位，按滑鼠右鍵，選Rename以更改該物件的名稱為Mountain1，該名稱會同時在Timeline上被更名完成。
10. 在Exposure Sheet上點按Drawing圖示，再依步驟7到9製作第二座及第三座山，分別取名為取名為Mountain2、Mountain3。
11. 同上一程序繪製二片雲及一座湖，分別取名為Cloud1、Cloud2及Lake。

三、為物件設出場格數

1. Window > Show Exposure Sheet。
2. 點按物件的第一穴位，按滑鼠右鍵，選Rename以更改該物件的名稱，該名稱會同時在Timeline上被更名完成。
3. 點按物件的第一穴位，按滑鼠右鍵，選Set Expoure...，於數值欄內定出場格數。

四、新增Peg，將物件attach在peg

1. 在Timelin視窗內新增一個Peg，更名為Cloud。
2. 在Timeline視窗內將Cloud1層直接拖拉放到上一步驟的Cloud Peg層。
   該peg會出現一倒三角形。
3. 於Timeline視窗，將內定的Peg層更名為「Camera Peg」。
   
4. 在Timeline視窗內將Camera元素層直接拖拉放到上一步驟的Camera Peg層。

五、調整物件的景深

1. 在Timeline視窗選取圖像元素層，該層在Side View或Top View視窗內會變成一深綠色直線，以移位工具移動該淺綠線，即可調整物件的景深。

六、做動畫和運鏡

1. 在Timeline視窗內點按Cloud Peg，於想定的影格按滑鼠右鍵，設為關鍵影格。
2. 再將另一影格設為關鍵影格，點按該影格。
3. 換到Top View視窗，點選工具列最下方的Motion工具，到Top View視窗內移動紅色的peg標示。
   
4. 同前三個步驟，在Top View調動Peg圖示 (一個紅圓圈)，使相機呈前推的運鏡。

七、存檔

1. File > Save As，取名存檔。
   其儲存會成為一個資料夾，內含一個副檔名為tbp的檔案，外加數個資料夾，各含一個資料。
   

八、輸出swf

1. File > Export Movie，格式選swf，取名為cloud_3。

九、上傳swf

1. 利用filezilla將cloud_3.swf上傳到學校個人網站中的swf資料夾內。
2. 複製下列字串，在你的部落格新增文章中貼入以下的字串
   <embed src="http://web2.ntit.edu.tw/~sxxxxxxxx/swf/cloud_4.swf" width="400" height="225" loop="-1" autostart="0" ></embed>

十、套用按鈕元件

1. 新增一圖層，更名為「按鈕」。
2. 視窗 > 內建元件庫，選擇可用的按鈕，將播放按鈕拖拉放到舞台。
   必要時，利用視窗 > 對齊，選水平及垂直居中，使按鈕居畫面中央。
3. 到元件庫，將前一步驟產生的元件更名為「Play_btn」。
   
4. 選按鈕層之第2影格迄最後影格，滑鼠右鍵「清除影格」。
   

十一、複製及修改按鈕元件

1. 滑鼠右鍵點按元件庫內的「play_btn」按鈕元件，選重製，將重製之元件更名為「replay_btn 」。
2. 點按該 Replay二下，在三角形圖層內將三角形修改為英文字「Replay」，並將它文字打散。
3. 回到場景1，在按鈕層最後一格新增一空白關鍵影格，從元件庫將replay_btn按鈕拖拉放到舞台，擺好位置。

十二、為按鈕設定實體名稱

1. 選取第1影格舞台上的「play_btn」按鈕，於屬性對話框之實體欄更名為「play_btn」。
2. 選取最後影格舞台上的「replay_btn」按鈕，於屬性對話框之實體欄更名為「replay_btn」。
   
3. 於動作動畫框內輸入以下的語令：
   

十三、增設AS

1. 在按鈕層上方新增一圖層。
2. 取名為「AS」。
3. 選第二影格，插入空白關鍵影格。
4. 點選該影格，於屬性對話框之影格標籤取名為「Lplay」
5. 選第一影格，在動作視窗內加入下列語令：
   (一) 適用actionscript 1.0或2.0版本
   stop;
   play_btn.onRelease=function(){
   gotoAndplay("Lplay");
   
   (二) 適用actionscript 3.0版本
   stop();
   play_btn.addEventListener(MouseEvent.CLICK, clickplay_btn);
   function clickplay_btn(event:Event):void {
   trace ("play_btn");
   gotoAndPlay("Lplay");
   }
   
   
6. 選最後影格，插入空白關鍵影格，在動作視窗內加入下列語令：
   (一) 適用actionscript 1.0或2.0版本
   stop;
   replay_btn.onRelease=function(){
   gotoAndplay("Lplay");
   
   (二) 適用actionscript 3.0版本
   stop();
   replay_btn.addEventListener(MouseEvent.CLICK, clickplay_btn);
   function clickplay_btn(event:Event):void {
   trace ("replay_btn");
   gotoAndPlay("Lplay");

十四、存檔

1. 測試影片。
2. 檔案，取名儲存。

補充

1. 在ToonBoom的作業區左上角有四個小圖示：Drawing View、Camera View、Side View及Top View。
   
2. 在ToonBoom使用介面中，Exposure Sheet最左行的元素，在Timeline是在最上層，最上層元素會遮住較低層的元素。
   
3. ToonBoom的向量圖片可以由Flash及Illustrator完成存檔後，在ToonBoom以File > Import方方式完成之，但須注意以下重點：
   
   • 在Illustrator完成的圖檔須是RGB模式，儲存為ai檔。
   • 在Flash完成的作品須存成SWF模式。
4. 本練習的特性可見之於以下的詩句

• 常建《題破山寺後禪院》的「竹徑通幽處，禪房花木深。」
• 李白《早發白帝城》的「兩岸猿聲啼不住，輕舟已過萬重山。」
• 劉長卿《尋南溪常山道人隱居》的「一路行經處，蒼苔見屐屐痕。」