WebプログラミングⅠ

2007/11/13 久米

3.ActionScriptの応用ムービークリップの基本操作

MovieClipを自在に動かすために
_x _y _xmouse _ymouse　４つのプロパティの使い方を理解してください。

ムービークリップを移動させるには座標の理解が重要。(左上が原点（0, 0))

座標プロパティ	意味	オブジェクトが_rootの場合	オブジェクトがあるインスタンスの場合
_x _y	オブジェクト基準点の座標	（_root._x _root._yは0）	インスタンス._x インスタンス._yはインスタンスの基準点の座標
_xmouse _ymouse	オブジェクト基準点からのマウス座標	_root._xmouse _root._ymouse は原点からのマウス座標	インスタンス._xmouse インスタンス._ymouse はインタンス基準点からのマウス座標

例題　試してみよう。

//ルートのフレームアクション
this.onMouseMove=function(){
	tatebo_mc._x=_root._xmouse;
	yokobo_mc._y=_root._ymouse;
	x_txt.text=_xmouse;
	y_txt.text=_ymouse;
}

例題２　上記例題１でインスタンスを一つ作り、そこからの座標を表示せよ。

カスタムポインタを使うとユーザインターフェース使い勝手が向上します。なんの操作か一目でわかります。

	手順	備考
1	カスタムポインタのシンボルのタイムラインフレームにオリジナルポインタを複数描画し、ラベル名を付けておく。	3.1タイムライン制御（gotoAndStop）でポインタ画像入れ替える
2	以降2と3はルートのフレームアクションに記述なんらかのイベントにより、例onPressなど１）通常マウスポインタを隠し、２）オリジナルポインタ画像を表示させる。	Mouse.hide()とMouse.show() インスタンス.gotoAndStop("ラベル名")
3	マウスが動くイベントで（this.onMouseMove）マウスに上記MovieClipインスタンスを追随させる。	インスタンス._x=_root._xmouse; インスタンス._y=_root._ymouse;

※3で　updateAfterEvent()　イベント処理実行された直後に再描画
フレームレートが遅い場合など、レートに無関係に描画される。

※3はインスタンス.startDrag(true);（終了時はインスタンス.stopDrag();）　でも同様の効果

//近づくシンボルのフレームアクションに記述
speed=0.5;//マウスに近づく速さ0.5～0.05くらいが妥当
this.onEnterFrame=function(){
this._x+=this._xmouse*speed;
this._y+=this._ymouse*speed;
}

	手順	説明
1	//動かしたいシンボルのフレームアクションに定義 //スムーススライド関数 //引数　t:移動先、r:力学定数 function slideSmooth(t, r){ this._x+=(t-this._x)/r; }	関数を定義。力学的式なのでこんなものと思っておけばよい。
2	以降2と3と4は述ルートのフレームアクション mokuhyo=0;	フレームアクションで移動先を初期化。
3	this.onEnterFrame=function(){ 動かしたいインスタンス名.slideSmooth(mokuhyo, 4); }	onEnterFrameイベントで動かしたいインスタンスのスムーススライド関数を呼び出す。
4	左ボタン.onRelease=function(){ mokuhyo=0; } 右ボタン.onRelease=function(){ mokuhyo=Stage.width; }	ボタンクリックなどで変数を変更。

	手順	説明
1	1～4までスプリングさせたいシンボルのフレームアクションに記述 //スプリング効果関数 function springEffect(){ var d=0.8;//力学定数 var k=0.3;//力学定数 nx=nxd+(scale-_xscale)k; ny=nyd+(scale-_yscale)k; _xscale+=nx; _yscale+=ny; updateAfterEvent(); }	関数を定義。力学的式なのでこんなものと思っておけばよい。
2	scale=100;//収斂させるスケール％ nx=0;//インスタンス変数 ny=0;//インスタンス変数	各パラメータを初期化。
3	this.onEnterFrame=function(){ springEffect(); }	onEnterFrameイベントでスプリング効果関数を呼び出す。
4	this.onRollOver=function(){ scale=300; _alpha=100; } this.onRollOut=function(){ scale=100; _alpha=40; }	マウスオーバーなどで変数を変更。