スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

--.--.-- | | スポンサー広告

マウスジェスチャー

単純なマウスジェスチャーのサンプルを作ってみました。






ステージ上でマウスの左ボタンを押したままマウスカーソルを動かすと、マウスボタンを離したときにマウスの軌跡を[右][下]等に分解して表示します。

動作としては、
1.MOUSE_MOVEイベントを使ってマウスカーソルの軌跡を記録。
2.軌跡のある領域をマス目に区切ってマス目をまたいだ移動をとりだす。
というカンジです。

今回のサンプルでは、ステージ上にresultTextという名前でダイナミックテキストをひとつ配置して、そこに結果を表示してます。
フレームのアクションは以下です。

// 分解能
var resolution:uint = 2;
// マウスカーソル位置の配列を準備する
var xArray:Array = [];
var yArray:Array = [];
// キャプチャー軌跡表示用スクリーン
var screen:Sprite = new Sprite();
addChild(screen);
// ステージでマウスボタンを押している間はキャプチャーする
stage.addEventListener(MouseEvent.MOUSE_DOWN, doMouseDown);

// マウスボタンを押したらキャプチャーを開始する
function doMouseDown(e:MouseEvent):void {
// マウスダウンイベントリスナを解除し、マウスムーブ/マウスアップイベントリスナを登録する
stage.removeEventListener(MouseEvent.MOUSE_DOWN, doMouseDown);
stage.addEventListener(MouseEvent.MOUSE_UP, doMouseUp);
stage.addEventListener(MouseEvent.MOUSE_MOVE, doMouseMove);
// 初期位置を登録する
screen.graphics.moveTo(mouseX, mouseY);
xArray.push(mouseX);
yArray.push(mouseY);
}
function doMouseUp(e:MouseEvent):void {
// マウスダウンイベントリスナを登録し、マウスムーブ/マウスアップイベントリスナを解除する
stage.addEventListener(MouseEvent.MOUSE_DOWN, doMouseDown);
stage.removeEventListener(MouseEvent.MOUSE_UP, doMouseUp);
stage.removeEventListener(MouseEvent.MOUSE_MOVE, doMouseMove);
// ジェスチャーを取得する
var gesture = getGesture();
resultText.text = gesture;
// マウスカーソル位置の配列をクリアする
xArray = [];
yArray = [];
// キャプチャー軌跡表示用スクリーンをクリアする
screen.graphics.clear();
}
function doMouseMove(e:MouseEvent):void {
// 位置を登録する
xArray.push(mouseX);
yArray.push(mouseY);
// 軌跡を描く
screen.graphics.lineStyle(1, 0x00FF00);
screen.graphics.lineTo(mouseX, mouseY);
}
// 指定した位置の配列からゼスチャーを解釈し、戻します。
function getGesture():String {
// 軌跡の矩形を求める
var minX:Number = Math.min.apply(null, xArray);
var minY:Number = Math.min.apply(null, yArray);
var maxX:Number = Math.max.apply(null, xArray);
var maxY:Number = Math.max.apply(null, yArray);
var w:Number = maxX - minX;
var h:Number = maxY - minY;
// 各領域を準備する
var colCnt:uint = w > h ? resolution : Math.ceil(resolution * w / h);
var rowCnt:uint = w > h ? Math.ceil(resolution * h / w) : resolution;
if (colCnt == 0) {
colCnt = 1;
}
if (rowCnt == 0) {
rowCnt = 1;
}
var areaArray:Array = [];
var aw:Number = w / colCnt;
var ah:Number = h / rowCnt;
for (var r:int = 0; r < rowCnt; r++) {
var ay:Number = minY + ah * r;
for (var c:int = 0; c < colCnt; c++) {
var ax:Number = minX + aw * c;
areaArray.push({x:c, y:r, rect:new Rectangle(ax, ay, aw, ah)});
}
}
// ポインタが領域をまたいで移動した履歴を結果とする
var result:String = "";
var curX:int = -1;
var curY:int = -1;
for (var i:int = 0, iEnd:int = xArray.length; i < iEnd; i++) {
var px:Number = xArray[i];
var py:Number = yArray[i];
for each (var area:Object in areaArray) {
if (area.rect.left <= px && px <= area.rect.right &&
area.rect.top <= py && py <= area.rect.bottom) {
// 領域を移動していなかったら次の位置へ
if (curX == area.x && curY == area.y) {
break;
}
// 直前の領域のどちらに移動したかを判定し、結果を生成する
if (curX >= 0) {
result += "[";
if (area.x != curX) {
result += area.x - curX > 0 ? "右" : "左";
}
if (area.y != curY) {
result += area.y - curY > 0 ? "下" : "上";
}
result += "]";
}
// 現在の領域座標を更新する
curX = area.x;
curY = area.y;
break;
}
}
}
return result;
}


 
最初に分解能を定義しています。
サンプルでは軌跡を最大2×2のマス目に区切って解析します。ので[右][右]とか[下][下]という結果は出ません。

MOUSE_DOWNイベントリスナとMOUSE_UPイベントリスナで、MOUSE_MOVEイベントリスナをつけたりはずしたりしてます。
これによりMOUSE_MOVEイベントハンドラはマウスのボタンを押してる最中だけ実行されます。

doMouseMove(MouseEvent)がMOUSE_MOVEイベントハンドラです。
ここでは、マウスカーソルの位置を配列に追加して、緑色の線を画面に描画しています。

doMouseUp(MouseEvent)がMOUSE_UPイベントハンドラです。
ここでは、先ほど述べたイベントリスナの付け替え以外に、ジェスチャーの解析結果の表示と次のキャプチャーのための初期化処理をしています。

getGesture()がMOUSE_MOVEイベントハンドラでためた位置の配列からジェスチャーを取り出すメソッドです。

まず、配列に入ってる座標から軌跡が存在する領域を求めます。
この領域を最大2×2になるように分割して、分割した領域の位置(左上ならx=0, y=0)と領域の矩形をareaArrayという配列に保持します。

位置の配列から座標をとりだしてどの領域にあるかを調べます。直前の領域と異なる領域であったらソレを結果に追加します(x=0, y=0 → x=1, y=0 ならば[右])。
すべての位置にたいして処理をおこなえば、ゼスチャーがわかるというカンジです。

サンプルでは結果を文字列にしていますが、実際には何らかの処理を切り替えるといったイメージです。

スポンサーサイト

テーマ:Flash - ジャンル:コンピュータ

2010.04.22 | | Comments(0) | Trackback(0) | Flash CS4

«  | HOME |  »

プロフィール

HundredthMonkey

Author:HundredthMonkey
プログラマ。

ブロとも申請フォーム

この人とブロともになる

メールフォーム

名前:
メール:
件名:
本文:

ブログ内検索


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。