Flashゲームプログラミング講座 for ActionScript3.0


入力コントロールについて



・サポートする入力コントロールを調べる
・タッチスクリーン入力を取得する
・ジェスチャー入力を取得する

前のページに戻る

　

サポートする入力コントロールを調べる

　


■利用可能な入力コントロールを調べる


Flash で使用できる入力コントロールとして以下の種類があります。
　
タッチスクリーン
マウス用カーソル
物理キーボード
仮想キーボード
　


■タッチスクリーン


タッチスクリーンのタイプを調べるには、Capabilities.touchscreenType プロパティを使用します。
　
以下の定数が得られます。
　
定数 文字 解説
TouchscreenType.NONE "none" タッチスクリーンに未対応
TouchscreenType.STYLUS "stylus" ペンによる入力に対応
TouchscreenType.FINGER "finger" 指による入力に対応
　
取得例です。
　
タッチスクリーンのタイプを調べる

import flash.system.Capabilities;
import flash.text.TextField;

// テキストフィールドを作成
var text_field:TextField = new TextField();
text_field.x = 10;
text_field.y = 10;
text_field.width = stage.stageWidth - 20;
text_field.height = 20;
text_field.border = true;
stage.addChild(text_field);

text_field.text = "タッチスクリーン:" + Capabilities.touchscreenType;
　

■マウス用カーソルのサポート


マウス用カーソルがサポートされているか調べるには、Mouse.supportsCursor プロパティを使用します。
　
true であれば、サポートされています。
　
マウス用カーソルがサポートされているか調べる

import flash.ui.Mouse;
import flash.text.TextField;

// テキストフィールドを作成
var text_field:TextField = new TextField();
text_field.x = 10;
text_field.y = 10;
text_field.width = stage.stageWidth - 20;
text_field.height = 20;
text_field.border = true;
stage.addChild(text_field);

text_field.text = "マウス用カーソルのサポート:" + Mouse.supportsCursor;
　

■物理キーボード


物理キーボードのタイプを調べるには、Keyboard.physicalKeyboardType プロパティを使用します。
　
以下の定数が得られます。
　
定数 文字 解説
KeyboardType.NONE "none" 物理キーボードに未対応
KeyboardType.KEYPAD "keypad" 携帯電話型の数字キーパッド
KeyboardType.ALPHANUMERIC "alphanumeric" 標準の数字と文字キーが揃ったキーボード
　
取得例です。
　
物理キーボードのタイプを調べる

import flash.ui.Keyboard;
import flash.text.TextField;

// テキストフィールドを作成
var text_field:TextField = new TextField();
text_field.x = 10;
text_field.y = 10;
text_field.width = stage.stageWidth - 20;
text_field.height = 20;
text_field.border = true;
stage.addChild(text_field);

text_field.text = "物理キーボードのタイプ:" + Keyboard.physicalKeyboardType;
　

■仮想キーボードのサポート


仮想キーボードがサポートされているか調べるには、Keyboard.hasVirtualKeyboard プロパティを使用します。
　
true であれば、サポートされています。
　
仮想キーボードがサポートされているか調べる

import flash.ui.Keyboard;
import flash.text.TextField;

// テキストフィールドを作成
var text_field:TextField = new TextField();
text_field.x = 10;
text_field.y = 10;
text_field.width = stage.stageWidth - 20;
text_field.height = 20;
text_field.border = true;
stage.addChild(text_field);

text_field.text = "仮想キーボードのサポート:" + Keyboard.hasVirtualKeyboard;
　

上に戻る

　

タッチスクリーン入力を取得する

　

サンプルをダウンロード
input_control_01_fla11_as3.flaAdobe Flash CS5 AcrionScript3.0
　


■タッチイベントに対応しているか調べる


タッチイベントに対応しているか調べるには、Multitouch.supportsTouchEvents プロパティを使用します。
　
true であれば、TouchEvent クラスのイベントを使用することができます。
　
タッチイベントに対応しているか調べる

import flash.ui.Multitouch;
import flash.text.TextField;

// テキストフィールドを作成
var text_field:TextField = new TextField();
text_field.x = 10;
text_field.y = 10;
text_field.width = stage.stageWidth - 20;
text_field.height = 20;
text_field.border = true;
stage.addChild(text_field);

