ActionScript簡例

目標
學習簡易的Actionscript

方法

1. stop();
2. runner.stop();
   

導引線運動

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

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

學習新功能

• 新增導引線

步驟
一、選用影片版本

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. 存檔。

按鈕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
  

串接外部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
  

預先載入preload

目標
學會預先載入的製作

觀念

• 當一個flash作品檔需耗時載入，最好提供「載入中 （loading）」的動畫，俾讓瀏覽者明白載入的狀態。此一「載入中」的做法是「預先載入（preload）」。
• 「預先載作（preload）」的作法很多種，以能同時提供百分比及動畫者為佳。

練習

1. 開啟新的Flash檔案。
2. 新增影片片段元件，取名為mc_Preloader。
3. 新增一圖像元件，取名為gr_Outline，在作業區內畫一長方形外框。利用對齊視窗，使該長方形外框齊左、齊上。
4. 選取該長方形外框，編輯 > 複製。
5. 新增一圖像元件，取名為gr_Fill。在作業區內，編輯 > 在原處貼上。
6. 選取新複製的長方外框，修改其內部為實色，外框為白色。
7. 新增一影片片段元件，取名為mc_Fill。將gr_Fill元件拖拉放到作業區內，利用對齊視窗，讓gr_Fill元件齊左、齊上。
8. 開啟mc_Preloader，建三個圖層，由下而上，取名為Outline、Fill及Text。
9. 從元件庫將gr_Outline拖移到Outline層；mc_Fill拖移到Fill層。兩者須對齊，使mc_Fill落在gr_Outline之內。
10. 在Text層新增一文字框，位在Outline長方形外框的下方中央，設其為Dynamic Text（動態文字），Var（變數）取名為txt。
11. 在作業區選取mc_Fill，在屬性視窗的「實體名稱」欄取名「preloader」。
12. 新增一圖層，將它移到最上層，取名為ActionScript。點選該圖層的第一個影格，在動作視窗內鍵入以下的語令：
    preloader.onLoad=function() {_root.stop();
    }
    preloader.onEnterFrame=function() {
    var totalk=_root.getBytesTotal()/1024;
    var loadedk=_root.getBytesLoaded()/1024;
    var percent=Math.ceil((loadedk/totalk)*100);
    if (percent < txt="percent" _xscale="percent;">
13. 由元件切換到場景，將mc_Preloader置入舞台，它會存放在第一影格。
14. 到第二影格新增一空白關鍵影格。檔案 > 匯入舞台。選取檔案大的動畫檔，如swf或mov及avi檔。
15. 存檔。
16. Ctrl + Enter，測試影片。
17. 檔案 > 出版，產生html檔及swf檔。
18. 將上述的兩個檔案上傳到個人網站。
19. 瀏覽該檔案，結果類似以下範例的超連結。

• 本範例Flash檔（973k)下載

〔補充〕

• 本範例中的ActioScript是在影格完成的，也可以選用舞台上的實體來寫，其做法是做到上述步驟11，選取舞台上的mc_Fill元件後，在動作視窗內鍵入的語令與步驟12完全相同，只是第一列改為
  onClipEvent (load) {_root.stop();
  第三列改為
  onClipEvent (enterFrame) {
  餘均不變。
• 為了使視訊影片也能加以控制，步驟14可以更改為新增一影片片段元件，將視訊影片置入該元件的時間軸（可能佔用很多的影格）內。再將該元件放在場景的第二個影格，設其實體名稱，例如mc_Video，接著第二個影格設定ActionScript如下：
  stop();
  mc_Video.play();
  

〔範例〕

• http://web.ntit.edu.tw/~hsieh/preload/preload.html

〔參考網站〕

• http://www.webwasp.co.uk/tutorials/b29-load-images/index.php

GetURL的使用

目標
學會ActionScript中的getURL，俾賦予按鈕超連結的能力

練習

1. 開一新Flash檔。
2. 在元件庫新增一個按鈕元件。
3. 將按鈕元件拖曳到舞台上，要使按鈕做超連結，可任選以下兩種方法之一：
   • 在按鈕實體上製作GetURL
   • 在關鍵影格上 製作GetURL

〔在按鈕實體製作getURL〕

1. 選取舞台上的按鈕。
2. 開啟點按舞台下方的動作視窗。
3. 點按+，如下圖依序找出on及Release。
4. 再找到getURL。
5. 鍵入URL的絕對位址或相對位址。例如，絕對位址設為http://webntit.blogspot.com。
6. 點按圖層，新增一個圖層，取名為ActionScript。
7. 點按ActionScript圖層的第一個空白關鍵影格。
8. 於動作視窗，點按+的圖示，如下圖步驟做好stop的指令。
9. 按Crtl + Enter鍵，測試影片。

〔在關鍵影格製作getURL〕

1. 選取舞台上的按鈕。開啟屬性視窗，於實體名稱設一英文名稱，例如，URL_btn。
2. 點按圖層，新增一個圖層，取名為ActionScript。
3. 點按ActionScript圖層的第一個空白關鍵影格。
4. 開啟舞台下方的動作視窗，鍵入以下的ActionScript：
   stop();
   URL_btn.onRelease=function(){
   getURL("http://cmntit.blogspot.com")
   }
5. 按Crtl + Enter鍵，測試影片。

〔補充〕
以上兩種方法，以第二種較佳。因為它可以直接從影格直接操作。

載入外部SWF檔--利用影格ActionScript法

目標
學習以外部SWF檔的方式來完成Flash作品。

觀念

• 儘可能將Flash作品切割成個別的小檔案，並將小檔案匯出為SWF檔。
• 再以載入外部SWF檔方式來完成作品，如此，方便分工、編輯及更新。
• 影片可依需要才載入所需的swf檔，故能減低作品在網路上的下載負荷。

練習
[製作空白影片片段]

1. 在你的隨身碟新增一檔案夾，並取一英文檔案夾名稱。
2. 將你之前做過的swf檔，複製到上一步驟內之檔案夾內，檔名一定更新為英文，本例中，英文名為「windmill.swf」。
3. 啟動Flash，新增一檔案。
4. 視窗>元件庫，新增一「影片片段」，勿放入任何素材，換言之，它是一空白的影片片段。
5. 離開影片片段的編輯，進入影片的場景。
6. 從元件庫將步驟4及5所完成的影片片段元件移到舞台左上角，它會停在內定圖層的第一格。選取它，於屬性視窗內之「實體名稱」欄鍵入英文名，本例取名「LoadSWF」。

[加入行為（behavior)]

1. 新增一圖層，取名為ActionScript。
2. 點選該圖層之第一影格。
3. 視窗 >行為指令(behavior）。
4. 點按行為視窗之+圖示，依序進入點選影片片段﹣﹣載入外部影片片段。
   
   
   
5. 於對話框入，輸入及圈選如下圖，按確定鈕。
   
   

[觀看ActionScript]

1. 按Ctrl +Enter鍵，觀看動畫，它會是你複製到檔案夾內的swf動畫。
2. 點按ActionScript圖層上的第一個影格，按F9，它的語法應像以下：
   //load Movie Behavior
   if(this.LoadSWF == Number(this.LoadSWF)){
   loadMovieNum("windmill.swf",this.LoadSWF);
   } else {
   this.LoadSWF.loadMovie("windmill.swf");
   }
   //End Behavior
3. 儲存檔案。

[補充]
另一種載入外部影片片段的方法是使用loadMovieNum()，則上一節影格的ActionScript可更改如下：
//Using Load
LoadSWF.onEnterFrame=function(){
loadMovieNum("windmill.swf", 0);
}

作業

• 以本單元之要領及之前的按鈕互動要領，設計出一件作品，它有兩個按鈕，可以互動式各自載入不同的外部影片片段。

Actionscript

目標
學會Actionscript的影格控制及按鈕控制

實例
〔控制影格的actionscript〕

1. 開啟檔案。按Ctrl + Enter鍵，以測試影片。
   該影片是一個球的壓扁動畫。
   
2. 在最上層之上新增一圖層。
3. 在第影格10處插入一空白關鍵影格。
4. 視窗 > 動作。
5. 在動作影格視窗內，按其左上角之+圖示，並如下圖順序按到Stop。


6. 按Ctrl + Enter鍵，以測試影片。
   影片會在球第一次壓扁處（影格10）停止。

〔用按鈕控制的actionscript〕

1. 以前一檔案為基礎，先製作各球及影子的圖形元件。
2. 以圖形元件製作出球墜地的影片片段元件。
3. 製作一按鈕元件。
4. 更新圖層，由下往上是基準線、動畫影片、按鈕、Actionscript。
5. 將各圖層的影格刪除。
   
6. 將影片片段元件拖拉放到「動畫影片」圖層。
7. 將按鈕元件拖拉放到「按鈕」圖層。
8. 在基準線畫一水平線。
   
9. 調整上述三個元件的位置。
10. 滑鼠點選「Actionscript」的第一個影格。
11. 同上一例中的步驟4.及5.，製作「stop」Actionscript。
12. 點按「動畫影片」圖層，選取動畫分身（註：任何元件用到舞台或作業區上即為分身）。
13. 在屬性視窗內取分身名為「MC_bigball」(註：你可另取名稱，但不能與Actionscript的專用名詞相同。）。
    
14. 點按「按鈕」圖層，選取按鈕分身。
15. 視窗 > 動作。
16. 點按動作﹣影格視窗左上的「+」。依下圖，選用on。
    
    
    
17. 選Release。
18. 在兩個大括弧間鍵入"MC_BigBall.stop();"，整個actionscript如下