期末作業檢討

目標
檢討期末作業之可精進之處

方法

1. 到同學的部落格，觀看其期末作品，並提供評語。
   檢核作品標準如下：
   是否有故事性
   是否配音效
   是否動作流暢
   是否有按鈕
   
   

新增提示點

目標
使形狀補間更順優質

▲左動畫的形狀補間經「增加提示點」成為右動畫，效果更好。

學習新功能
修改 > 形狀 > 增加提示點

步驟
一、製作元件
(一) 「形狀補間」影片片段

1. 新增元件，選擇影片片段類型，取名為「形狀補間」。
2. 在舞台上鍵入數字「4」。
3. 在影格24處新增關鍵影格。
4. 將數字修改為6。
5. 將第1影格內的「4」及第24影格內的「6」執行修改 > 打散。
   
6. 於屬性對話框內，於補間欄選擇「形狀」。

(二)「提示點形狀補間」

1. 於元件庫視窗內，點選「形狀補間」將之重製，更名為「提示點補間」。
2. 開啟「提示點補間」，點按第1影格，做修改 > 形狀 > 增加提示點三次。
3. 將第1影格內的提示點abc移動如下圖左。
4. 將第24影格內的提示點abc移動如下圖右。
5. 滑鼠右鍵點按第30影格，選擇「加入影格」。
   

▲提示點宜對應位置及順序

(三) 製作按鈕

1. 從視窗 > 內建元件庫，扡拉放播放及暫停兩按鈕到舞台上。

二、加入AS

1. 切換到場景1。
2. AS的語法同時鐘旋轉運動。
   

複製影片片段

目標
複製暨移除影片片段

▲連續按綠鈕可遞增魚群；按紅鈕可全部清除魚群。

學習新語令

• DuplicateMovieClip (AS 2.0)
• RemoveMovieClip
  
• setProperty
  

步驟
一、製作元件

1. 做魚游的影片片段一。
2. 做按鈕元件二。
3. 做海洋背景圖像元件一。

二、製作場景

1. 在場景1內，將內定圖層更名為Sea，將海洋背景圖像元件拖拉放到舞台。
2. 新增圖層，更名為Fish，將魚游動的影片片段拖拉放到舞台，將其實體名稱更名為fish。
3. 新增圖層，更名為Button，將按鈕元件拖拉放到舞台，將其實體名稱更名為duplicate_btn。
4. 新增圖層，更名為Action。

三、加入AS

1. 在Action圖層的第一個影格，於動作視窗內加入以下的ASvar
   remove = false;
   stop();
   add_btn.onRelease=function() {
   amount = 10;
   while (amount>0) {
   duplicateMovieClip(_root.fish, "mc"+i, i);
   setProperty("mc"+i, _x, random(600));
   setProperty("mc"+i, _y, random(320)+10);
   setProperty("mc"+i, _alpha, random(80));
   setProperty("mc"+i, _xscale, random(80)+50);
   setProperty("mc"+i, _yscale, random(80)+50);
   i = i+1;
   amount = amount-i;
   }
   }
   
   substract_btn.onPress=function(){
   _root.remove = true;
   }
   substract_btn.onRelease=function(){
   _root.remove = false;
   }
   substract_btn.onReleaseOutside=function(){
   _root.remove = false;
   }
   
   
2. 點選舞台上的魚，於動作視窗入鍵入以下的AS
   onClipEvent (enterFrame) {
   
   if(_root.remove == true){
   this.removeMovieClip();
   this._x = random(600);
   this._y = random(320);
   }
   }
   

建議閱讀

• duplicateMovieclip
  
• removeMovieclip
• duplicateMovieclip_AS3
  

旋轉運動

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



學習新功能

• 移動補間→旋轉→順時

步驟

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

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. 測試影片。

免費音樂下載

• http://www.media-tracks.com/soundeffects.asp
• http://www.findsounds.com/
• http://www.partnersinrhyme.com/pir/PIRsfx.html

字型按鈕設計

目標
設計字型按鈕元件並搭ActionScript (AS)

學習新功能

• 元件庫→新增元件→按鈕

步驟
一、製作元件

