マウス入力のキャプチャ

マウスクリックにより、インタラクティブ機能のトリガに使用できるマウスイベントが作成されます。イベントリスナーをステージに追加して、SWF ファイル内で発生するマウスイベントを監視できます。InteractiveObject クラスを継承するステージ上のオブジェクト (Sprite や MovieClip など) にイベントリスナーを追加することもできます。これらのリスナーはオブジェクトがクリックされるとトリガされます。

キーボードイベントと同様に、マウスイベントはバブルします。次の例では、square はステージの子であるため、四角形がクリックされると、スプライト square および Stage オブジェクトの両方によってイベントが送出されます。

var square:Sprite = new Sprite();
square.graphics.beginFill(0xFF0000);
square.graphics.drawRect(0,0,100,100);
square.graphics.endFill();
square.addEventListener(MouseEvent.CLICK, reportClick);
square.x =
square.y = 50;
addChild(square);

stage.addEventListener(MouseEvent.CLICK, reportClick);

function reportClick(event:MouseEvent):void
{
    trace(event.currentTarget.toString() + 
        " MouseEvent を送出します。Local coords [" + 
        event.localX + "," + event.localY + "] Stage coords [" + 
        event.stageX + "," + event.stageY + "]");
}

上記の例では、マウスイベントには、クリックに関する位置情報が含まれます。localX プロパティと localY プロパティには、表示チェーン内の最下位の子上でのクリックの場所に関する位置情報が含まれます。たとえば、square の左上隅をクリックすると、この位置は square の基準点であるため、ローカル座標の [0,0] が表示されます。一方、stageX プロパティと stageY プロパティでは、ステージ上でのクリックのグローバル座標が参照されます。同じ場所をクリックすると、グローバル座標の [50,50] が表示されます。これは、square がこの座標に移動されてたためです。ユーザー操作に応答する方法に応じて、これらの座標ペアの両方を使用できます。

MouseEvent オブジェクトには、altKey プロパティ、ctrlKey プロパティ、shiftKey Boolean プロパティがあります。これらのプロパティを使って、Alt キー、Ctrl キー、または Shift キーがマウスクリックと同時に押されていたかどうかを確認することができます。

ドラッグ & ドロップ機能の作成

ドラッグ & ドロップ機能を使用すると、ユーザーは左マウスボタンを押してオブジェクトを選択し、ボタンを押したままそのオブジェクトを画面上の新しい場所に移動し、そこで左マウスボタンを離すことによってオブジェクトをその場所にドロップすることができます。その例を次のコードに示します。

import flash.display.Sprite;
import flash.events.MouseEvent;

var circle:Sprite = new Sprite();
circle.graphics.beginFill(0xFFCC00);
circle.graphics.drawCircle(0, 0, 40);

var target1:Sprite = new Sprite();
target1.graphics.beginFill(0xCCFF00);
target1.graphics.drawRect(0, 0, 100, 100);
target1.name = "target1";

var target2:Sprite = new Sprite();
target2.graphics.beginFill(0xCCFF00);
target2.graphics.drawRect(0, 200, 100, 100);
target2.name = "target2";

addChild(target1);
addChild(target2);
addChild(circle);

circle.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown) 

function mouseDown(event:MouseEvent):void
{
    circle.startDrag();
}
circle.addEventListener(MouseEvent.MOUSE_UP, mouseReleased);

function mouseReleased(event:MouseEvent):void
{
    circle.stopDrag();
    trace(circle.dropTarget.name);
}

マウスカーソルのカスタマイズ

マウスカーソル (マウスポインタ) を非表示にしたり、ステージ上の任意の表示オブジェクトと入れ替えたりすることができます。マウスカーソルを非表示にするには、Mouse.hide() メソッドを呼び出します。カーソルをカスタマイズするには、Mouse.hide() を呼び出し、MouseEvent.MOUSE_MOVE イベントについてステージを監視し、表示オブジェクト (カスタムカーソル) の座標をイベントの stageX プロパティと stageY プロパティに設定します。次の例は、この操作の基本的な実行方法を示したものです。

var cursor:Sprite = new Sprite();
cursor.graphics.beginFill(0x000000);
cursor.graphics.drawCircle(0,0,20);
cursor.graphics.endFill();
addChild(cursor);

stage.addEventListener(MouseEvent.MOUSE_MOVE,redrawCursor);
Mouse.hide();

function redrawCursor(event:MouseEvent):void
{
    cursor.x = event.stageX;
    cursor.y = event.stageY;
}

コンテキストメニューのカスタマイズ

InteractiveObject クラスを継承している各オブジェクトには、SWF ファイル内で右クリックすると表示される独自のコンテキストメニューを設定できます。[進む]、[戻る]、[印刷]、[品質]、[ズーム] などのいくつかのコマンドは、デフォルトで組み込まれています。

[設定] および [Flash Player について] コマンド以外のデフォルトのコマンドは、すべてメニューから削除できます。そうするには、Stage プロパティ showDefaultContextMenu を false に設定します。

特定の表示オブジェクトに対してカスタマイズしたコンテキストメニューを作成する場合、ContextMenu クラスの新しいインスタンスを作成して hideBuiltInItems() メソッドを呼び出し、そのインスタンスを該当の DisplayObject インスタンスの contextMenu プロパティに割り当てます。次の例では、動的に描画される四角形に、色をランダムに変更するコンテキストメニューコマンドを設定します。

var square:Sprite = new Sprite();
square.graphics.beginFill(0x000000);
square.graphics.drawRect(0,0,100,100);
square.graphics.endFill();
square.x =
square.y = 10;
addChild(square);

var menuItem:ContextMenuItem = new ContextMenuItem("Change Color");
menuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,changeColor);
var customContextMenu:ContextMenu = new ContextMenu();
customContextMenu.hideBuiltInItems();
customContextMenu.customItems.push(menuItem);
square.contextMenu = customContextMenu;

function changeColor(event:ContextMenuEvent):void
{
    square.transform.colorTransform = getRandomColor();
}
function getRandomColor():ColorTransform
{
    return new ColorTransform(Math.random(), Math.random(), 
        Math.random(),1,(Math.random() * 512) - 255, 
        (Math.random() * 512) -255, (Math.random() * 512) - 255, 0);
}

フォーカスの管理

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

これらの各シナリオでは、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
{
    e.target.transform.colorTransform = getRandomColor();
}
function getRandomColor():ColorTransform
{
    // 赤、緑、青のカラーチャンネルのランダム値を生成します。
    var red:Number = (Math.random() * 512) - 255;
    var green:Number = (Math.random() * 512) - 255;
    var blue:Number = (Math.random() * 512) - 255;
    
    // ランダムなカラーが付与された ColorTransform オブジェクトを作成して返します。
    return new ColorTransform(1, 1, 1, 1, red, green, blue, 0);
}