Class4 ActionScript 概念

Class4ActionScript概念 控制影格及場景播放視訊影片元件的拖曳動作載入外部的文字檔文字區域的捲軸全螢幕播放

動畫練習 • 實作演練：ch00-1.fla、參考ch00-1-OK.swf • 設定文件為：777x120 px，且影格速度為：20 fps • 在圖層2從元件庫中置入名稱為「嬰兒手推車」的影片片段，放入場景內的右方。影格總長度為150，關鍵影格設於 1、50、l00、150並加入移動補間效果。請分別於關鍵影格50、100、150做停止設定，圖案移動位置是：關鍵影格50移至1號站前、關鍵影格100移至2號站前、關鍵影格的150移至3號站前

動畫練習 • 實作演練：ch00-2.fla、參考ch00-2-OK.swf • 新增圖層，將按鈕元件加入圖層中 • 在各按鈕上設定「gotoAndStop」指令 • 在各影格上設定關鍵影格 • 利用「修改＞排列」功能，設定各影格的按鈕上下位置

認識ActionScript • ActionScript適用於Flash 中。其目的在使設計者藉由指令來控制滑盤、滑鼠、影片的播放方式、元件的載入，並達到互動的效果。 • ActionScipt可以放在關鍵影格、或元件上；如果依照其放置的位置的不同，可以分為： • 影格程式(Frame Actions) • 是指設定在關鍵影格或空白關鍵影格中的ActionScript，一般是用來控制動畫的播放。當動畫播放到具有ActionScript的影格時，就會觸發程式的執行，以達到控制影片的功能。 • 元件程式(Object Actions) • 是指設定在元件實體上的ActionScript，元件實體的行為指令可以是「影片片段」或是「按鈕」，但不能是「圖像」元件。程式的觸發多半是由使用者的操作而引起的，例如：按下按鈕來觸發「按鈕」上的ActionScript。因為作用對像的不同，元件程式又可區分為按鈕程式或影片片段程式兩種。

控制影格及場景的播放 • 設計場景的切換 • 時間軸上常用來控制播放的指令除了「stop()」之外，還有「play()」、「gotoAndPlay()」、「gotoAndStop()」等指令，而且，除了在同一場景中切換影格之外，我們還可以設定不同場景之間的切換。 • 相關的指令有 • prevScene()：將播放磁頭移動到上一個場景的影格 1，並且停止播放。 • nextScene()：將播放磁頭移動到下一個場景的影格 1，並且停止播放。 • 實作演練：ch01-1.fla • 控制不同場景中影片的播放

影片播放器 • 實作演練：ch01-2.fla、參考ch01-2-OK.swf • 當我們可以自由的匯入影片之後，我們大概會想要自行製一個播放器來控製影片的播放了。影片的播放控制不外乎是暫停、播放、快轉、倒帶…等功能，在這單元中，讓我們來製做一個影片播放控制器吧。 • 使用「不支援/動作/tellTarget」 on (press) { tellTarget (this.movie) { gotoAndPlay(2); } }

控制元件的拖曳動作 • 「onClipEvent()」是個常用的指令，作用在觸發某一個已定義實體名稱的影片片段的動作。它是一個事件的觸發程序。當某個特定事件發生時，就會執行在該事件後的大括號內的所有指令。事件的參數值有： • load：當影片片段被載入時，這個動作便會被觸發。 • Unload：當影片片段從時間軸被移除後。 • enterFrame：以影片片段影格的播放速度連續觸發。 • mouseMove：在每次移動滑鼠時觸發。 • keyDown：在按下按鍵時觸發。 • 「startDrag()」指令用來拖曳元件，但一次只能拖曳一元件。一旦執行 startDrag()指令，元件會一直保持被拖曳的狀態，直到使用「stopDrag()」指令來停止拖曳，或者是再呼叫拖曳其它元件的startDrag()指令為止。

範例練習 • ex01.fla • 為「coffee」元件命名為「coffee」 • 設定「游標」圖層的行為指令為「物件／影片／Mouse／方法／hide」 startDrag("coffee", true); Mouse.hide();

控制元件的拖曳動作 • 控制拖曳影片片段，先要有「命名」的動作 • 實作演練： ch01-3.fla、參考ch01-3-OK.swf • 拖曳場景中的影片片段元件 • 控制拖曳按鈕，先要有「命名」的動作 • 實作演練： ch01-4.fla • 拖曳場景中的影片片段元件 on (press) { startDrag(bt, true); } on (release) { stopDrag(); }

元件屬性的設定 • 「屬性」是用來描述元件實體的某個特性的名詞，而「值」則是表達「屬性」的方式。例如：「汽車的顏色是白色的」，這句話在Flash中，我們可以解釋為：元件實體(汽車)的屬性(顏色)是白色(值)的。如果要設定元件實體的屬性，我們可以使用「動作/影片片段控制/setProperty()」指令；而如果要取得元件實體的屬性值，我們可以使用「函數/getProperty()」指令。 • 實作演練：ch02-1.fla • 設定及取得場景中元件實體的屬性值 on (release) { x2 = getProperty(biplane,_x); y2 = getProperty(biplane,_y); a2 = getProperty(biplane,_alpha); t2 = getProperty(biplane,_rotation); } on (release) { setProperty("biplane", _x, x1); setProperty("biplane", _y, y1); setProperty("biplane", _alpha, a1); setProperty("biplane", _rotation, t1); }

利用按鈕更改圖片的大小和位置 • 實作演練：ex02.fla • 右移按鈕 on (release) { setProperty("monster", _x, monster._x+10); } • 放大按鈕 on (release) { setProperty("monster", _xscale, monster._xscale+10); setProperty("monster", _yscale, monster._yscale+10); } • 旋轉按鈕 on (release) { setProperty("monster", _rotation, monster._rotation+90); }

載入外部的swf影片 • 設計動畫時，如果動畫較複雜，可能會造成檔案過大。取代的方式是將某些影片片段的內容儲存成獨立的「swf」檔，而需要播放這些影片時，再將它載入。我們可以使用「loadMovie()」指令來載入外部的flash影片。並可使用「unloadMovie」指令將影片移除 • 實作演練：ch04-1.fla • 利用「動作／瀏覽器/網路／loadMovie()」指令載入外部的影片 • 實作演練：ch04-2.fla，使用「專家模式」輸入指令 • 利用「loadMovie()」指令載入外部的影片到指定的位置並播放 • on (release) { • _root.createEmptyMovieClip("where", 1); • where.loadMovie("load_test1.swf"); • where._x = 200; • where._y = 100; • } on (release) { unloadMovie("where"); }

播放視訊影片 • 使用「LoadMovie」動態載入影片 loadMovie("url",level/target[, variables]) • 實作演練：ex00.fla • 步驟一：新增一個空的影片片段元件「m」，在「廣告」圖層中，拖曳至場景中，位置：190, 135，實體名稱「m」 • 步驟二：在「action」圖層第一影格中，設定指令，並重覆設定2~5影格 loadMovie("ex_1.swf", "m"); stop(); • 步驟三：使用nextFrame、prevFrame設定按鈕

載入外部的文字檔 • 「文字物件」可分為「靜態文字」、「動態文字」和「輸入文字」等三種類型，其中「動態文字」和「輸入文字」可以在動畫執行時改變顯示的內容，除了撰寫ActionScript來設定文字的顯示之外，我們也可以載入外部的資料並顯示在文字物件中。主要的設定方式在於運用文字物件的「變數名稱」和「值」。在設計時，必需小心外部文字檔中的關鍵字必需和文字物件的變數名稱相同。 • 外部文字檔可以是「.txt」。