1. 先在舞台上先畫好文字型按鈕原型，例如「播放「或「暫停」或「Play」、「Stop」的字型。
2. 選取，剪下。
3. 視窗→元件，新增元件→按鈕。
4. 在第一影格貼上。
5. 修改 >打散兩次。
   
6. 視窗 > 對齊。完成對齊設定。
7. 點按第二影格，按插入關鍵影格。
8. 點按第三影格，按插入關鍵影格。
9. 點按第四影格，按插入關鍵影格。
10. 新增圖層，在第四影格插入空白關鍵影格。依第一層的文字範圍，畫出一矩形為感應區，並灌入黑色。
11. 選取該黑色矩形，編輯 > 剪下。
12. 點選第一層的第四影格，將文字刪除。
13. 編輯 > 在原地貼上。
14. 將第二圖層刪除。

二、配用AS

1. 將按鈕元件拖拉放到舞台，選取該實體。
2. 視窗 > 屬性，於屬性視窗內更改實體名稱。
3. 新增圖層，設為Action。於第一影格，鍵入類似以下的AS:
   play_btn.addEventListener(MouseEvent.CLICK, clickplay_btn);
   function clickplay_btn(event:Event):void {
   trace ("play_btn");
   gotoAndPlay("Lplay");
   }
   
   pause_btn.addEventListener(MouseEvent.CLICK, clickpause_btn);
   function clickpause_btn(event:Event):void {
   trace ("pause_btn");
   stop();
   }
4. 存檔。
5. 測試影片。

補充
上列的AS語令，其字串的彩色之意義如下：

• 藍色是AS的專用名詞；
• 綠色是你設定的實體名稱或影格標籤。
• 黑色字與實體名稱相同者，表示以該實體所欲施行的方法，如pause_btn有綠色也有黑色。實體名稱及影格標籤之命名須避免與AS內定專用名。
  

按鈕AS3.0

目標
影片片頭、片尾各加一個按鈕以控制影片的播放。



學習新功能
AS3.0中的語令

• stop()
  
• gotoAndPlay()
• addEventListener(MouseEvent.CLICK, variable)

步驟
一、啟動Flash

1. 開新檔案，選ActionScript 3.0模式。

二、製作雲的移動補間

1. 在元件庫新增圖像元件，畫一片雲。
2. 在第5影格到第48影格，製作使雲有大小及位置變化的移動補間。
3. 新增圖層，更名為「文字」，在第1影格，於舞台上鍵入黑體字「試按右下二鈕」，將它們打散。
4. 在第4影格加入影格。

二、套用按鈕元件

1. 新增一圖層，更名為「按鈕」。
2. 視窗 > 內建元件庫，選擇播放按鈕，拖拉放到舞台右下，於屬性視窗設定長、寬值。
3. 視窗 > 內建元件庫，選擇播暫停鈕，拖拉放到舞台右下，於屬性視窗設定長、寬值。
4. 利用視窗 > 對齊，使齊底，再調動位置。
5. 到元件庫，將播放元件更名為「play」，將暫停元件更名為「pause」
   

三、設定實體名稱

1. 點按舞台上的播放鈕，在屬性視窗內，於實體名稱處，更名為「play_btn」。
2. 點按舞台上的播放鈕，在屬性視窗內，於實體名稱處，更名為「pause_btn」。

四、加影格標籤

1. 新增一圖層，取名為Action。
   
2. 在第5影格新增一空白關鍵影格，於屬性視窗之影格標籤欄鍵入「Lplay」。

五、加入AS (ActionScript)

1. 選取Action圖層上的第1影格，輸入以下的語令：
   stop();
   
   play_btn.addEventListener(MouseEvent.CLICK, clickplay_btn);
   function clickplay_btn(event:Event):void {
   trace ("play_btn");
   gotoAndPlay("Lplay");
   }
   
   pause_btn.addEventListener(MouseEvent.CLICK, clickpause_btn);
   function clickpause_btn(event:Event):void {
   trace ("pause_btn");
   stop();
   }
2. 在Action圖層上的最後一影格插入空白關鍵影格。
3. 點選該最後影格，於動作視窗內輸入以下語令：
   gotoAndPlay ("Lplay");
   

六、存檔

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

建議瀏覽AS3.0教材

• 介紹官方版(中文)
  