text_field.text = "タッチイベントのサポート:" + Multitouch.supportsTouchEvents;
　

■インプットモードを設定する


タッチ操作の入力モードとして、以下の種類が定義されています。
　
定数 文字 解説
MultitouchInputMode.NONE "none" すべての操作をマウスイベントとして処理
MultitouchInputMode.TOUCH_POINT "touchPoint" 基本的なタッチ操作をイベント処理します。それ以外をマウスイベントとして処理します。
MultitouchInputMode.GESTURE "gesture" ジェスチャーがあればイベント処理します。それ以外をマウスイベントとして処理します。
　
入力モードを設定するには、Multitouch.inputMode プロパティを使用します。
　
デフォルトは、MultitouchInputMode.GESTURE となります。
　
「タッチイベント」と「ジェスチャーイベント」は、同時に使用できません。
　
どちらか片方のイベントを利用すると、もう片方のイベントは使用できません。
　
ここでは、タッチイベントを使用するので、MultitouchInputMode.TOUCH_POINT を設定します。
　
入力モードをタッチポイントに設定する

import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;

// 入力モードをタッチポイントに設定する
Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
　

■タッチイベントの種類について


TouchEvent には、以下のイベントがあります。
　
イベント定数 解説
TouchEvent.TOUCH_BEGIN タッチを開始
TouchEvent.TOUCH_MOVE タッチしたまま平行移動
TouchEvent.TOUCH_END タッチを終了
TouchEvent.TOUCH_OUT インスタンスの外へ移動
TouchEvent.TOUCH_OVER インスタンスの内へ移動
TouchEvent.TOUCH_ROLL_OUT 自分の子を含むインスタンスの外へ移動
TouchEvent.TOUCH_ROLL_OVER 自分の子を含むインスタンスの内へ移動
TouchEvent.TOUCH_TAP タップ操作
　
タッチイベントを調べる

import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;
import flash.text.TextField;
import flash.events.TouchEvent;

// テキストフィールドを作成
var text_field:TextField = new TextField();
text_field.x = 10;
text_field.y = 10;
text_field.width = stage.stageWidth - 20;
text_field.height = stage.stageHeight - 20;
text_field.border = true;
text_field.selectable = false;
stage.addChild(text_field);

// TouchEvent をサポートしている
if(Multitouch.supportsTouchEvents){

	// インプットモードをタッチポイントに設定
	Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;


	stage.addEventListener(TouchEvent.TOUCH_BEGIN,function (e:TouchEvent):void{
		text_field.text = "タッチの開始 ID:" + e.touchPointID + "\n" + text_field.text;
	});

	stage.addEventListener(TouchEvent.TOUCH_MOVE,function (e:TouchEvent):void{
		text_field.text = "タッチしながら移動中 ID:" + e.touchPointID + "\n" + text_field.text;
	});

	stage.addEventListener(TouchEvent.TOUCH_END,function (e:TouchEvent):void{
		text_field.text = "タッチを終了 ID:" + e.touchPointID + "\n" + text_field.text;
	});

	stage.addEventListener(TouchEvent.TOUCH_OUT,function (e:TouchEvent):void{
		text_field.text = "タッチしながらインスタンス外へ移動（子は外扱い） ID:" + e.touchPointID + "\n" + text_field.text;
	});

	stage.addEventListener(TouchEvent.TOUCH_OVER,function (e:TouchEvent):void{
		text_field.text = "タッチしながらインスタンス内へ移動（子は外扱い） ID:" + e.touchPointID + "\n" + text_field.text;
	});

	stage.addEventListener(TouchEvent.TOUCH_ROLL_OUT,function (e:TouchEvent):void{
		text_field.text = "タッチしながらインスタンス外へ移動（子は内扱い） ID:" + e.touchPointID + "\n" + text_field.text;
	});

	stage.addEventListener(TouchEvent.TOUCH_ROLL_OVER,function (e:TouchEvent):void{
		text_field.text = "タッチしながらインスタンス内へ移動（子は内扱い） ID:" + e.touchPointID + "\n" + text_field.text;
	});

	stage.addEventListener(TouchEvent.TOUCH_TAP,function (e:TouchEvent):void{
		text_field.text = "タップ操作 ID:" + e.touchPointID + "\n" + text_field.text;
	});

}
　

■タッチイベントのプロパティについて


