位置の変更

あらゆる表示オブジェクトに対する最も基本的な操作は、画面上への配置です。表示オブジェクトの位置を設定するには、オブジェクトの x プロパティと y プロパティを変更します。

myShape.x = 17;
myShape.y = 212;

表示オブジェクトの配置システムでは、Stage を直交座標系 (水平方向の x 軸と垂直方向の y 軸を使用する一般的なグリッド方式) として処理します。座標系の原点 (x 軸と y 軸が交わる 0,0 座標) は、ステージの左上隅になります。この位置から右方向が x 値の正方向、左方向が負方向になります。一方、(一般的なグラフとは異なり) 下方向が y 値の正方向、上方向が負方向になります。たとえば上記のコード行の場合、オブジェクト myShape は、x 座標 17 (原点から右方向へ 17 ピクセル)、y 座標 212 (原点から下方向へ 212 ピクセル) に移動します。

デフォルトでは、ActionScript を使用して表示オブジェクトを作成する場合、x プロパティと y プロパティはいずれも 0 に設定され、表示オブジェクトは親コンテンツの左上隅に配置されます。

サブトピック

ステージを基準とした位置の変更
ドラッグ & ドロップ操作の作成

ステージを基準とした位置の変更

x プロパティと y プロパティは、親表示オブジェクト軸の 0,0 座標を基準とした表示オブジェクトの位置を常に参照することに注意してください。このため、Sprite インスタンス内の Shape インスタンス (円など) の場合、Shape オブジェクトの x プロパティと y プロパティを 0 に設定すると、円は Sprite の左上隅に配置されます。これは、必ずしもステージの左上隅とは限りません。グローバルステージ座標を基準としてオブジェクトを配置するには、任意の表示オブジェクトの globalToLocal() メソッドを使用して、次のようにグローバル (ステージ) 座標からローカル (表示オブジェクトコンテナ) 座標に変換します。

// ステージの左上隅にシェイプを配置
// 親の位置には関係なく配置する。

// Sprite を作成し、x:200、y:200 に配置する。
var mySprite:Sprite = new Sprite();
mySprite.x = 200;
mySprite.y = 200;
this.addChild(mySprite);

// 参照用に、Sprite の 0,0 座標の位置にドットを描画する。
mySprite.graphics.lineStyle(1, 0x000000);
mySprite.graphics.beginFill(0x000000);
mySprite.graphics.moveTo(0, 0);
mySprite.graphics.lineTo(1, 0);
mySprite.graphics.lineTo(1, 1);
mySprite.graphics.lineTo(0, 1);
mySprite.graphics.endFill();

// 円の Shape インスタンスを作成する。
var circle:Shape = new Shape();
mySprite.addChild(circle);

// 半径 50 で、Shape の x:50、y:50 に中心点がある円を描画する。
circle.graphics.lineStyle(1, 0x000000);
circle.graphics.beginFill(0xff0000);
circle.graphics.drawCircle(50, 50, 50);
circle.graphics.endFill();

// ステージの 0, 0 座標に左上隅が来るようにシェイプを移動する。
var stagePoint:Point = new Point(0, 0);
var targetPoint:Point = mySprite.globalToLocal(stagePoint);
circle.x = targetPoint.x;
circle.y = targetPoint.y;

同様に、DisplayObject クラスの localToGlobal() メソッドを使用して、ローカル座標をステージ座標に変換できます。

ドラッグ & ドロップ操作の作成

表示オブジェクトを移動する一般的な方法の 1 つは、ドラッグ & ドロップ操作を作成し、ユーザーがオブジェクトをクリックしてからマウスボタンを離すまで、オブジェクトがマウスの動きに合わせて移動するようにする方法です。ActionScript でドラッグ & ドロップ操作を作成する方法は 2 つあります。いずれの方法でも、2 つのマウスイベントを使用します。つまり、マウスボタンが押された場合はマウスカーソルに従って移動するようにオブジェクトに指示を出し、マウスボタンが離された場合はマウスカーソルに従って停止するようにオブジェクトに指示を出します。

