Flash着せ替え用アクションスクリプト

質問

はじめまして。
FlashCS3で、キャラクター(体)にドラックドロップで服を着せられるような"着せ替え"を制作したいと考えています。
現在はキャラクターの体部分にあたるムービークリプ(インスタンス名"target")と服ににあたるムービークリップ(インスタンス名"clothes0")をシーン上に配置し、
"clothes0"内に

this.onPress = function () {
this.swapDepths(++_root.depth);
this.startDrag();
}
//
this.onRelease = function () {
this.stopDrag();
}
//
this.onMouseMove = function () {
updateAfterEvent ();
}

というスクリプトを書いて、一応ドラックドロップで服だけ動くような感じです。
服の"clothes0"を体である"target"に吸着させる方法をご存じの方がいましたら教えてください！
いろいろ検索などして調べたのですがどうもうまくいきません。
参考になりそうなwebサイトなどもありましたら教えていただけると助かります！

ちなみにまだアクションスクリプトを触りだしたばかりの詳しくない者です；

回答No.1

BlurFiltan · ベストアンサー

『吸着』
とはどういうものであるかというと，
『物が目標ポイントにある程度近い場所にあったとき，その物の座標を目標ポイントの座標と一致させる。』
ということです。

ActionScript や Flash のバージョンや，
使う場合によってスクリプトの形は当然変わりますが，
だいたいどの場合も上で書いた『吸着』の意味は変わりませんし，
上で書いた『吸着』の意味になるようにコーディング（スクリプト記述）をします。

この場合，
上で書いた 物 とは，インスタンス名clothes0 のムービークリップです。
上で書いた 目標ポイント とは，インスタンス名target のムービークリップの座標です。
上で書いた ある程度近い場所にあったとき とは this.onRelease したときです。
上で書いた ある程度 は適当に指定してやれば良いです。

したがってスクリプトは次のようになります。

-------------------------------------------
// ある程度の範囲の設定（単位px）
range = 10;
//
this.onPress = function() {
this.swapDepths(++_root.depth);
this.startDrag();
};
//
this.onRelease = function() {
this.stopDrag();
// この MC の座標が target座標 の ±range 以内にあるとき
if (this._x<=this._parent.target._x+range
&& this._x>=this._parent.target._x-range
&& this._y<=this._parent.target._y+range
&& this._y>=this._parent.target._y-range) {
// この MC の座標を target の座標に合わせる
this._x = this._parent.target._x;
this._y = this._parent.target._y;
}
};
//

-------------------------------------------

変数 range は，変数 depth 同様，
_root に設定して， _root.range のように参照してもかまいません。

また，
どの clothes○ もほとんど同じスクリプトになりますから，
_root のフレームに for文 を使って書いても良いと思いますし，
#include で共通の外部ASをインクルードしても良いと思いますし，
ムービークリップを継承するクラスファイルを作成して，
そのクラスを clothes○ のシンボルに適応させても良いと思います。
その辺は色々です。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

しかし，
スクリプト以前にわかっておなかければならないのは "基準点" です。
ムービークリップ（ボタンも）の座標とは，
ムービークリップの基準点の座標を指します。
ムービークリップの基準点は十字マーク ┼ でステージ上に表示されます。

この基準点は絵などをムービークリップなどに変換するときに
「シンボルに変換パネル」で，

　基準点(R): □□□
　　　　　　　　□■□
　　　　　　　　□□□

のような部分があってそこで，
左上，中上，右上，左中，中中，右中，左下，中下，右下
の９ポイントから選べます。
上の場合 ■ のある 中中（中央） に基準点が来ます。

それ以外の場所などにしたい場合は，
ムービークリップの中の絵を動かさなければなりません。

上のようなスクリプトでうまく行くのは，
基準点と絵の本体との相対的位置関係が，
target と clothes0 とで一致しているという条件が必要です。

--- ↓targetの例↓ --------

　　基準点
　□↓□□□□□□□□□
　□┼□□■■■□□□□
　□□□□■■■□□□□
　□□□□□■□□□□□
　□■■■■■■■■■□
　□□□□□■□□□□□
　□□□□□■□□□□□
　□□□□■□■□□□□
　□□□■□□□■□□□
　□□■■□□□■■□□
　□□□□□□□□□□□

--- ↓clothes0の例↓ --------

　　基準点
　□↓□□□□□□□□□
　□┼□□□□□□□□□
　□□□□□□□□□□□
　□□□□□□□□□□□
　□□■■■□■■■□□
　□□■■■■■■■□□
　□□□□■■■□□□□
　□□□■■■■■□□□
　□□■■■■■■■□□
　□□□□□□□□□□□
　□□□□□□□□□□□

このように作成しておいた場合，
上のスクリプトで，targetの基準点にclothes0の基準点が吸着するように動きます。

このように作成しない場合は，
スクリプトでうまく行くように計算したり検証しながら補正する必要が出てきます。
これはかなり面倒ですから，
やはり基準点と絵の本体との相対的位置関係を合わせてムービークリップを作成する方が良いです。

またこの場合に限らす，
日頃から基準点を意識したインスタンス作成をすることが大切です。

作成の最初から基準点を意識していると難無く普通に作成できますし，
場合によっては基準点を意識すると描画方法（描画手順）なども変わって来ると思います。
※私が描いた上の □■■□ のテキスト絵でも
　 target を先に描いてそれを下にコピペし
　 clothes0の服の部分を■で付け足して描いて
　 本体部分を消した（■を□にした）のです。
　 そうすると基準点┼の相対的位置関係は変えることなく
　 簡単に描けます。
　 いつもそうとは限りませんが，
　 Flash でも同様の方法で描くのが良い場合もあります。

お礼

とても詳しい回答ありがとうございました！
「吸着」と「座標」の関係性がいまいち理解できておらず、
スクリプトにいちいち座標を書き込む方法も試したりしていたのですが、この度の図の入った回答がとても勉強になりました。
基準点も今まで制作する際にあまり意識して描いたことはなかったのですが、これからスクリプトを少しづつ学ぶものとしてしっかり注意して見ていきたいと思います。
着せ替えのフラッシュですが教えていただいた方法を参考に制作してみたところ、しっかりtargetに吸着させることができました！
本当にありがとうございました！