載入外部的文字檔 • 實作演練：ch05-1.fla • 利用「loadVariablesNum()」指令載入外部文字檔案的內容 • 步驟一： • 設定「相關說明」的文字方塊的「變數」名稱－info • 在「Actions」圖層第一影格中，建立陣列的內容 myAry = new Array(3); myAry[0] = "本校預計於9/3開學，…"; myAry[1] = "各科成績若在50~60分者，…"; myAry[2]="自行輸入內容"; • 指定「相關說明」的文字方塊的初始內容 i=0; //設定一開始是第一筆內容 info = myAry[i];

載入外部的文字檔 • 步驟二：設定左右按鈕的指令 • 往左按鈕往右按鈕 • 先行測試結果 on (release) { if (i<>2) { i = i+1; } info = myAry[i]; } on (release) { if (i<>0) { i = i-1; } info = myAry[i]; }

載入外部的文字檔 • 使用loadVariablesNum指令 • 相關的文字檔：「score.txt」

載入外部的文字檔 • 步驟三：建立文字欄位的變數名稱 • S_Name、S_Math 、S_Chn 、S_Eng • 步驟四：修改「Actions」圖層第一影格的指令 loadVariablesNum("score.txt", 0); count=1; stop(); • 完成後，測試內容

載入外部的文字檔 • 步驟五：設定「學生資料」的按鈕指令 • 第一筆最後一筆 • 往左按鈕往右按鈕 on (press) { S_Name= eval("S_Name" + 1); S_Math = eval("S_Math" + 1); S_Chn = eval("S_Chn" + 1); S_Eng = eval("S_Eng" + 1); } on (press) { S_Name= eval("S_Name" + total); S_Math = eval("S_Math" + total); S_Chn = eval("S_Chn" + total); S_Eng = eval("S_Eng" + total); } on (press) { count-=1; if(count<1) count=1; S_Name= eval("S_Name" + count); S_Math = eval("S_Math" + count); S_Chn = eval("S_Chn" + count); S_Eng = eval("S_Eng" + count); } on (press) { count+=1; if(count>total) count=total; S_Name= eval("S_Name" + count); S_Math = eval("S_Math" + count); S_Chn = eval("S_Chn" + count); S_Eng = eval("S_Eng" + count); }

設計具有捲軸的文字區域 • 實作演練：ch05-2.fla • 步驟一：新增一圖層，繪製動態文字方塊，變數名為：readme • 步驟二：在新增圖層的第一影格上，設定指令為 loadVariablesNum("music.txt", 0); stop(); • 測試結果 • 步驟三：加上元件庫中的「按鈕」元件，設定指令 • 往上： on (press) { _root.readme.scroll = _root.readme.scroll+1; }

設計具有捲軸的文字區域 • 實作演練：ch05-3.fla • 利用ScrollBar組件控制動態文字方塊內容 • 步驟一：繪製動態文字方塊 • 步驟二：加入ScrollBar • 步驟三：在文字方塊中輸入文字

建立全螢幕播放檔 • 如果我們希望瀏覽者能利用全螢幕的方式觀賞我們製作的動畫時，那我們就需要使用到「瀏覽器／網路／fscommand()」這個指令了。 • 開啟全螢幕播放只是其中的一項小功能，其實我們還可以利用這個指令來開啟外部的應用程式。指令的使用格式如下： fscommand("command", "parameters") • 相關的參數說明如下： • command：傳遞給 Flash Player 的命令，或是外部應用程式的名稱。 • Parameters：傳遞給 Flash Player 的值。

相關的參數的屬性及值的設定

建立全螢幕播放檔 • 實作演練：ch06-1.fla • 全螢幕：fscommand("fullscreen", true); • 還原： fscommand("fullscreen", false); • 縮小：fscommand("allowscale", flase); • 放大：fscommand("allowscale", true); • 關閉：fscommand("quit"); • 關閉ESC鍵：fscommand("trapallkeys", "true");

Class4 ActionScript 概念