• 按鈕設定
• 介紹滑鼠事件
• 做網頁用的Flash及其AS
  

期未作業

目標
自編劇本或改編劇本；畫分鏡、做動畫、配音效，完成有創意的Flash動畫作品。

方法

• 二人一組為原則 (可增或減一人)。
• 片長：不含片頭片尾，進修部及進專每人至少30秒，日間部每人至少60秒。
  
• 在本欄登錄班組員、專題、參考作品、故事板(分鏡表)及進度時間表。
• 作品有片頭、內容及片尾。
• 作品做成光碟版及上傳到網站。

設計比賽

2011

• 台灣國際學生設計大賽 (6月15截止)
  
• 漢字動畫比賽 (7月31日截止)

2010

•   時報金犢奬

串接外部swf (方法二)

目標
學會將數個外部swf檔串接

前置工作

• 做好cloud_1.fla~cloud_6.fla及cloud_1.swf~cloud_6.swf檔案，將它們放在同一個資料夾。

步驟

一、修改子檔

1. 開始cloud_1.fla檔。
2. 新增一圖層，置於最上層。
3. 於最後一影格，插入一空白關鍵影格。點選該空白關影格，於Action Script視窗鍵入下列語令：
stop();
loadMovie("cloud_2.swf", 0); (註：在部落格串接，"cloud_2.swf"須用絶對位址如 "http://xxx.xxx.xxx/xx/xxx/cloud_2.swf")

4. 存檔。
5. Ctrl+Enter，測試影片，以更新原swf檔。
6. 依上述2~5步驟，完成cloud_2.fla~cloud_6.fla的修改，步驟5.中語法內的_2依序更改為_3；_4；_5；_6；_1。
   

二、新增主檔

