ムービークリップの拡大縮小

Question

MCをクリックしたら拡大・縮小をさせたく、過去の投稿を参考にしながら、以下のscriptを作りました。

onClipEvent(load){
v_orgScale = this._xscale;
v_orgX = this._x;
v_orgY = this._y;
zoomState = false;
}

on(release, releaseOutside){
zoomState = !zoomState;
　this.onEnterFrame = function(){
　　if( zoomState ){
　　　if(this._xscale >=  v_orgScale*2.3){
　　　　delete this.onEnterFrame;
　　　}else{
　　　　this._xscale *= 1.1;
　　　　this._yscale *= 1.1;
　　　}
　　}else if( !zoomState){
　　　if(this._xscale <= v_orgScale){
　　　　this._xscale = v_orgScale;
　　　　this._yscale = v_orgScale;
　　　　delete this.onEnterFrame;
　　　}else{
　　　　this._xscale *= 0.9;
　　　　this._yscale *= 0.9;
　　　}
　　}
　};
}

ただ、これだとMCの基準点（0,0）に対しての拡大縮小なのでクリックしたポイントが拡大するにつれてどんどんずれていきますよね？
これをクリックしたポイントがずれないように拡大縮小する事は可能でしょうか？

宜しくお願いいたします。

sassakun · Accepted Answer

閃きました。
理解すれば，難しいスクリプトも複雑な計算も一切要らない，簡単な方法です。

>> MCの基準点（0,0）に対しての拡大縮小なので
>> … … どんどんずれていきますよね？

そうです，そうです。
それに，拡大するにつれてマウスと逆方向にムービークリップを動かそうとしても，
　this._xscale *= 1.1;
のような２次関数的な拡大をするため，
　this._xscale = v_orgScale*2.3
になった状態の時点では，うまくマウスの位置に合わせられたとしても，
途中の拡大中ではズレますよね。
私も30分くらい唸って考え込んでしまいました。

でも良い方法を思いつきました。
少々ややこしいかもしれないので，順を追って説明します。

『MCは 基準点 を基準に拡大縮小するのですから，
クリックしたときのマウスのポイントにMCの 基準点 を持ってくれば良い。』

というわけです。

でも，MCの基準点を動かすスクリプトなんかありません（多分）。
MCの基準点を動かすスクリプトがないのであれば，MC自体を動かせば良いのです。
しかし，MC自体を動かせば，マウスの位置にいつもMC中心が来てしまいます。

それは困るので，そのMCの中に 子MC を作って，
親MC が動いたのと逆向きに同じ距離 子MC を動かしてやれば，MC全体としては基準点のみがマウスの位置に移動することになります。

わかりますでしょうか。
MCを入れ子にして，
そのMCをクリックしたとき，
親MCの基準点をマウスのクリックポイントに移動させ，
子MCをそれとは逆方向に移動させる。
すると子MCは元の位置を保ち，
親MCの基準点はマウスのクリックポイントに移動するわけです。


簡単な例で原理を説明します。

ステージ上に，塗りで大きめの四角でも描きます。
その四角をムービークリップに変換します。
そしてその四角いMCにインスタンス名を付けます。
ここでは，「childMC」 というインスタンス名にしておきます。
そしてその 「childMC」 をさらにムービークリップに変換します。

そしてその変換したMCに次のようなスクリプトを書きます。
-----------------------------------
on (release, releaseOutside) {
this.childMC._x += this._x-_root._xmouse;
this.childMC._y += this._y-_root._ymouse;
this._x = _root._xmouse;
this._y = _root._ymouse;
}
-----------------------------------

このままパブリッシュしてもわかりにくいと思うので，
そのムービークリップ内の編集に入ります。
ムービークリップ内にはすでに 「childMC」 が存在していると思います。
その上にもう１つレイヤーを追加して，
そのレイヤーにムービークリップの基準点に「×」印 でもかいておきます。

