[PR]ﾃﾚﾋﾞ番組表
今夜の番組ﾁｪｯｸ




マウスカーソルの座標を取得したい



サンプルをダウンロード




■マウスカーソルの座標を調べる


マウスカーソルを座標を取得するには、_xmouse( x 座標 ) と_ymouse( y 座標 ) の値を調べます。


例) マウスカーソルの座標を取得する

onClipEvent (enterFrame) {
	_root.x = _root._xmouse;
	_root.y = _root._ymouse;
}

例) マウスカーソルの座標を取得する(Flash 6 以降)

onEnterFrame = function(){
	_root.x = _root._xmouse;
	_root.y = _root._ymouse;
}


ムービークリップにあるマウス座標を調べると、そのムービークリップ上のローカル座標系に変換されて取得できます。








マウスカーソルを作りたい



サンプルをダウンロード




■マウスカーソルの座標を調べる


マウスカーソルに、好きなイラストを使用する事ができます。




１．マウスカーソルを作る

まず、マウスカーソルに使いたい画像を用意して、ムービークリップにしておきます。





Flash上に配置してムービークリップインスタンスに以下のスクリプトを記述すると、マウスの位置にムービークリップインスタンスが付いてくるようになります。


例) ムービークリップの座標を常にマウスカーソルの位置に移動

onClipEvent (mouseMove) {
	_x = _root._xmouse;
	_y = _root._ymouse;
}

例) ムービークリップ "mc" の座標を常にマウスカーソルの位置に移動(Flash 6 以降

mc.onMouseMove = function(){
	this._x = _root._xmouse;
	this._y = _root._ymouse;
}




２． OS のマウスカーソルを非表示


次に、OSのマウスカーソルを非表示にします。Mouse.hide() を呼び出すと、Flashプレイヤー上のマウスカーソルが非表示になります。

一度どこかで呼び出すと効果が持続します。


例) マウスカーソルを非表示

Mouse.hide();	// マウスカーソルを非表示に




元に戻すには、Mouse.hide() を呼び出します。


例) マウスカーソルを可視表示

Mouse.show();	// マウスカーソルを可視表示に




３．マウスカーソルをスムーズに


最後にフレームレートが低いときでも、マウスカーソルがスムーズに動くようにします。 マウスカーソル移動のイベント中に updateAfterEvent() 関数を呼び出すと、マウスカーソルを動かしている間は マウスカーソルがフレームレートに関係なく常に描画される様になります。


例) マウスカーソルを移動するたびに再描画する

onClipEvent (load) {

	Mouse.hide();

}
onClipEvent (mouseMove) {

	_x = _root._xmouse;
	_y = _root._ymouse;

	// マウスが動くたびに描画する
	updateAfterEvent();
}




Flash 6 以降のイベントを使ったときの記述例です。


例) マウスカーソルを移動するたびに再描画する


Mouse.hide();

mc.onMouseMove = function(){

	this._x = _root._xmouse;
	this._y = _root._ymouse;

	// マウスが動くたびに描画する
	updateAfterEvent();
}








ゆっくり近づくマウスカーソルを作りたい



サンプルをダウンロード




■マウスカーソルを作る


まず、マウスカーソルに使いたい画像を用意して、ムービークリップにしておきます。






■マウスカーソルをゆっくりとマウスポインタに近づける


Flash 上に配置してムービークリップに以下のスクリプトを記述すると、マウスの位置にムービークリップインスタンスが付いてくるようになります。変数の d の部分は、0.0 〜 1.0 の値を入れる事によって速さを調整する事ができます。


例) ムービークリップをマウスカーソルに近づける

onClipEvent (enterFrame) {
	var d = 0.15;
	_x += (_root._xmouse - _x) * d;
	_y += (_root._ymouse - _y) * d;

}


何をしているのかというと、ゴールへ移動したいときに、

１フレームでゴールまで半分近づく、
次のフレームでゴールまでもう半分近づく、
さらに次のフレームでゴールまでもう半分近づく…
さらにさらに次のフレームでゴールまでもう半分近づく……

という事で限りなくゴールへ近づいていく原理を利用しています。







動かした方向を向くマウスカーソルを作りたい



サンプルをダウンロード




１フレーム前のマウスカーソルの位置を保存しておき、移動したマウスカーソルの位置とで向きを計算して進行方向にマウスカーソルが向くようにします。


