無盡秧苗

目標
影片片段製作及應用



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

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>
   

補充

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

元件的使用

目標
學會將一個元素(圖像、按鈕及影片片段、音效或視訊、文字等) 做成元件 (instance)，以利會重復使用及演生其他效果，並節省檔案大小及其他勞務。

元件的種類

• 圖像元件：可以是單一圖像；也可以是動畫。
• 按鈕元件：是一個可以加入Actionscript以控制指定的影片片段分身或舞台。
• 影片片段元件：可以是單一圖像；也可以是動畫。

圖像元素與影片片段的差別在於後者可以有按鈕元件及音效等，此外，它能夠受按鈕元件及Actionscript的控制。

以元件可製造出來的效果

• 移動補間
• 色彩漸變

影片片段_落花斜落生漣漪

目標
綜合透明背景點陣圖png、影片片段及Alpha設定等功能，製作落花起漣漪的動畫。

製作步驟
〔匯入桐花元件〕

1. 同上一單元之要領，在Photoshop製作桐花的去背PNG檔。
2. 在Flash，將前一桐花匯入到元件庫內。

〔建立桐花元件〕

1. 建立新元，圈點圖像，取名為「桐花」。
2. 將匯入文件庫的桐花拖拉放到工作區內。
3. 利用對齊方法，將該圖像置於工作區中央。
   

〔建立桐花生漣漪的影片片段〕

1. 建立新元，圈點影片片段，命名為「桐花漣漪」。
2. 為「桐花漣漪」影片片段分三個圖層，依序由下往上是「漣漪」、「桐花斜落」及「桐花倒影」。

〔桐花斜落圖層動畫〕

1. 點按「桐花斜落」圖層，使其活化。
2. 滑鼠移到影格2，插入空白關鍵影格。
3. 從元件庫將「桐花」元件移到工作區中央。
4. 於第15格處，插入關鍵影格。
5. 滑鼠點按時間軸上的影格2-14中的任何一格。
6. 於屬性視窗內選擇「移動」。
7. 滑鼠點按時間軸上的影格2。於工作區上，將「桐花」分身往左上移。
8. 測試影片片段。
9. 於第18格處，插入關鍵影格。
10. 時間軸移到第18格。
11. 將工作區上的「桐花」分身略作旋轉。
12. 對影格15-18做移動補間。
13. 於第30格處，插入關鍵影格。
14. 時間軸移到第30格。
15. 將工作區上的「桐花」分身略作旋轉。
16. 對影格19-29做移動補間。
17. 時間軸移到第40格。
18. 插入影格。
    

〔漣渏圖層動畫〕

1. 點按「漣漪」層，使其活化。
2. 在的時間軸上，於第15格處，插入一空白關鍵影格。
3. 於工作區中央處，畫一白色橢圖，代表「初始漣漪」。
4. 在工作具區上，將初生漣渏選取，複製。
5. 於元件庫視窗，新增一圖像元件，取名為「漣漪」，於工具區，Ctrl + V鍵，貼上前述「初始漣漪」之圖像。
6. 回到場景區，將場景上的「初始漣漪」圖像刪除。
7. 從文件庫，將「初始漣漪」元件拖移到舞台中央。
8. 時間軸移到第30格，挿入關鍵影格。
9. 利用縮放工具，將「初始漣漪」之分身放大。
10. 滑鼠點按時間軸上的16-29中的任何一格。
11. 於屬性視窗內選擇「移動」。
12. 滑鼠點按時間軸上的第30格，於屬性視窗內之顔色選單內選擇Alpha，將其右側之數值改為0。

〔倒影圖層動畫〕

1. 點按「桐花倒影」圖層，使其活化。
2. 滑鼠移到影格30，插入空白關鍵影格。
3. 點按「桐花斜落」圖層。
4. 點按工作區上的桐花分身。按Ctrl +C將其拷貝。
   
5. 返回「桐花倒影」圖層之第30格。
6. 將桐花分身於原地複製。
   
7. 利用修改，讓桐花分身水平倒轉。並將它往下移，使它與桐花斜落層的桐花呈鏡射狀。
8. 滑鼠移到影格35，插入關鍵影格。
9. 滑鼠點按時間軸上的31-34中的任何一格。
10. 於屬性視窗內選擇「移動」。
11. 滑鼠點按時間軸上的第30格，於屬性視窗內之顔色選單內選擇Alpha，將其右側之數值改為20。
12. 滑鼠點按時間軸上的第35格，於屬性視窗內之顔色選單內選擇Alpha，將其右側之數值改為70。
13. 時間軸移到第40格。
14. 插入影格。

元件的使用

目標
學會圖像(graphic)元件、按鈕元鍵及影片片段(movieclip)元件的觀念與應用

觀念

• 當一個影片元素會重復使用時，將該元素製作成元件是比較省事的。
• 元件的種類有三種：
  圖像元件：可以是單一圖片，也可以是動畫。
  按鈕元鍵：具ActionScript，能控制影片的播放或影片片段分身。
  影片片段元件：一件動畫，可由元件或非元件組成，可以受按鈕元件控制。
• 任何元件須存放在元件庫內。
• 元件置入場景或其他元件時，稱之為分身。
• 元件可以是其他元件的組合，例如：影片片段元件可以由圖像元件所構成。

隨堂演練

本堂的練習是魚兒水中游，其中的游魚製作方法有二：

• 只用可生動畫的圖像元件
• 用會生動畫的影片片段元件

而魚兒的游蹤可以有以下二種：

• 直線的，利用移動補間。
• 路徑的，利用沿著路徑走。