最初の方法は startDrag() メソッドを使用した方法です。これは簡単な方法ですが、制約が多くなります。マウスボタンを押すと、ドラッグされる表示オブジェクトの startDrag() メソッドが呼び出されます。マウスボタンを離すと、stopDrag() メソッドが呼び出されます。

// このコードは、startDrag() 方式を使用してドラッグ & ドロップ操作を
// 作成する。
// 四角形は DisplayObject (MovieClip または Sprite インスタンスなど)。

import flash.events.MouseEvent;

// この関数は、マウスボタンが押されたときに呼び出される。
function startDragging(event:MouseEvent):void
{
    square.startDrag();
}

// この関数は、マウスボタンが離されたときに呼び出される。
function stopDragging(event:MouseEvent):void
{
    square.stopDrag();
}

square.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
square.addEventListener(MouseEvent.MOUSE_UP, stopDragging);

この方法の場合、startDrag() を使用してドラッグできるのは一度に 1 つのアイテムだけという重大な制約があります。ある表示オブジェクトがドラッグされているときに startDrag() メソッドが別の表示オブジェクトに対して呼び出された場合、最初の表示オブジェクトはマウスに従って直ちに停止します。たとえば、startDragging() 関数を次のように変更した場合、square.startDrag() メソッド呼び出しにも関わらず、circle オブジェクトだけがドラッグされます。

function startDragging(event:MouseEvent):void
{
    square.startDrag();
    circle.startDrag();
}

startDrag() を使用してドラッグできるのは、一度に 1 つのオブジェクトのみです。そのため、表示オブジェクトに対して stopDrag() メソッドが呼びだされると、現在ドラッグ中のオブジェクトがどんなオブジュクトであってもそのオブジェクトは停止します。

複数の表示オブジェクトをドラッグする必要がある場合、または複数のオブジェクトが startDrag() を使用することで生じる可能性のある競合を回避する必要がある場合は、マウス追従方式を使用してドラッグ効果を作成するのが最適です。この方式を使用すると、マウスボタンが押されたときに、ステージの mouseMove イベントに対するリスナーとして関数がサブスクライブされます。マウスを移動するたびに呼び出されるこの関数により、ドラッグされるオブジェクトは、マウスの x, y 座標にジャンプします。マウスボタンを離すと、関数はリスナーとしてのサブスクライブを解除されます。この場合、マウスを移動しても関数が呼び出されなくなるため、オブジェクトはマウスカーソルに従って停止します。この方式を説明するコードを次に示します。

// このコードは、マウス追従方式を使用してドラッグ & ドロップ操作を
// 作成する。
// 円は DisplayObject (MovieClip または Sprite インスタンスなど)。

import flash.events.MouseEvent;

var offsetX:Number;
var offsetY:Number;

// この関数は、マウスボタンが押されたときに呼び出される。
function startDragging(event:MouseEvent):void
{
    // マウスボタンが押されたときのカーソルの位置と
    // マウスボタンが押されたときの円の x, y 座標との
    // 差を記録する。
    offsetX = event.stageX - circle.x;
    offsetY = event.stageY - circle.y;
    
    // mouseMove イベントの監視を開始するよう Flash Player に指示する。
    stage.addEventListener(MouseEvent.MOUSE_MOVE, dragCircle);
}

// この関数は、マウスボタンが離されたときに呼び出される。
function stopDragging(event:MouseEvent):void
{
    // mouseMove イベントの監視を停止するよう Flash Player に指示する。
    stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragCircle);
}

// この関数は、マウスボタンが押されている間、
// マウスを移動するたびに呼び出される。
function dragCircle(event:MouseEvent):void
{
    // カーソルの位置に円を移動し、
    // カーソルの位置とドラッグされるオブジェクトの 
    // 位置とのオフセットを保持する。
    circle.x = event.stageX - offsetX;
    circle.y = event.stageY - offsetY;

    // このイベントの後、画面を更新するよう Flash Player に指示する。
    event.updateAfterEvent();
}