マウスカーソルで使用するイラストを、右向きにします。






ムービークリップインスタンスに以下のスクリプトを追加します。


マウス座標を取得する

onClipEvent (load) {
	// 1フレーム前の座標を退避しておく変数
	fx = 0;
	fy = 0;

	// マウスカーソルを非表示
	Mouse.hide();
}
onClipEvent (mouseMove) {
	// 座標が前回と一致する場合は何もしない
	if((fx == _root._xmouse) && (fy == _root._ymouse)) {
		return;
	}

	// ムービークリップの座標をマウス座標に
	_x = _root._xmouse;
	_y = _root._ymouse;
	
	// １フレーム前の座標と現在の座標との角度を計算
	_rotation = Math.atan2(_root._ymouse - fy,_root._xmouse - fx) * 180 / Math.PI;

	// 1フレーム前のマウスの位置を保存
	fx = _x;
	fy = _y;
	
	// ドラッグをなめらかに
	updateAfterEvent();
}




マウスの座標は整数値で取得されるので、ゆっくりマウスカーソルを動かすとどうしても角度の算出が荒くなります。そこで以下のスクリプトのように、ターゲットの角度までゆっくり移動するようにします。


マウス座標を取得する

onClipEvent (load) {
	// 1フレーム前の座標を退避しておく変数
	fx = 0;
	fy = 0;
	
	// ターゲット角度
	rot = 0;

	// マウスカーソルを非表示
	Mouse.hide();
}
onClipEvent (mouseMove) {
	// 座標が前回と一致する場合は何もしない
	if((fx == _root._xmouse) && (fy == _root._ymouse)) {
		return;
	}

	// ムービークリップの座標をマウス座標に
	_x = _root._xmouse;
	_y = _root._ymouse;
	
	// １フレーム前の座標と現在の座標との角度を計算
	rot = Math.atan2(_root._ymouse - fy,_root._xmouse - fx) * 180 / Math.PI;

	// ターゲットとの角度差
	var sub = rot - _rotation;
	sub -= Math.floor(sub / 360);
	if(sub > 180)	sub -= 360;
	if(sub <-180)	sub += 360;	

	// ターゲット角度まで減速(0.35) 回転移動量 (30) で補間
	sub *= 0.35;
	if(sub > 30)	sub = 30;
	if(sub <-30)	sub =-30;
	_rotation += sub;

	// 1フレーム前のマウスの位置を保存
	fx = _x;
	fy = _y;
	
	// ドラッグをなめらかに
	updateAfterEvent();
}




角度の計算には、三角関数を使用しています。こちらで解説しています。






インスタンスをドラッグしたい



サンプルをダウンロード




ムービークリップを、ドラッグする事ができます。
Flash 5 でドラッグを実現する場合、少々手間が掛かるため解説を２つに分けました。



■Flash 5 でドラッグを実現する
■Flash 6 以降でドラッグを実現する






■Flash 5 でドラッグを実現する






１． イラストを用意


まず、ドラッグさせたい画像を用意して、ボタンにします。






このボタンを、さらにムービークリップにします。








２． ドラッグ開始


ムービークリップインスタンスの中に入り、ボタンインスタンスに以下のアクションスクリプトを記述すると、ムービークリップインスタンスをクリックしたときに、マウスカーソルの位置にムービークリップが付いてくるようになります。


ボタンをクリックしたときにthis （ボタンが配置されてるインスタンス）のドラッグを開始する

on (press) {

	this.startDrag (true);	// ドラッグを開始する

}




startDrag() メソッドを使用するとインスタンスがマウスカーソルに追従して同時に移動するようになります。


ムービークリップ.startDrag ( 中央吸着するか？ , x 座標最小値 , y 座標最小値 , x 座標最大値 , y 座標最大値 );
第01引数 ドラッグ時に中央に吸着するかしないか
第02引数(略可)ドラッグの範囲制限 x 座標の最小値
第03引数(略可)ドラッグの範囲制限 y 座標の最小値
第04引数(略可)ドラッグの範囲制限 x 座標の最大値
第05引数(略可)ドラッグの範囲制限 y 座標の最大値
返り値 なし


第03〜06 引数で矩形を指定すると移動する範囲の制限ができます。






