HAKUHIN's home page
更新履歴
 
 

 

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

サンプルをダウンロード
 


■マウスカーソルの座標を調べる
 
マウスカーソルの座標を調べるには、ムービークリップのプロパティ _xmouse_ymouse を使用します。
 
_root のプロパティを取得すれば、Flash 画面上の座標を取得できます。
 
例) マウスカーソルの座標を取得する

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

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

onEnterFrame = function(){
	_root.x = _root._xmouse;
	_root.y = _root._ymouse;
}
 
任意のムービークリップから取得すると、そのムービークリップのローカル座標系を基とした座標が取得できます。
 
例) 任意のムービークリップの座標系を基としたマウスカーソルの座標を取得する

onClipEvent (load) {
	_x = 0;
	_y = 0;
	_xscale = 50;
	_yscale = 50;
}
onClipEvent (enterFrame) {
	trace("x:" + this._xmouse + " y:" + this._ymouse);
}

例) ムービークリップ mc の座標系を基としたマウスカーソルの座標を取得する(Flash 6 以降)

mc._x = 0;
mc._y = 0;
mc._xscale = 50;
mc._yscale = 50;

mc.onEnterFrame = function() {
	trace("x:" + this._xmouse + " y:" + this._ymouse);
}
 
 




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

サンプルをダウンロード
 


■マウスカーソルを作成する
 
マウスカーソルとして、好きなイラストを使用する事ができます。
 
1.マウスカーソル用ムービークリップにスクリプトを追加する
 
マウスカーソル用の素材を使ってムービークリップを作成します。
 
 
マウスカーソル用のムービークリップオブジェクトに以下のスクリプトを記述します。
 
マウスを動かすたびにマウスカーソルの位置にムービークリップオブジェクトが追従するようになります。
 
例) ムービークリップの座標をマウスカーソルの座標に変更

onClipEvent (mouseMove) {
	_x = _root._xmouse;
	_y = _root._ymouse;
}
 
例) ムービークリップ mc の座標をマウスカーソルの座標に変更(Flash 6 以降

mc.onMouseMove = function(){
	this._x = _root._xmouse;
	this._y = _root._ymouse;
}
 
2. OS のマウスカーソルを非表示
 
次に、OS のマウスカーソルを非表示にします。
 
Mouse.hide() を呼び出すと、Flashプレイヤー上のマウスカーソルが非表示になります。 一度でも実行すれば効果は持続します。
 
例) マウスカーソルを非表示

Mouse.hide();	// マウスカーソルを非表示に
 
元に戻すには、Mouse.hide() を呼び出します。
 
例) マウスカーソルを可視表示

Mouse.show();	// マウスカーソルを可視表示に
 
3.マウスカーソルをスムーズに
 
最後にフレームレートが低いときでも、マウスカーソルがスムーズに動くようにします。
 
マウスカーソル移動中に 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();
}
 




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

サンプルをダウンロード
 


■マウスカーソルを作成する
 
OS のマウスカーソルの座標にゆっくり近づくマウスカーソルを作成します。
 
1.マウスカーソル用ムービークリップにスクリプトを追加する
 
マウスカーソル用の素材を使ってムービークリップを作成します。
 
 
マウスカーソル用のムービークリップオブジェクトに以下のスクリプトを記述します。
 
例) ムービークリップをマウスカーソルに近づける

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

}
 
例) ムービークリップ mc をマウスカーソルに近づける(Flash 6 以降)

var d = 0.15;
mc.onEnterFrame = function(){
	this._x += (_root._xmouse - this._x) * d;
	this._y += (_root._ymouse - this._y) * d;

}
 
変数 d の値を変更すると近づく速さを調整できます。 0.0 に近いほどゆっくり移動し、1.0 に近いほどすばやく移動します。
 
アルゴリズムについては、減速(摩擦)しながら移動させたいにまとめています。
 
2. OS のマウスカーソルを非表示
 
次に、OS のマウスカーソルを非表示にします。
 
Mouse.hide() を呼び出すと、Flashプレイヤー上のマウスカーソルが非表示になります。 一度でも実行すれば効果は持続します。
 
例) マウスカーソルを非表示

Mouse.hide();	// マウスカーソルを非表示に
 