circle.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
circle.addEventListener(MouseEvent.MOUSE_UP, stopDragging);

一般的なドラッグ & ドロップ操作には、表示オブジェクトをマウスカーソルに追従させるだけではなく、ドラッグするオブジェクトを画面の手前に移動することにより、他のすべてのオブジェクトの上に浮かせて表示させる操作もあります。たとえば、円と四角形の 2 つのオブジェクトがあり、その両方でドラッグ & ドロップ操作を使用するとします。表示リスト上で円が四角形の下にある場合、カーソルが四角形の上に来るように円をクリック & ドラッグすると、円は四角形の後ろにスライドして表示され、ドラッグ & ドロップ効果がなくなります。これとは別に、円をクリックすると、円が表示リストの一番上に移動し、常に他のすべてのコンテンツの一番上に表示される方法があります。

次のコード (前の例を応用) では、円と四角形の 2 つの表示オブジェクトに対してドラッグ & ドロップ操作を作成します。いずれかのアイテム上でマウスボタンを押すたびに、そのアイテムはステージの表示リストの最上部に移動します。その結果、ドラッグされるアイテムは常に一番上に表示されます。新しいコードと前の例から変更されたコードは、ボールド体で記述されています。

// このコードは、マウス追従方式を使用してドラッグ & ドロップ操作を
// 作成する。
// 円と四角形は DisplayObject (MovieClip または Sprite 
// インスタンスなど)。

import flash.display.DisplayObject;
import flash.events.MouseEvent;

var offsetX:Number;
var offsetY:Number;
var draggedObject:DisplayObject;

// この関数は、マウスボタンが押されたときに呼び出される。
function startDragging(event:MouseEvent):void
{
    // ドラッグ中のオブジェクトを記憶
    draggedObject = DisplayObject(event.target);
    
    // マウスボタンが押されたときのカーソルの位置と
    // マウスボタンが押されたとき、ドラッグされているオブジェクトの x, y 座標との
    // 差 (オフセット) を記録する。
    offsetX = event.stageX - draggedObject.x;
    offsetY = event.stageY - draggedObject.y;
    
    // 選択したオブジェクトを表示リストの一番上に移動
    stage.addChild(draggedObject);
    
    // mouseMove イベントの監視を開始するよう Flash Player に指示する。
    stage.addEventListener(MouseEvent.MOUSE_MOVE, dragObject);
}

// この関数は、マウスボタンが離されたときに呼び出される。
function stopDragging(event:MouseEvent):void
{
    // mouseMove イベントの監視を停止するよう Flash Player に指示する。
    stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragObject);
}

// この関数は、マウスボタンが押されている間、
// マウスを移動するたびに呼び出される。
function dragObject(event:MouseEvent):void
{
    // ドラッグされるオブジェクトをカーソルの位置に移動し、
    // カーソルの位置とドラッグされるオブジェクトの位置との 
    // オフセットを保持する。
    draggedObject.x = event.stageX - offsetX;
    draggedObject.y = event.stageY - offsetY;
    
    // このイベントの後、画面を更新するよう Flash Player に指示する。
    event.updateAfterEvent();
}

circle.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
circle.addEventListener(MouseEvent.MOUSE_UP, stopDragging);

square.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
square.addEventListener(MouseEvent.MOUSE_UP, stopDragging);

トークンやカードをパイル間で移動するゲームなどでこの効果をさらに拡張するには、ドラッグされるオブジェクトを "拾う" ときにステージの表示リストに追加し、次にマウスボタンを離すときに別の表示リスト (オブジェクトがドロップされる "パイル" など) に追加します。

最後に、効果を強調するために、表示オブジェクトをクリックしたとき (ドラッグを開始したとき) にドロップシャドウフィルタを適用し、オブジェクトを解放したときにドロップシャドウを削除します。ActionScript でのドロップシャドウフィルタや、その他の表示オブジェクトフィルタを使用する場合の詳細については、表示オブジェクトのフィルタ処理を参照してください。


 

このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート

現在のページ: http://livedocs.adobe.com/flash/9.0_jp/main/00000154.html