MCクリックで任意の場所を中心に拡大したい

質問

ステージの中心にMCを配置し、MCをクリックすると、クリックした座標を中心に徐々に拡大させたいのですが、うまくいきません。
拡大をしない場合は、
MC._x -= MC._xmouse;
MC._y -= MC._ymouse;
でクリックした箇所が中心になるのですが、
拡大していくとうまく計算できず大きくずれてしまいます。

onEnterFrameでMC._xscale、MC._yscaleが100から20ずつ増加し
最終的に200になるようにしているのですが、
この場合クリックした箇所を中心に拡大するにはどのように計算すれば良いでしょうか？

回答No.1

BlurFiltan · ベストアンサー

ムービークリップを ActionScript で動かす場合，
動きの基準はムービークリップの基準点になるという法則（仕様）があります。
つまり，
ムービークリップを ActionScript で回転させる（_rotationを変える）ときは，
ムービークリップは基準点を中心に回転します。
_x 座標 _y 座標も同じく基準点です。
したがって，
ムービークリップを拡大縮小させるときも，
そのムービークリップの基準点を中心基準として拡大縮小します。

以上が普通は知っておかなければならない前置きです。

> MCをクリックすると、クリックした座標を中心に徐々に
> 拡大させたいのですが、うまくいきません。

これには定石手段が一応あるのですよ。
ここのコミュニティでもどこかに回答がありましたし，
何処かの有名サイトのページにも同様の方法提示がありました。
（両方ともURLを忘れました。）

結局，
マウスをクリックした場所にムービークリップの基準点を持っていけば，
（つまりマウスをクリックした場所にムービークリップの座標を動かせば），
マウスをクリックした座標を基準に拡大するわけです。

しかし，
その方法を使っただけだと，
ムービークリップがガクッとマウスの位置まで動いてしまいます。

ですから，
ガクッと動かないように，ムービークリップ自体はマウスの座標に移動させて，
ムービークリップの中身は反対方向に同じ距離動かすという方法を取る必要がでてきます。

そこで，
画像をムービークリップに変換した物を，
さらにムービークリップに変換して，
ムービークリップの親子入れ子状態にして，
親ムービークリップをマウスの座標に持って行くと同時に，
子ムービークリップをその反対方向に同じ距離動かす。
という方法を取ります。
するとうまく行くでしょう。

これ↑が，定石の手段です。

あとは，
これを場合に応じてスクリプト化するだけです。
拡大するだけは簡単ですが，縮小させることを前提としてスクリプトを書くのが少し難しいです。
クリック→「拡大」→クリック→「縮小」
を１セットとしたものを考えてみました。

まず，
クリックする画像をムービークリップに変換し，
インスタンス名として例えば「ko_mc」と付けます。
その「ko_mc」をさらにムービークリップに変換し，
インスタンス名として「oya_mc」と付けたとしておきます。

その「親子」が存在するフレーム（フレーム1ならフレーム1）に，
次のようなスクリプトを書きます。

-------------------------------------------
// フラグの初期値を設定
flag = true;

// oya_mc クリック時の動作を定義
_root.oya_mc.onRelease = function() {

// flag が true であれば
if (flag) {
// 親が動く反対方向に同じ距離移動
this.ko_mc._x += this._x-_root._xmouse;
this.ko_mc._y += this._y-_root._ymouse;
// 親をマウスの座標に移動
this._x = _root._xmouse;
this._y = _root._ymouse;
// １フレーム進む時間毎に随時実行
this.onEnterFrame = function() {
// 大きさが 200 になるまで拡大
if (this._xscale<200) {
this._xscale += 20;
this._yscale += 20;
} else {
// 大きさが 200 以上に なれば 大きさを 200 で固定
this._xscale = 200;
this._yscale = 200;
// この onEnterFrame を削除
delete this.onEnterFrame;
}
};

} else {
// flag が false であれば
// １フレーム進む時間毎に随時実行
this.onEnterFrame = function() {
// 大きさが 100 になるまで縮小
if (this._xscale>100) {
this._xscale -= 20;
this._yscale -= 20;
} else {
// 大きさが 100 以下に なれば 大きさを 100 で固定
this._xscale = 100;
this._yscale = 100;
// この onEnterFrame を削除
delete this.onEnterFrame;
}
};
}

// flag の true false を逆にする
flag = !flag;
};
-------------------------------------------

一度目のクリック（奇数回目のクリック）で拡大し，
二度目のクリック（偶数回目のクリック）で縮小すると思います。

お礼

定石手段を教えていただきありがとうございます。
さらにスクリプトの記述までしていただき助かりました。
実際はもっと複雑なMC構造になっているのですぐに解決というわけではないのですが、これを元になんとかやってみようと思います。