元に戻すには、Mouse.hide() を呼び出します。
 
例) マウスカーソルを可視表示

Mouse.show();	// マウスカーソルを可視表示に
 
3.マウスカーソルをスムーズに
 
最後にフレームレートが低いときでも、マウスカーソルがスムーズに動くようにします。
 
マウスカーソル移動中に 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();
}
 




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

サンプルをダウンロード
 


■動かした方向を向くマウスカーソルを作成する
 
マウスカーソルを移動した方向に向き続けるマウスカーソルを作成します。
 
1.マウスカーソル用ムービークリップにスクリプトを追加する
 
マウスカーソル用の素材を使ってムービークリップを作成します。
 
マウスカーソルは右向きにします。
 
 
マウスカーソル用のムービークリップオブジェクトに以下のスクリプトを記述します。
 
1フレーム前のマウスカーソルの座標と現在の座標とで角度を計算して、マウスカーソルの角度に反映します。
 
2つの座標から角度を求める
 
マウス座標を取得する

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;
	
	// 1フレーム前の座標と現在の座標との角度を計算
	_rotation = Math.atan2(_root._ymouse - fy,_root._xmouse - fx) * 180 / Math.PI;

	// 1フレーム前のマウスの位置を保存
	fx = _x;
	fy = _y;
	
	// ドラッグをなめらかに
	updateAfterEvent();
}
 
マウスの座標は、整数値で取得できます。
 
マウスをゆっくり動かした場合、1ドットずつ動くため、 計算精度が低く角度が 0、45、90、135、180、225、270、315 度のどれかになりがちです。
 
このままではカクカクした動きになってしまうので、ゆっくりと角度を変更するように修正します。
 
2つの角度の差を計算する
 
マウス座標を取得する

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;
	
	// 1フレーム前の座標と現在の座標との角度を計算
	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();
}
 
 
2. OS のマウスカーソルを非表示
 
次に、OS のマウスカーソルを非表示にします。
 
Mouse.hide() を呼び出すと、Flashプレイヤー上のマウスカーソルが非表示になります。 一度でも実行すれば効果は持続します。
 
例) マウスカーソルを非表示

Mouse.hide();	// マウスカーソルを非表示に
 
元に戻すには、Mouse.hide() を呼び出します。
 
例) マウスカーソルを可視表示

Mouse.show();	// マウスカーソルを可視表示に
 
3.マウスカーソルをスムーズに
 
最後にフレームレートが低いときでも、マウスカーソルがスムーズに動くようにします。
 
マウスカーソル移動中に 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 5 でドラッグを実現する場合、少々手間が掛かります。
 


 
 


■Flash 5 でドラッグを実現する
 
Flash 5 でムービークリップをドラッグできるようにします。
 
1. イラストを用意
 
まず、ドラッグさせたい画像を使用して、ボタンを作成します。
 
 
このボタンを使用して、さらにムービークリップを作成します。
 
ムービークリップの中にボタンを格納
 
2. ドラッグ開始
 
startDrag() メソッドを使用するとインスタンスをドラッグする事ができます。
 
インスタンスの座標が、マウスカーソルの座標に追従して同時に移動するようになります。
 
ムービークリップ.startDrag ( 中央吸着するか? , x 座標最小値 , y 座標最小値 , x 座標最大値 , y 座標最大値 );
第01引数 ドラッグ時に中央に吸着するかしないか
第02引数(略可)ドラッグの範囲制限 x 座標の最小値
第03引数(略可)ドラッグの範囲制限 y 座標の最小値
第04引数(略可)ドラッグの範囲制限 x 座標の最大値
第05引数(略可)ドラッグの範囲制限 y 座標の最大値
戻り値 なし
 
第02~05 引数を指定するとドラッグで移動可能な範囲を制限できます。
 
ムービークリップの中に入り、ボタンに以下のアクションスクリプトを記述します。
 
ボタンをクリックしたときに上の階層のムービークリップのドラッグを開始する

