ユーザー操作の基礎

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 から派生した 1 つのオブジェクトでユーザー操作を処理するために使用する方法およびコードは、派生した他のオブジェクトにも適用できます。

重要な概念と用語

先に進む前に、次の主要なユーザー操作の用語について理解しておくことが重要です。

文字コード
現在の文字セットの文字を表す数値コード。文字セットは、キーボードで押されるキーに関連付けられています。例えば、「D」と「d」は米国英語キーボードでは同じキーで入力されますが、それぞれ異なる文字コードを持っています。

コンテキストメニュー
ユーザーが右クリックした場合、またはキーボードとマウスの特定の組み合わせを使用した場合に表示されるメニュー。コンテキストメニューのコマンドは、通常、クリックしたエレメントに対して直接適用されます。 例えば、イメージのコンテキストメニューにはイメージを別のウィンドウで表示するコマンドや、イメージをダウンロードするコマンドがあります。

フォーカス
選択されたエレメントがアクティブ状態で、キーボード操作またはマウス操作の対象となっていることの表示。

キーコード
キーボード上の物理的なキーに対応する数値コード。

フォーカスの管理

インタラクティブオブジェクトは、プログラムまたはユーザー操作のいずれかによってフォーカスを取得できます。 また、 tabEnabled プロパティが true に設定されている場合に Tab キーを押すと、オブジェクトのフォーカスを別のオブジェクトに渡すことができます。 tabEnabled 値のデフォルトは false です。ただし、次の場合を除きます。

  • SimpleButton オブジェクトの場合、この値は true です。

  • テキスト入力フィールドの場合、この値は true です。

  • buttonMode true に設定されている Sprite オブジェクトまたは MovieClip オブジェクトの場合、この値は true です。

これらの各シナリオでは、 FocusEvent.FOCUS_IN または FocusEvent.FOCUS_OUT に対するリスナーを追加して、フォーカスを変更したときの追加動作を設定できます。これはテキストフィールドおよびフォームで特に便利ですが、スプライトやムービークリップ、つまり InteractiveObject クラスを継承する任意のオブジェクトでも使用できます。 次の例では、Tab キーを使用してフォーカスの順次移動を有効にする方法と、それ以降のフォーカスイベントに応答する方法を示しています。 この場合、各四角形はフォーカスを取得すると色が変わります。

注意: Flash Professional は、フォーカスの管理にキーボードショートカットを使用するため、フォーカス管理を正確にシミュレートするには、Flash ではなくブラウザーまたは AIR で 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 AIR2 リリースでは、特定の入力タイプをサポートするために、ランタイム環境をテストする機能が導入されています。ActionScript を使用して、ランタイムが現在デプロイされているデバイスで次のことをテストできます。
  • スタイラス入力または指入力をサポートしているかどうか(またはタッチ入力をまったくサポートしていないかどうか)

  • ユーザー用の仮想キーボードまたは物理キーボードがあるかどうか(またはまったくキーボードがないかどうか)

  • カーソルを表示するかどうか(表示しない場合、オブジェクトの上にカーソルを移動したときに発生する機能は動作しません)

入力検出 ActionScript API には次のものがあります。

入力検出 API を使用すると、ユーザーのデバイスの機能を活用したり、それらの機能が存在しない場合に、別の方法を提供したりできます。これらの API は、モバイルアプリケーションおよびタッチが有効なアプリケーションを開発するうえで、特に有用です。例えば、スタイラス用の小さいボタンがあるモバイルデバイス向けのインターフェイスがある場合は、指を使って入力を行うユーザー用に、大きいボタンを備えた別のインターフェイスを提供することができます。次のコードは、スタイラスの操作に適切であるユーザーインターフェイスエレメントの 1 つのセットを割り当てる、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 Fuse など精密で高圧力のタッチを検出する電話)

false

false

true

false

非タッチスクリーンデバイス(アプリケーションを実行するが、タッチを検出するスクリーンを持たない高機能電話およびデバイス)

false

false

false

true

注意: デバイスプラットフォームによっては、多くの入力タイプの組み合わせをサポートできます。この表は一般的なガイドとして使用してください。