サンプルダウンロード
PDRファイル・CSFファイル在中
「drag.zip」 6.20 KB (6,353 バイト)
ドラッグ＆ドロップ５種 作成方法解説
サンプル作成には，一応 ParaDraw Ver.0.3a4，Suzuka Ver. 0.8.0.0[RichEdit版] を使用していますが，このページは作成の説明ページというより 「ActionScript素材配布ページ」 と言った方が良いかもしれません。
Suzuka の場合は，ドラッグしたいスプライトに，このページのスクリプトをコピペしてもらえれば使えますし，
Adobe Flash でも MX 以上であれば，このページのスクリプトをムービークリップにコピペするだけで使用できます。
(ただしドロップシャドウはスクリプトと無関係ですし，ドロップシャドウをかける場合は Adobe の場合 Flash 8 以上が必要です。)
両ソフトで通じるように，スクリプト中のコメント行でスプライト（ムービークリップ）には MC という略称を使用しています。
また，日頃は onClipEvent (mouseDown) などは使いませんが，コピペ使用ではこちらの方が使い勝手が良いため，今回の場合，Mouseクラスのイベントリスナーは使用していません。
◎ それぞれの駒の動きの説明
『銀』 は普通の MovieClip.startDrag() を使用しています。
引数は無しにしてあるので，普通にドラッグ＆ドロップできます。
『金』 は普通の MovieClip.startDrag() を使用していますが，
マウスの座標にMCの基準点が固定させて，かつ動く範囲も限定するように引数を入れています。
『角』 は一見普通の MovieClip.startDrag() を使用しているように見えるかもしれませんが，スクリプトは全く違います。
この角は，他の物と一緒にドラッグ＆ドロップできます。この駒自体は上にあっても下にあってもドラッグ＆ドロップできます。
つまり複数の物を同時にドラッグ＆ドロップしたいときに使えるようにしたサンプルです。
『飛』 は，常に頭の方をマウスの方に向けて引っ張られるように回転しながら動くようにしたサンプルです。
『王』は，マウスダウン（プレス）したポイントを作用点として，基準点を基準にして引っ張られるように回転しながら動くようにしたサンプルです。
日常生活では最も頻繁に見ることができる動きをすると思います。
◎ それぞれの駒のスクリプト
スクリプトの前に大切な条件ですが，このサンプルの各駒のMC(スプライト・ムービークリップ)の基準点は，全てそのスプライトの中心（中央）に設定してあります。
基準点が Suzuka デフォルトの左上ではうまく動作しないものもありますから，基準点の位置に注意してください。
『銀』
on (press) {
// このMCをドラッグ開始
this.startDrag();
}
on (release, releaseOutside) {
// ドラッグ終了
this.stopDrag();
}
|
『金』
on (press) {
// このMCをドラッグ開始
// (中央にロック, 左, 上, 右, 下)
this.startDrag(true, 230, 55, 420, 165);
}
on (release, releaseOutside) {
// ドラッグ終了
this.stopDrag();
}
|
『角』
onClipEvent (mouseDown) {
// もしこのMCがマウスとヒットしていれば
if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
// このMC上のマウス座標を取得
tx0 = this._xmouse;
ty0 = this._ymouse;
// マウスが動いたときに実行する関数の定義
this.onMouseMove = function() {
// マウスと同じ位置に移動
this._x = _root._xmouse-tx0;
this._y = _root._ymouse-ty0;
// 即更新
updateAfterEvent();
};
}
}
onClipEvent (mouseUp) {
// この onMouseMove を削除
delete this.onMouseMove;
}
|
『飛』
on (press) {
// このMC上のマウス座標を取得
tx0 = this._xmouse;
ty0 = this._ymouse;
// このMCの基準点とマウスとの距離を算出
td0 = Math.sqrt(tx0*tx0+ty0*ty0);
// マウスによる回転の差分を算出
tr0 = (Math.PI/2+Math.atan2(ry0, rx0))*180/Math.PI-this._rotation;
// onEnterFrame を定義
this.onEnterFrame = function() {
// 現在のMCの基準点からのマウス座標を取得
rx1 = _root._xmouse-this._x;
ry1 = _root._ymouse-this._y;
// このMCの回転を計算
this._rotation = (Math.PI/2+Math.atan2(ry1, rx1))*180/Math.PI;
// このMCの移動を計算
this._x = _root._xmouse-(Math.cos(Math.atan2(ry1, rx1))*td0);
this._y = _root._ymouse-(Math.sin(Math.atan2(ry1, rx1))*td0);
};
}
on (release, releaseOutside) {
// この onEnterFrame を削除
delete this.onEnterFrame;
}
|
『王』
on (press) {
// このMCの基準点からのマウス座標を取得
rx0 = _root._xmouse-this._x;
ry0 = _root._ymouse-this._y;
// このMCの基準点とマウスとの距離を算出
td0 = Math.sqrt(rx0*rx0+ry0*ry0);
// マウスによる回転の差分を算出
tr0 = (Math.PI/2+Math.atan2(ry0, rx0))*180/Math.PI-this._rotation;
// onEnterFrame を定義
this.onEnterFrame = function() {
// 現在のMCの基準点からのマウス座標を取得
rx1 = _root._xmouse-this._x;
ry1 = _root._ymouse-this._y;
// このMCの回転を計算
this._rotation = (Math.PI/2+Math.atan2(ry1, rx1))*180/Math.PI-tr0;
// このMCの移動を計算
this._x = _root._xmouse-(Math.cos(Math.atan2(ry1, rx1))*td0);
this._y = _root._ymouse-(Math.sin(Math.atan2(ry1, rx1))*td0);
};
}
on (release, releaseOutside) {
// この onEnterFrame を削除
delete this.onEnterFrame;
}
|
『飛』と『王』には，Math.sin や Math.cos や Math.atan2 などの三角関数を用いています。
この辺が参考になるかもしれません↓。
［228615］角度と座標の計算 − Flash の三角関数を使う
また，Math.sin と Math.cos についてはこちら↓でも説明しました。
簡易3D回転メニュー
Math.atan2(y座標, x座標) は，基準となる点から y/x 座標の角度をラジアン(radian)単位で計算した値(-π〜π)を返します。
簡単に言うと，斜辺の頂点の座標から斜辺の角度を求めるときに使えるメソッドです。
図にすると次のような感じです。
これは次のような感じのスクリプトで調べることもできます。
my_x = 50;
my_y = 50;
trace(Math.atan2(my_y, my_x)*180/Math.PI);
サンプルの 『王』 は，机上のカードなどを軽く指で押さえて引っ張るときのように，ごく普通に見ることができる物理的に自然な動きだと思います。
しかし，一般的な普通の動きをさせるために，上のようにややこしい三角関数の計算などが必要です。
日常で机上のカードを指で引っ張るときは，誰がそんな計算をしているのでしょうかね？
机？ カード？ 指？ 地球？
誰が計算しているのかわかりませんが，おそらく自然界の何かでしょうね。
自然はすごい！ 超 ウルトラ スペシャル デラックス ハイパワー スーパー コンピュータ内蔵かも...。
って，どんなコンピュータかは知りませんが，こういう数式を考えていると，いつもそんな不思議な気がします。
|