on (press) {

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

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

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

on (release) {
	stopDrag ();		// ドラッグを解除する
}
 
on (release) イベントは、高速でマウスカーソルを移動しながらマウスを離した時に判定に失敗する事があります。
 
より確実にドラッグを終了させるために onClipEvent (mouseUp) イベント中にドラッグ終了処理を記述するといいでしょう。
 
以下のスクリプトを、ムービークリップの方に記述します。
 
マウスが離されたときにドラッグを解除する

onClipEvent (mouseUp){

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

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

onClipEvent (mouseMove) {
	updateAfterEvent();
}
 
 


■Flash 6 以降でドラッグを実現する
 
Flash 6 以降でムービークリップをドラッグできるようにします。
 
ムービークリップに記述する場合(静的)
 
Flash 6 以降、ムービークリップインスタンスにボタンインスタンスのイベントを書く事ができます。
 
Flash 5 でドラッグを実現するで解説しているスクリプトをムービークリップにまとめて記述します。
 
ムービークリップをドラッグする

// クリック時に呼び出される
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 でドロップを実現する
 
Flash 5 でムービークリップをドロップできるようにします。
 
1.ドロップの当たり判定用のイラストを用意する
 
まず、ドロップの判定用のシェイプを作成します。このシェイプの形状がそのまま当たり判定になります。
 
このシェイプを使用してムービークリップを作成します。
 
 
次に、ムービークリップにインスタンス名を付けます。ここでは、"drop_00" と名前を付けます。
 
Flash5 の場合
 
FlashMX2004 の場合
 
2.ドロップされたか調べる
 
ドラッグ中のマウスカーソルの真下にあるインスタンスを取得するには、ムービークリップの _droptarget プロパティを使用します。
 
このプロパティにインスタンスのターゲットパスが、
 
/インスタンス名 / インスタンス名 / …」という文字列で格納されます。
 
ドットシンタックス 「_root.インスタンス名.インスタンス名.…」では無いことに注意します。
 
デバッガで確認する
 
ドラッグしたいムービークリップに以下のアクションスクリプトを記述します。
 
ドロップ時にマウスカーソルの真下に "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 ();	// ドラッグ終了
}
 
 


■Flash 6 以降でドラッグを実現する
 
Flash 6 以降でムービークリップをドロップできるようにします。
 
ムービークリップに記述する場合(静的)
 
Flash 6 以降、ムービークリップインスタンスにボタンインスタンスのイベントを書く事ができます。
 
Flash 5 でドロップを実現するで解説しているスクリプトをドラッグしたいムービークリップにまとめて記述します。
 
ムービークリップ "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 のみ取得できるようです。
 
マウスホイールの回転を取得するにはマウスイベントリスナーを使用します。
 
1.オブジェクトを作成
 
オブジェクトを作成します。
 
ここでは、mouse_obj という変数に格納します。
 
オブジェクト作成

var mouse_obj = new Object ();
 
2.オブジェクトに関数を登録
 
オブジェクトにコールバック関数を登録します。
 
関数を用意して以下のプロパティに登録します。
 
プロパティ名 解説
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 プロパティに登録した関数の引数から2つのパラメータを取得できます。
 
第01引数からは、ホイールの回転速度が取得できます。 上方向に回すと正の値、下方向に回すと負の値となります。ホイールの回転が速いと値が大きくなります。
 
第02引数からは、マウスポインタの真下にあるインスタンスのオブジェクトが取得できます。
 
onMouseWheel イベントにコールバック関数を登録する

var mouse_obj = new Object ();

mouse_obj.onMouseWheel = function(delta , scrollTarget){
	trace("ホイールの回転" + delta);
	trace("ターゲットパス" + scrollTarget);
}
 
3.イベントリスナーに登録する
 
Mouse.addListener() を使用すると、オブジェクトがイベントを受け取ることができます。
 
これで、マウスホイールを回転するたびに、コールバック関数が実行されるようになります。
 
通知を受け取るオブジェクトを登録

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

Mouse.addListener( mouse_obj );
 
4.登録したオブジェクトを解除
 
通知を止めたいときは、Mouse.removeListener () メソッドを使用します。
 
オブジェクトがイベントを受け取るのを解除します。
 
通知を受け取るオブジェクトを解除

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

Mouse.removeListener( mouse_obj );
 




HAKUHIN's home page バナー http://hakuhin.jp/
(c) Hakuhin & 日新礼符 2002-2011 解像度1024×768以上 IE8.0以上推奨
/ 閲覧中: