ユーザー操作の基礎

キーボード、マウス、カメラ、またはこれらのデバイスの組み合わせによるユーザー操作は、インタラクティブ機能の基盤となります。 ActionScript 3.0 では、ユーザー操作を識別しそれに応答するには、まずイベントを監視する必要があります。

InteractiveObject クラス は、DisplayObject クラスのサブクラスであり、ユーザー操作の処理に必要なイベントおよび機能に共通の構造を提供します。 InteractiveObject クラスのインスタンスは直接作成しません。 代わりに、SimpleButton、Sprite、TextField などの表示オブジェクトと様々な Flash オーサリングツールおよび Flex コンポーネントは、このクラスからユーザー操作モデルを継承し、共通の構造を共有します。つまり、InteractiveObject から派生した 1 つのオブジェクトでユーザー操作を処理するために使用する方法およびコードは、派生した他のオブジェクトにも適用できます。

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

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

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

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

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

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); 
}

入力検出 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(); 
}