３． ドラッグの解除

次に、マウスを離すと、ドラッグを解除するようにします。ドラッグを解除するには、stopDrag() 関数を使用します。この関数をマウスを離したときに呼び出します。


マウスが離されたときにドラッグを解除する

on (press) {
	this.startDrag (true);	// ドラッグを開始する
}

on (release) {
	stopDrag ();		// ドラッグを解除する
}




on (release) イベントは、高速でマウスカーソルを動かしてマウスを離した時に判定に失敗する事があります。

より確実にドラッグを終了させるために onClipEvent (mouseUp) イベント中にドラッグ終了処理を記述する事が考えられます。以下のスクリプトを、ムービークリップの方に記述します。


マウスが離されたときにドラッグを解除する

onClipEvent (mouseUp){

	stopDrag ();		// ドラッグを解除する

}








４． ドラッグをスムーズに


最後に updateAfterEvent() 関数をマウスカーソル移動中に呼び出して低フレームレート時にも滑らかにドラッグできるようにします。



マウスカーソルが移動するたびに再描画する

onClipEvent (mouseMove) {
	updateAfterEvent();
}







■Flash 6 以降でドラッグを実現する






ムービークリップに記述する場合（静的）


Flash 6 以降、ムービークリップインスタンスにボタンインスタンスのイベントを書く事ができるので、上で解説しているスクリプトをムービークリップにまとめて記述します。


ムービークリップをドラッグする

// クリック時に呼び出される
on (press) {
	this.startDrag (true);	// ドラッグを開始する
}

// マウスカーソルを離したときに呼び出される
onClipEvent (mouseUp) {
	stopDrag ();		// ドラッグを解除する
}

// マウスカーソルを移動中に呼び出される
onClipEvent (mouseMove) {
	updateAfterEvent();	// ドラッグをなめらかに
}






タイムラインに記述する場合（動的）


Flash 6 以降に追加されたイベントを使用するとタイムラインに記述する事ができます。大量にドラッグ可能なインスタンスを作成したいときや、イベントを動作中に変更したいときなんかに使用すると便利です。


ムービークリップ "mc" をドラッグする

// クリック時に呼び出される
mc.onPress = function(){
	this.startDrag (true);	// ドラッグを開始する

}

// マウスカーソルを離したときに呼び出される
mc.onMouseUp = function(){
	stopDrag ();		// ドラッグを解除する

}

// マウスカーソルを移動中に呼び出される
mc.onMouseMove = function(){
	updateAfterEvent();	// ドラッグをなめらかに

}






インスタンスをドロップしたい



サンプルをダウンロード




インスタンスをドラッグしたいからの続きです。

インスタンスをドラッグして離すときに、ドロップしたい場所との当たり判定があればその座標に吸着させる事でドロップを実現します。今回もFlash 5 と Flash 6 以降とで解説が分かれます。










■Flash 5 でドロップを実現する




１．ドロップの当たり判定用のイラストを用意する


まず、ドロップしたときに吸着させたい画像を用意して、インスタンスにします。


このインスタンスの形がそのまま当たり判定になります。




次に、インスタンスに名前を付けます。ここでは、"drop_00" と名前を付けます。



Flash5の場合。


FlashMX2004の場合。





２．ドロップを判定する


ドラッグしたいインスタンスに以下のアクションスクリプトを追加します。


ドロップ時にマウスカーソルの真下に "drop_00" があればその座標に吸着させる

on (press) {
	this.startDrag (true);	// ドラッグ開始（中央に吸着する）
}

on (release) {
	//ドラッグ中のインスタンスの真下にdrop_00があれば
	if (this._droptarget == "/drop_00") {
		this._x = _root.drop_00._x;
		this._y = _root.drop_00._y;
	} 

	stopDrag ();	// ドラッグ終了
}




MCインスタンスのプロパティである _droptarget の中には、ドラッグ中のマウスポインタの真下にあるインスタンスのターゲットパスが、
/インスタンス名 / インスタンス名 / …という形で入ります。

ドットシンタックス ( _root.インスタンス名.インスタンス名.… ) では無いことに注意してください。




デバッガで確認するとこんな感じに。








■Flash 6 以降でドラッグを実現する




ムービークリップに記述する場合（静的）