　□　レイヤー　筆・・|●|　←「×」印
　□　レイヤー　筆・・|●|　←「childMC」

そして，パブリッシュ。
MCをクリックすると，そのポイントに「×」印は移動すると思いますが，「childMC」 は動きません。

（嬉しそうにクリックして 「×」印 を動かしている姿をもし他の人が見ると，意味不明で変な人だと思われるかもしれませんが，本人の中では 「×」印 が動いても 「childMC」 が動かないので嬉しい気分になります。）


実際の方法ですが。
質問で書かれているMCのスクリプトを全部消して，
そのMCにインスタンス名を付けます。
ここでも 「childMC」 というインスタンス名にしておきます。
その 「childMC」 を選択して，もう一度ムービークリップに変換します。
そして，次のようなスクリプトを，そのMCに書けば行けると思います。

※インデントを付けるため，
　 スクリプトの各行の前には全角空白文字を
　 たくさん入れています。
　 コピペする場合は全角空白文字を削除してください。
-----------------------------------
onClipEvent (load) {
　v_orgScale = this._xscale;
　v_orgX = this._x;
　v_orgY = this._y;
　zoomState = false;
}
on (release, releaseOutside) {
　zoomState = !zoomState;

// ------ ↓ここから追加↓ ------
　if (zoomState) {
　　this.childMC._x += this._x-_root._xmouse;
　　this.childMC._y += this._y-_root._ymouse;
　　this._x = _root._xmouse;
　　this._y = _root._ymouse;
　/*
　} else if (!zoomState) {
　　this.childMC._x += (this._x-_root._xmouse)/2.3;
　　this.childMC._y += (this._y-_root._ymouse)/2.3;
　　this._x = _root._xmouse;
　　this._y = _root._ymouse;
　*/
　}
// ------ ↑ここまで追加↑------

　this.onEnterFrame = function() {
　　if (zoomState) {
　　　if (this._xscale>=v_orgScale*2.3) {
　　　　delete this.onEnterFrame;
　　　} else {
　　　　this._xscale *= 1.1;
　　　　this._yscale *= 1.1;
　　　}
　　} else if (!zoomState) {
　　　if (this._xscale<=v_orgScale) {
　　　　this._xscale = v_orgScale;
　　　　this._yscale = v_orgScale;
　　　　delete this.onEnterFrame;
　　　} else {
　　　　this._xscale *= 0.9;
　　　　this._yscale *= 0.9;
　　　}
　　}
　};
}
-----------------------------------


// ------ ↓ここから追加↓ ------
　　　　　　　　　　～ ～
// ------ ↑ここまで追加↑------

と書いてある部分が追加した部分です。
他は一切変えていません。
その中の，

　/*
　} else if (!zoomState) {
　　　　　～　～
　　this._y = _root._ymouse;
　*/

の数行を 「/*」 と 「*/」 でコメントブロック扱いにしていますが，
これは，縮小するときにはどうするのかがわからなかったからです。
 「/*」 と 「*/」 を付けたままで行くと，
拡大するときは，マウスを中心に拡大しますが，
縮小するときはそのまま縮小するので，元の位置に帰ります。
 「/*」 と 「*/」 を取ると，
拡大するときも縮小するときもマウスを中心に拡大縮小します。
でも，元の位置には戻りません。
どちらにするかは選んでください。

上で「閃きました。」と書きましたが，
私が知らなかっただけで，
上記の方法は基準点を動かすためにすでにある定石手段かもしれません。


=== PS ========

質問で書かれているスクリプトですが，
無理・無駄・斑(むら)のない，本当にきれいでわかりやすいスクリプトですね。
"基準点"という用語の使い方も正しいですし，何を質問されているのかもよくわかりました。
なかなか，こんなにわかりやすい質問をされる方にはお目にかかれません。

良質問 で質問者に20ポイント！
と行きたいですが，それはできないようなので，
「このQ＆Aは役に立った」 に１票入れておきます。

ムービークリップの拡大縮小

閃きました。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング