使用者互動的基本概念

Flash Player 9 以及更新的版本,Adobe AIR 1.0 以及更新的版本

您的應用程式可使用 ActionScript 3.0 來回應使用者活動,以便建立互動性。請注意,本節假定您已經熟悉 ActionScript 3.0 事件模型的使用。如需詳細資訊,請參閱 處理事件 。

擷取使用者輸入

不管是透過鍵盤、滑鼠、相機或是這些裝置的組合,使用者互動都是一切互動的基礎。在 ActionScript 3.0 中識別並回應使用者互動主要還是與偵聽事件有關。

InteractiveObject 類別 (DisplayObject 類別的子類別) 可提供處理使用者互動時所需的一般事件與功能結構。您無須直接建立 InteractiveObject 類別實體。相反地,諸如 SimpleButton、Sprite、TextField 的顯示物件,以及各種 Flash 編寫工具與 Flex 組件都會從此類別繼承其使用者互動模式,進而共用其結構。也就是說,您所學習到的技巧,以及針對來自 InteractiveObject 之物件撰寫來處理其使用者互動的程式碼,都同樣適用其它所有物件。

重要概念與術語

在進行之前,務必先熟悉下列重要的使用者互動術語:

字元碼
代表目前字元集中某個字元的數值碼 (與鍵盤上按下的某個按鍵相關)。例如,儘管「D」和「d」都是由美式英文鍵盤上相同按鍵所建立,卻各具有不同的字元碼。

快顯選單
當使用者按一下滑鼠右鍵,或是使用特定的鍵盤/滑鼠組合時,所出現的選單。一般來說,快顯選單命令會直接套用到所按下的按鍵。例如,某個影像的快顯選單可能包含一個可在個別視窗顯示影像以及一個下載該影像的命令。

焦點
表示選取的元素目前為作用中,而且成為鍵盤或滑鼠互動的目標。

按鍵碼
對應至鍵盤上實際按鍵的數值碼。

管理焦點

互動物件可以透過程式設計或是使用者動作來接收焦點。此外,如果將 tabEnabled 屬性設為 true ,當使用者按下 Tab 鍵後,焦點會從舊的物件轉移到新的物件上。請注意,除了下列情況以外, tabEnabled 的值預設都是 false :

  • 若是 SimpleButton 物件,這個值會是 true 。

  • 若是輸入文字欄位,這個值會是 true 。

  • 若是 buttonMode 設定為 true 的 Sprite 物件或 MovieClip 物件,這個值會是 true 。

針對上述每一種情況,您都可以為 FocusEvent.FOCUS_IN 或 FocusEvent.FOCUS_OUT 加入偵聽程式,以提供焦點變更時的其它行為。這種方式特別適用於文字欄位和表單,但也可以用於本身是 InteractiveObject 類別之子類別的 Sprite、影片片段或任何物件。下列範例將說明如何透過 Tab 鍵來啟用焦點循環,以及如何回應後續的焦點事件。在此情況中,每個正方形都會隨著所收到的焦點而變更顏色。

備註: Flash Professional 運用了鍵盤快速鍵來管理焦點;因此,為了適當地模擬焦點管理,您應該在瀏覽器或 AIR 中 (不要使用 Flash) 測試 SWF 檔。
var rows:uint = 10; 
var cols:uint = 10; 
var rowSpacing:uint = 25; 
var colSpacing:uint = 25; 
var i:uint; 
var j:uint; 
for (i = 0; i < rows; i++) 
{ 
    for (j = 0; j < cols; j++) 
    { 
        createSquare(j * colSpacing, i * rowSpacing, (i * cols) + j); 
    } 
} 
 
function createSquare(startX:Number, startY:Number, tabNumber:uint):void 
{ 
    var square:Sprite = new Sprite(); 
    square.graphics.beginFill(0x000000); 
    square.graphics.drawRect(0, 0, colSpacing, rowSpacing); 
    square.graphics.endFill(); 
    square.x = startX; 
    square.y = startY; 
    square.tabEnabled = true; 
    square.tabIndex = tabNumber; 
    square.addEventListener(FocusEvent.FOCUS_IN, changeColor); 
    addChild(square); 
} 
function changeColor(event:FocusEvent):void 
{ 
    event.target.transform.colorTransform = getRandomColor(); 
} 
function getRandomColor():ColorTransform 
{ 
    // Generate random values for the red, green, and blue color channels. 
    var red:Number = (Math.random() * 512) - 255; 
    var green:Number = (Math.random() * 512) - 255; 
    var blue:Number = (Math.random() * 512) - 255; 
     
    // Create and return a ColorTransform object with the random colors. 
    return new ColorTransform(1, 1, 1, 1, red, green, blue, 0); 
}

探索輸入類型

Flash Player 10.1 和 Adobe AIR 2 版本已引進功能,測試執行階段環境是否支援特定輸入類型。您可以使用 ActionScript 測試裝置上目前部署的執行階段是否具有下列功能:
  • 支援觸控筆或手指輸入 (或根本沒有觸控輸入)。

  • 具有虛擬或實體鍵盤供使用者使用 (或根本沒有鍵盤)。

  • 顯示游標 (若否,則根據游標是否停留在物件的功能不會作用)。

輸入探索 ActionScript API 包括:

輸入探索 API 可讓您利用使用者的裝置功能,或在那些功能未出現時提供替代方式。這些 API 特別適用於開發行動應用程式和已啟用觸控的應用程式。例如,如果您的介面是針對具有觸控筆之小型按鈕的行動裝置,則可以為使用手指觸控進行輸入的使用者提供具有大型按鈕的替代介面。下列程式碼是針對具有 createStylusUI() 函數的應用程式,而此函數指定適用於進行觸控筆互動的一組使用者介面元素。另一個函數 createTouchUI() 指定另一組使用者介面元素,適用於進行手指互動:

if(Capabilities.touchscreenType == TouchscreenType.STYLUS ){ 
    //Construct the user interface using small buttons for a stylus 
    //and allow more screen space for other visual content 
    createStylusUI(); 
} else if(Capabilities.touchscreenType = TouchscreenType.FINGER){ 
    //Construct the user interface using larger buttons 
    //to capture a larger point of contact with the device 
    createTouchUI(); 
}
開發不同輸入環境的應用程式時,請考慮下列相容性圖表:

環境

supportsCursor

touchscreenType == FINGER

touchscreenType == STYLUS

touchscreenType == NONE

傳統桌面

true

False

False

true

電容式觸控螢幕裝置 (可偵測細微人體觸控的數位板、PDA 和手機,例如 Apple iPhone 或 Palm Pre)

False

true

False

False

電阻式觸控螢幕裝置 (可偵測精確高壓接觸的數位板、PDA 和手機,例如 HTC Fuze)

False

False

true

False

非觸控螢幕裝置 (可執行應用程式但沒有偵測接觸之螢幕的功能手機和裝置)

False

False

False

true

備註: 不同的裝置平台可以支援多種輸入類型的組合。此圖表可當成一般指南使用。