Flash 6 以降、ムービークリップインスタンスにボタンインスタンスのイベントを書く事ができるので、上で解説しているスクリプトをドラッグしたいムービークリップにまとめて記述します。


ムービークリップ "mc" をムービークリップ "drop_00" の上にドロップする

// クリック時に呼び出される
on (press) {
	this.startDrag (true);	// ドラッグを開始する
}

// マウスカーソルを離したときに呼び出される
onClipEvent (mouseUp) {
	//ドラッグ中のインスタンスの真下にdrop_00があれば
	if (this._droptarget == "/drop_00") {
		this._x = _root.drop_00._x;
		this._y = _root.drop_00._y;
	} 
	stopDrag ();	// ドラッグ終了
}

// マウスカーソルを移動中に呼び出される
onClipEvent (mouseMove) {
	updateAfterEvent();	// ドラッグをなめらかに
}






タイムラインに記述する場合（動的）


Flash 6 以降に追加されたイベントを使用するとタイムラインに記述する事ができます。大量にドロップ可能なインスタンスを作成したいときや、イベントを動作中に変更したいときなんかに使用すると便利です。


ムービークリップ "mc" をムービークリップ "drop_00" の上にドロップする

// クリック時に呼び出される
mc.onPress = function(){
	this.startDrag (true);	// ドラッグを開始する

}

// マウスカーソルを離したときに呼び出される
mc.onMouseUp = function(){
	//ドラッグ中のインスタンスの真下にdrop_00があれば
	if (this._droptarget == "/drop_00") {
		this._x = _root.drop_00._x;
		this._y = _root.drop_00._y;
	} 
	stopDrag ();	// ドラッグ終了
}

// マウスカーソルを移動中に呼び出される
mc.onMouseMove = function(){
	updateAfterEvent();	// ドラッグをなめらかに

}






マウスホイールの回転を取得したい（Flash 7 以降）



サンプルをダウンロード




注意.Windows バージョンの Flash Player でのみ動作するそうです。

マウスホイールの回転を取得するにはマウスイベントリスナーを使用する必要があります。




１．オブジェクトを作成


ここでは、mouse_obj という名前を付けます。


オブジェクト作成

var mouse_obj = new Object ();




２．オブジェクトに関数を登録


オブジェクトにコールバック関数を登録します。以下のプロパティ名に関数の登録が可能です。


プロパティ名 解説
onMouseDown クリック時に呼び出されます
onMouseUp マウスを離した時に呼び出されます
onMouseMove マウスカーソルを移動するたびに呼び出されます
onMouseWheel マウスホイールを回転するたびに呼び出されます



オブジェクトに関数を登録

var mouse_obj = new Object ();

mouse_obj.onMouseDown = function(){
	trace("マウスをクリック");
}

mouse_obj.onMouseUp = function(){
	trace("マウスを離した");
}

mouse_obj.onMouseMove = function(){
	trace("マウスを移動");
}

mouse_obj.onMouseWheel = function(delta){
	trace("ホイールの回転");
	trace(delta);
}


onMouseWheel プロパティに登録した関数には引数から２つのパラメータが渡されます。 第01引数、ホイールの回転速度で、上方向に回すと正の値、下方向に回すと負の値、ホイールの回転が速くなると、値が大きくなります。
第02引数、マウスポインタの真下にあるインスタンスのターゲットパスが入ります。


onMouseWheel イベントにコールバック関数を登録する

var mouse_obj = new Object ();

mouse_obj.onMouseWheel = function(delta , scrollTarget){
	trace("ホイールの回転" + delta);
	trace("ターゲットパス" + scrollTarget);
}






３．イベントリスナーに登録する


最後に addListener() を使用してオブジェクトがマウス通知を受け取ることができるようにします。 これで、マウスホイールを回転するたびに、コールバック関数が実行されるようになります。


通知を受け取るオブジェクトを登録

var mouse_obj = new Object ();
mouse_obj.onMouseWheel = function(){}

Mouse.addListener( mouse_obj );




４．登録したオブジェクトを解除


通知を止めたいときには、removeListener () を使用してオブジェクトがマウス通知を受け取るのを解除します。


通知を受け取るオブジェクトを解除

var mouse_obj = new Object ();
mouse_obj.onMouseWheel = function(){}
Mouse.addListener( mouse_obj );

Mouse.removeListener( mouse_obj );