1. 新增一個檔案，取名為cloud_0。
2. 在第13加入一個空白關鍵影格。(前12影格空白，使影片進場有一秒鐘的緩衝。
3. 點選第13影格，視窗 > 動作。點選該空白關影格，於Action Script視窗鍵入下列語令：
   stop();
   loadMovie("cloud_1.swf", 0); (註：在部落格串接，"cloud_1.swf"須用絶對位址如 "http://xxx."cloud_1.swf")
   
4. 依上二步驟，將14~18的關鍵影格貼入相同的語法，但須將其中的cloud_1依序改為cloud_2；cloud_3；cloud_4；cloud_5；cloud_6。
5. 儲存檔案
6. Ctrl+Enter，測試影片，以更新原swf檔。

三、匯整

1. 新增一個英文資料夾。
2. 將複製上述主檔及各子檔的swf，貼入上一資料夾。
3. 利用Filezilla將上一資料夾上傳到學校個人網站。

四、將swf超連結到部落格。

1. 將cloud_0.swf~cloud_6.swf七個檔案上傳到個入的網站。
2. 將cloud_0.swf上傳到自己的部落格。
   

串接外部swf (方法一)

目標
學會將數個外部swf檔串接

前置工作

• 做好cloud_1.fla~cloud_6.fla及cloud_1.swf~cloud_6.swf檔案，將它們放入同一個資料夾。

步驟

一、修改子檔

1. 開始cloud_1.fla檔。
2. 新增一圖層，置於最上層。
3. 於最後一影格，插入一空白關鍵影格。
4. 點選該空白關影格，於Action Script視窗鍵入下列語令：
stop();
_level0.gotoAndPlay(13);

5. 存檔。
6. Ctrl+Enter，測試影片，以更新或儲存swf檔。
7. 依上述6個步驟，完成cloud_2.fla~cloud_6.fla的修改，但上述步驟6.中語法內的13依序更改為14；15；16；17；13。
   

二、新增主檔

1. 新增一個檔案，取名為cloud_0。
2. 在第13~18影格，各加入一個空白關鍵影格。(前12影格空白，使影片進場有一秒鐘的緩衝。)
3. 點選該空白關鍵影格，於Action Script視窗鍵入下列語令：
   stop();
   unloadMovieNum(1);
   loadMovieNum("cloud_1.swf", 1);
   
4. 依上二步驟，將14~18的關鍵影格貼入相同的語法，但須將其中的cloud_1依序改為cloud_2；cloud_3；cloud_4；cloud_5；cloud_6。
5. 儲存檔案
6. Ctrl+Enter，測試影片，以更新原swf檔。

三、匯整

1. 新增一個英文資料夾。
2. 將複製上述主檔及各子檔的swf，貼入上一資料夾。
3. 利用Filezilla將上一資料夾上傳到學校個人網站。

四、將swf超連結到部落格。

1. 將cloud_0.swf~cloud_6.swf七個檔案上傳到個入的網站。
2. 將cloud_0.swf上傳到自己的部落格。
   

參考網站

• http://www.actionscript.org/forums/showthread.php3?t=169629
• http://kirupa.com/forum/showthread.php?p=2430896
  

Goldwave編輯音

目標
Goldwave音效軟體的使用

步驟

1. File > New，擇定音質取樣率，旁白為11025，CD為44100。
2. File > Open開啟音樂檔。
3. 播放。
4. 選取片段。
5. Edit > Copy
6. File > New
7. Edit > Paste
8. 試播
9. Effect > Volume
   Fade in淡入
   Fade out淡出
10. 存檔

補充

• 周杰倫的本事

音效的編輯

目標
簡略說明音效編輯的概念與實務

步驟
一、音效的定義
音效是指透過空氣波動而讓人耳可以感知者。任何音效均有三種屬性一是音色；二是音量；三是音頻。
音效的種類：

1. 電腦內建的驚示聲。
2. 背景音樂：來自CD等或來自MIDI。
3. 旁白：由口出音並具有完整句子說明者。

二、音效的軟體
(一)PC專用

1. Goldwave
2. Goldwave中文版
3. 友立資訊www.ulead.com.tw出品之MediaStudio軟體中之Audio Editor來錄輯音效。本軟體在鄭正權著之MediaStudio Pro 5.2中文視訊剪刀手台北：上奇出版﹐一書中有試用軟體。
4. 另一套國外軟體是Sound Forge。
5. 免費軟體

進入http://toget.pchome.com.tw
點選
多媒體
樂曲製作
第5頁
Total Recorder
下載該軟體﹐
以winzip將之解壓縮

(二) Mac專用

1. SoundEdit 16﹐但作業系統必須在版本7.x才可執行。
2. 免費音效軟體
3. 進入http://www.cnet.com網站免費下載
4. 點選Free Download
5. Media and Design
6. Audio
7. Sound Studio 1.44
8. Sound Studio使用

1. 啟動Felt Tip Sound Studio
2. Not Yet
3. 試錄

1. Windows >Show Sound Input
2. 在Sound Input浮動功能盤之Source欄內擇定音效來源﹐旁白錄音則選External Mic; CD選CD。
3. File >New﹐在Name欄位填入檔案名
4. 開始試錄
5. 剪輯 Edit > copy → paste
6. Filter的使用
7. 存檔﹐音效存檔格式（依需要選用）
   AIFF(Mac, PC)
   WAV(PC)
   MPG3

四、配音的原則
1. 旁白的取樣以11.k即可。
2. 取樣愈小愈有利播放。
3. 少量多餐（將一音效檔剪輯成數個小檔）。
4. 音效及檔名最好一律以英數字來命名﹐否則跨軟體使用時會出現找不到這些卡司成員或檔案的現象。

ToonBoom匯入點陣圖及swf檔

目標
學習goto的應用

學習新功能

• gotoAndstop
• gotoAndplay
  

參考網站

• http://edition.cnn.com/2007/TRAVEL/07/01/daily.snapshot/index.html

伸鏡入景技法

目標
利用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. 本練習的特性可見之於以下的詩句

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

無盡秧苗

目標
影片片段製作及應用



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

1. 新增元件，核選「影片片段」。
2. 在第一圖層的第一個空白關鍵影格畫一苗葉。
3. 點按描圖紙圖示。在時間軸視窗的底側。
4. 到第6格，按滑鼠右鍵，插入「空白白關鍵影格」。
5. 以步驟2的苗葉為基準，畫一往下萎垂的苗葉。
6. 改變該苗葉的色彩。
   
7. 到第11格，按滑鼠右鍵，插入「空白白關鍵影格」。
8. 以步驟5的曲葉為基準，再畫往下愈垂的苗葉。
9. 重復上二步驟，迄影格21造一曲葉止。
10. 到影格36，按滑鼠右鍵，選「插入影格」。
11. 新增圖層，同步驟2到10，製作另一苗葉。
12. 重復步驟11，新增二苗葉。
    以上是一束苗的動畫元件，它將被用於場景內。
    

二、將元件置入舞台

1. 切換到場景。
2. 逐次將元件庫內的影片片段元件移到舞台不同位置。
   註：元件被置入舞台時，被稱之為分身。
   

三、變換各分身的長寬、角度及面向

1. 點選舞台上欲變換的元件分身，利用轉換工具，調整之。

四、測試影片

1. 若不滿意元件，可以回到元件修改各苗葉的動畫。
2. 若不滿意分身的排列，到舞台上修改各別的分身。
   

五、儲存檔案為cloud_4。

1. File > Save As...，取名為cloud_4，儲存之。
   

六、將swf檔上傳到部落格。

1. 利用Filezilla把cloud_4.swf上傳到學校個人網站www內的swf資料夾內。
2. 拷貝以下的文字串，貼到你的部格，將xxxxxxx修改為你的學號後發佈文章。
   <embed src="http://web2.ntit.edu.tw/~sxxxxxxxx/swf/cloud_4.swf" width="400" height="225" loop="-1" autostart="0" ></embed>
   

補充

• 使用影片片段的概念，等同於「開千枝花，一本所繫」中的本。
• 杜甫的詩句「無邊落木蕭蕭下」也具有本練習的特質。
  

逐格動畫法

目標
將文字化成雲形再消失

步驟

1. 在舞台上的空白關鍵影格內鍵一文字「雲」。
2. 從主選單選擇修改 > 打散。
3. 點按時間軸雲字關鍵影格的次一影格，按滑鼠右鍵，選擇插入關鍵影格。
4. 從主選單選擇修改 > 形狀 > 最佳化，於對話框內將將最佳化的滑桿往右調整。
5. 將舞台上的物件略微移動。
   
6. 重復上三動作，迄無法最佳化止。
7. 插入關鍵影格，修改舞台上的物件的形戕或刪除其節點。
8. 將舞台上的物件略微移動。
9. 重復上二動作，迄形狀不見。

延伸學習

• 向古典迪士尼動畫學習

打散文字

目標
將文字打散成向量圖形，以利變形並確保字形不因瀏覽者使用字的限制而走樣。

左為未打散的中文字，右為打散過的。

步驟

1. 點選文字，在舞台下方的屬性欄內框選紅色項目。(註：此法通用cs3t前的版本)

2. 修改>打散。
   如此可以將一組字打散。
3. 修改>打散。
   如此可將個別字打散。
   

夜設二1

夜設二1 電腦多媒體

張毓家
陳思瑩
徐文嫻
林宜璇
游雅雯
陳銘頤
胡雅芳
許燕婷
楊淋元
蔡依恩
魏德瑀
倪紀萱
姚　瑋
陳宜欣
邱義盛
張雅君
林鈺娟

日三A名單

日設三Ａ：電腦多媒體

黃宇涵
蘇郁淳
施詠翰
童柏順
吳季珊
林語屏
許心瑜
郭暄
陳宛渝
陳玟如
陳思澐
鄂智涵
廖曼岑
鄭詔蓉
李念祖
郭郭益言
蔡宗儒
顏 凡

進一A

廖庭馴
周雅鈴
陳盈攸
陳昭雯
張英森
林佩君
吳怡君
李季霏
阮楚蘋
吳美瑩
黃圓錞
劉亞倫
王智廣
嚴姿涵
陳巨峰
陳俊達
柯義豐
林厚志
胡浩文
熊康伶
陳逸慈
楊郁葶
毛梅蘭
曾惠萱
譚昕
辛薏如
楊仕鵬
陳俊利
洪坤照
白意婷
蘇裕雯
陳雪華
黃資華
邱美秀

天然雲的動畫

目標
將天然雲處理成如下圖之淡入或淡出的動畫

步驟
一、製作png格式的雲

1. 找一天然的雲圖數位檔。
2. 在Photoshop將藍天去背，選取去背的雲形，拷貝之。
3. 在Photoshop新增一檔案，設定圖面大小為640x360pixel， 解析度為72dpi，背景選項為「透明」。
   (補充：圖面大小，視需要而定，最好以不須在Flash做縮放為原則)
   
4. 貼入雲形。
5. 儲存為png格式。
6. 依上述方法另做數個雲的png檔。

二、製作flash動畫

1. 在Flash將該眾png檔匯入元件庫。
2. 分圖層將各png放入關鍵格，並做動補間。
3. 選取關鍵影格在舞台上的圖像，在屬性欄之「顏色」欄內變更「Alpha」值。
4. 存檔為cloud_2.fla。
5. 測試影片。
6. 將cloud_2.swf檔上傳到部落格。
   

製作cloud_1

目標
製作出雲的影片頭

學習項目

• 元件製作
• 關鍵影格
• 插入空白關鍵影格
  
• 移動補間
• 改變舞台物件屬性
  
• 上傳swf

要上傳swf到部落格，你須

1. 先將該近端站台的swf檔FTP到遠端站台。並記下它的網址。
2. 可拷貝底下的文字列到你的部落格，但須將你存放swf的網址加以修改。(補充，由於雲的影片畫面比為16: 9，所以依該比率，以下文字列中會有height="225" width="400"的設定。(參考上傳swf到blogger)

<code><span style="font-size:100%;"></span></code><span style="font-size:100%;"><span style="font-size:100%;"><div><object type="application/x-shockwave-flash" data="http://web.ntit.edu.tw/~hsieh/swf/cloud_x.swf" width="400" height="225"><param name="movie" value="http://web.ntit.edu.tw/~hsieh/swf/cloud_x.swf"> </object></div>

Ｆlash作品練習

目標
學會將唐詩中來鵠作七言絶句《雲》，編成劇本，再據以製作一完整的Flash影片。

主題：雲
千形萬狀竟還空，
映水藏山片復重。
無限旱苗枯欲盡，
悠悠閒處作奇峰。
---------------來鵠，《雲》。

製作流程
將作品分成七個影片段，主題四，外加片頭及片尾各一，及匯編一。　

前製規畫

• 畫面大小 (640x360)
• 影片長度 (幾秒)
  
• 腳本繪製
• 背景音效

劇本
片段1（片頭）：

1. 淡入
2. 不同造形的中文字「雲」蛻變著；
3. 字之前、後有數朵雲流動著。
4. 文字：「作者：來鵠」，淡入。
5. 淡出。
6. 儲存檔案cloud_1

片段2（千形萬狀竟還空）：

1. 戶外﹣﹣天空﹣﹣白天
2. 雲的圖像元件1由舞台左側移動到右側；
3. 雲的圖像元件2由遠而近越過頭頂消失；
4. 雲的圖像元件3由近而遠；
5. 雲的圖像元件4由有色漸淡而不見；
6. 雲的元件在原地離散。
7. 儲存檔案cloud_2

片段3（映水藏山片復重）：

1. 戶外﹣﹣湖光山色﹣﹣黃昏
2. Tilt到山群。
3. 雲的圖像元件5及6現身。
4. 雲的圖像元件5及6映在湖中。
5. 雲的圖像元件5及6移動躲到山後。
6. 雲的圖像元件7及8及9移在山間重疊成另一雲形。
7. 儲存檔案cloud_3

片段4（無限旱苗枯欲盡）：

1. 切換到白天
2. 鏡頭向右搖（Pan to Right）。
3. 再Tilt Down
4. 一片苗田。
5. 苗枯萎的影片片段。
6. 儲存檔案cloud_4

片段5（悠悠閒處作奇峰）：

1. Tilt Up
2. 雲不動。
3. 雲聚攏成奇異的山峰狀。
4. 苗枯得更慘，與雲形成對比。
   
5. 儲存檔案cloud_5

片段六（片尾字幕）：

1. 淡出。
2. 原著：唐，來鵠
3. 劇本：○○○
4. 分鏡：○○○
5. 音效：○○○
6. 儲存檔案cloud_6

片段七

1. 滙編cloud_1~cloud_0各片段的swf檔
2. 儲存檔案cloud_0