TouchEvent には、以下のプロパティがあります。
　
プロパティ名 型 解説
localX Number インスタンス内（ローカル）の x 座標
localY Number インスタンス内（ローカル）の y 座標
stageX Number ステージの x 座標
stageY Number ステージの y 座標
sizeX Number 接触矩形の幅
sizeY Number 接触矩形の高さ
pressure Number 接触の強さ（0.0～1.0）
touchPointID int タッチの識別ＩＤ(マルチタッチ用)
　
■マルチタッチの入力を取得する (touchPointID プロパティ)

マルチタッチ操作を、個別のシングルタッチとして識別するには、touchPointID プロパティを使用します。
　
マルチタッチ操作を行った場合、touchPointID プロパティに、ユニーク（唯一）な番号が割り振られます。
　
touchPointID を調べる事で、シングルタッチとしての変化を追いかけることができます。
　
取得例です。
　
タッチイベントのプロパティを調べる

import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;
import flash.text.TextField;
import flash.events.TouchEvent;

// テキストフィールドを作成
var text_field:TextField = new TextField();
text_field.x = 10;
text_field.y = 10;
text_field.width = stage.stageWidth - 20;
text_field.height = stage.stageHeight - 20;
text_field.border = true;
text_field.selectable = false;
stage.addChild(text_field);

// TouchEvent をサポートしている
if(Multitouch.supportsTouchEvents){

	// インプットモードをタッチポイントに設定
	Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;


	stage.addEventListener(TouchEvent.TOUCH_MOVE,function (e:TouchEvent):void{

		var str:String = "";
		str += "インスタンス内（ローカル）の x 座標:" + e.localX + "\n";
		str += "インスタンス内（ローカル）の y 座標:" + e.localY + "\n";
		str += "ステージの x 座標:" + e.stageX + "\n";
		str += "ステージの y 座標:" + e.stageY + "\n";
		str += "接触矩形の幅:" + e.sizeX + "\n";
		str += "接触矩形の高さ:" + e.sizeY + "\n";
		str += "接触の強さ（0.0～1.0）:" + e.pressure + "\n";
		str += "タッチの識別ＩＤ(マルチタッチ用):" + e.touchPointID + "\n";

		text_field.text = str;
	});
}
　

■マルチタッチの最大同時タッチポイント数を調べる


同時にタッチできる最大のポイント数を取得するには、Multitouch.maxTouchPoints プロパティを使用します。
　
タッチイベントを調べる

import flash.ui.Multitouch;
import flash.text.TextField;

// テキストフィールドを作成
var text_field:TextField = new TextField();
text_field.x = 10;
text_field.y = 10;
text_field.width = stage.stageWidth - 20;
text_field.height = 20;
text_field.border = true;
stage.addChild(text_field);

text_field.text = "最大同時タッチポイント数:" + Multitouch.maxTouchPoints;
　

上に戻る

　

ジェスチャー入力を取得する

　

サンプルをダウンロード
input_control_02_fla11_as3.flaAdobe Flash CS5 AcrionScript3.0
　


■ジェスチャーとは？


マルチタッチスクリーンの機能を利用した特殊な操作をジェスチャーといいます。
　
例えば、「２つの指で同時にタップする」「タッチしたまま平行移動する」「２本の指で回転する」といった操作です。
　
ジェスチャーは、自前で計算する必要はなくイベントとして検出することができます。
　

■ジェスチャーイベントに対応しているか調べる


ジェスチャーイベントに対応しているか調べるには、Multitouch.supportsGestureEvents プロパティを使用します。
　
true であれば、GestureEvent クラスを使用することができます。
　
ジェスチャーイベントに対応しているか調べる

import flash.ui.Multitouch;
import flash.text.TextField;

// テキストフィールドを作成
var text_field:TextField = new TextField();
text_field.x = 10;
text_field.y = 10;
text_field.width = stage.stageWidth - 20;
text_field.height = 20;
text_field.border = true;
stage.addChild(text_field);

text_field.text = "ジェスチャーイベントのサポート:" + Multitouch.supportsGestureEvents;
　

■インプットモードを設定する


タッチ操作の入力モードを、ジェスチャーに変更します。
　
Multitouch.inputMode プロパティに、MultitouchInputMode.GESTURE をセットします。
　
入力モードを「ジェスチャー」に変更すると、「タッチポイント」が使用できなくなります。
　
入力モードをジェスチャーに設定する

import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;

// 入力モードをジェスチャーに設定する
Multitouch.inputMode = MultitouchInputMode.GESTURE;
　

■ジェスチャーイベント用のクラスについて


ジェスチャーイベントが利用できるクラスは、以下の種類があります。
　
■GestureEvent クラス
■TransformGestureEvent クラス
■PressAndTapGestureEvent クラス
　

■各ジェスチャーをサポートしているか調べる


各ジェスチャーが利用できるか調べるには、Multitouch.supportedGestures プロパティを使用します。
　
Multitouch.supportedGestures プロパティには配列が格納されています。
　
配列の中に以下の定数があれば、ジェスチャーイベントを利用できます。
　
イベント定数 解説
GestureEvent.GESTURE_TWO_FINGER_TAP ２つの指で同時にタップする
TransformGestureEvent.GESTURE_PAN 複数の指でタッチしたまま平行移動
TransformGestureEvent.GESTURE_SWIPE 払うような動作
TransformGestureEvent.GESTURE_ROTATE ２つの指でタッチしたまま中心を軸に回転
TransformGestureEvent.GESTURE_ZOOM ２つの指でタッチしたまま距離を変化
PressAndTapGestureEvent.GESTURE_PRESS_AND_TAP タッチしたままさらに２本目の指でタップ
　
確認例です。
　
ジェスチャーイベントに対応しているか調べる

import flash.ui.Multitouch;
import flash.text.TextField;
import flash.events.GestureEvent;
import flash.events.TransformGestureEvent;
import flash.events.PressAndTapGestureEvent;

// テキストフィールドを作成
var text_field:TextField = new TextField();
text_field.x = 10;
text_field.y = 10;
text_field.width = stage.stageWidth - 20;
text_field.height = stage.stageHeight - 20;
text_field.border = true;
text_field.selectable = false;
stage.addChild(text_field);

// GestureEvent をサポートしている
if(Multitouch.supportsGestureEvents){

	var str:String = "";
	var i:int;
	var num:int = Multitouch.supportedGestures.length;
	for(i=0;i < num;i++){
		switch(Multitouch.supportedGestures[i]){
		case GestureEvent.GESTURE_TWO_FINGER_TAP:
			str += "２つの指で同時にタップする\n";
			break;
		case TransformGestureEvent.GESTURE_PAN:
			str += "２複数の指でタッチしたまま平行移動\n";
			break;
		case TransformGestureEvent.GESTURE_SWIPE:
			str += "払うように移動\n";
			break;
		case TransformGestureEvent.GESTURE_ROTATE:
			str += "２本指で回転（２本指の角度を変化）\n";
			break;
		case TransformGestureEvent.GESTURE_ZOOM:
			str += "２本指で拡大縮小（２本指の距離を変化）\n";
			break;
		case PressAndTapGestureEvent.GESTURE_PRESS_AND_TAP:
			str += "タッチしたままさらに２本目の指でタップ\n";
			break;
		}
	}
	
	text_field.text = str;
}
　
　


■GestureEvent クラスを使ったジェスチャー検出


GestureEvent クラスには、以下のイベントがあります。
　
イベント定数 解説
GestureEvent.GESTURE_TWO_FINGER_TAP ２つの指で同時にタップする
　
使用例です。
　
GestureEvent クラスのイベントを使用する

import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;
import flash.text.TextField;
import flash.events.GestureEvent;

// テキストフィールドを作成
var text_field:TextField = new TextField();
text_field.x = 10;
text_field.y = 10;
text_field.width = stage.stageWidth - 20;
text_field.height = stage.stageHeight - 20;
text_field.border = true;
text_field.selectable = false;
stage.addChild(text_field);

// GestureEvent をサポートしている
if(Multitouch.supportsGestureEvents){

	// インプットモードをジェスチャーに設定
	Multitouch.inputMode = MultitouchInputMode.GESTURE;


	stage.addEventListener(GestureEvent.GESTURE_TWO_FINGER_TAP,function (e:GestureEvent):void{
		text_field.text = "２本の指で同時にタップする\n" + text_field.text;
	});
}
　
　


■TransformGestureEvent クラスを使ったジェスチャー検出


TransformGestureEvent クラスには、以下のイベントがあります。
　
イベント定数 解説
TransformGestureEvent.GESTURE_PAN 複数の指でタッチしたまま平行移動
TransformGestureEvent.GESTURE_SWIPE 払うような動作
TransformGestureEvent.GESTURE_ROTATE ２つの指でタッチしたまま中心を軸に回転
TransformGestureEvent.GESTURE_ZOOM ２つの指でタッチしたまま距離を変化
　
TransformGestureEvent クラスには、以下のプロパティがあります。
　
スワイプ操作の場合、オフセット座標ではなく長さが１のベクトルが得られます。
　
プロパティ名 型 解説
offsetX Number 前回のジェスチャーから変化した x 座標値
offsetY Number 前回のジェスチャーから変化した y 座標値
rotation Number 前回のジェスチャーから変化した角度
scaleX Number 前回のジェスチャーから変化した x 方向拡大率
scaleY Number 前回のジェスチャーから変化した y 方向拡大率
stageX Number 複数指の中心 x 座標
stageY Number 複数指の中心 y 座標
　
使用例です。
　
TransformGesture クラスのイベントを使用する

import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;
import flash.text.TextField;
import flash.events.TransformGestureEvent;

// テキストフィールドを作成
var text_field:TextField = new TextField();
text_field.x = 10;
text_field.y = 10;
text_field.width = stage.stageWidth - 20;
text_field.height = stage.stageHeight - 20;
text_field.border = true;
text_field.selectable = false;
stage.addChild(text_field);

// GestureEvent をサポートしている
if(Multitouch.supportsGestureEvents){

	// インプットモードをジェスチャーに設定
	Multitouch.inputMode = MultitouchInputMode.GESTURE;


	stage.addEventListener(TransformGestureEvent.GESTURE_SWIPE,function (e:TransformGestureEvent):void{
		text_field.text = "スワイプ操作 x:" + e.offsetX + " y:" + e.offsetY + "\n" + text_field.text;
	});

	stage.addEventListener(TransformGestureEvent.GESTURE_PAN,function (e:TransformGestureEvent):void{
		text_field.text = "パン操作 x:" + e.offsetX + " y:" + e.offsetY + "\n" + text_field.text;
	});

	stage.addEventListener(TransformGestureEvent.GESTURE_ROTATE,function (e:TransformGestureEvent):void{
		text_field.text = "ローテーション操作 r:" + e.rotation + "\n" + text_field.text;
	});

	stage.addEventListener(TransformGestureEvent.GESTURE_ZOOM,function (e:TransformGestureEvent):void{
		text_field.text = "ズーム操作 x:" + e.scaleX + " y:" + e.scaleY + "\n" + text_field.text;
	});
}
　
　


■PressAndTapGestureEvent クラスを使ったジェスチャー検出


PressAndTapGestureEvent クラスには、以下のイベントがあります。
　
イベント定数 解説
PressAndTapGestureEvent.GESTURE_PRESS_AND_TAP タッチしたままさらに２本目の指でタップ
　
TransformGestureEvent クラスには、以下のプロパティがあります。
　
プロパティ名 型 解説
tapLocalX Number タップが発生したローカル x 座標
tapLocalY Number タップが発生したローカル y 座標
tapStageX Number タップが発生したステージ上の x 座標
tapStageY Number タップが発生したステージ上の y 座標
　
使用例です。
　
PressAndTapGesture クラスのイベントを使用する

import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;
import flash.text.TextField;
import flash.events.PressAndTapGestureEvent;

// テキストフィールドを作成
var text_field:TextField = new TextField();
text_field.x = 10;
text_field.y = 10;
text_field.width = stage.stageWidth - 20;
text_field.height = stage.stageHeight - 20;
text_field.border = true;
text_field.selectable = false;
stage.addChild(text_field);

// GestureEvent をサポートしている
if(Multitouch.supportsGestureEvents){

	// インプットモードをジェスチャーに設定
	Multitouch.inputMode = MultitouchInputMode.GESTURE;


	stage.addEventListener(PressAndTapGestureEvent.GESTURE_PRESS_AND_TAP,function (e:PressAndTapGestureEvent):void{
		text_field.text = "タッチしたままさらに２本目の指でタップ x:" + e.tapStageX + " y:" + e.tapStageY + "\n" + text_field.text;
	});
}
　
　
上に戻る

　
前のページに戻る