マウスオーバー（クリック）画像がでズーム

質問

下記のサイトのように画像にマウスが乗ったら、ズームするようにしたいのですが、どのようなスクリプトを書いているのでしょうか？

http://www.bobscube.com/

もしくは下記のサイトのようにクリックすると画像がズームするサイト。スクリプト的には同じ（マウスクリックとマウスオーバーの違い）じゃないかと思うのですが・・・。

http://www.opfa.org/

単純に画像がズームするだけなら、こちらのサイトに載っていた↓で出来るのですが、上記サイトのように滑らかにズームする方法が分かりません。

onClipEvent (load) {
this._yscale = 100;
this._xscale = 100;
}
on (rollOver) {
this._yscale = 200;
this._xscale = 200;
}
on (rollOut) {
this._yscale = 100;
this._xscale = 100;
}

ご教授宜しくお願い致します。

回答No.3

noname#35109 · ベストアンサー

＃１，２です。
補足で書いていらっしゃる意味がわかりました。

だいたい横500～600×縦350～4500ピクセルくらいのステージのドキュメントを新規作成してください(デフォルトぐらい)。
その，ステージの真ん中ぐらいに，画面の面積の４分の１くらい(縦横がそれぞれ半分くらい)のムービークリップを用意してください。
まぁ，適当です。そんな感じだと何でも良いです。
そのムービークリップのアクションパネルに，

----------------------------------
onClipEvent (load) {
yScl = this._yscale;
xScl = this._xscale;
yPos = this._y;
xPos = this._x;
}
on (rollOver) {
this.onEnterFrame = function() {
this._yscale *= 1.1;
this._xscale *= 1.1;
this._y += (yPos-_root._ymouse)*0.1;
this._x += (xPos-_root._xmouse)*0.1;
if (this._yscale>=yScl*2) {
this._yscale = yScl*2;
this._xscale = xScl*2;
}
if (this._y>=yPos+100) {
this._y = yPos+100;
}
if (this._y<=yPos-100) {
this._y = yPos-100;
}
if (this._x>=xPos+100) {
this._x = xPos+100;
}
if (this._x<=xPos-100) {
this._x = xPos-100;
}
};
}
on (rollOut, dragOut) {
this.onEnterFrame = function() {
this._yscale *= 0.9;
this._xscale *= 0.9;
this._y += (yPos-this._y)*0.3;
this._x += (xPos-this._x)*0.3;
if (this._yscale<=yScl) {
this._yscale = yScl;
this._xscale = xScl;
this._y = yPos;
this._x = xPos;
this.onEnterFrame = null;
}
};
}
--------------------------------

というスクリプトを，コピペして，パブリッシュしてみてください。
＃１の下の方のスクリプトの変形です。
決してうまい書き方とは言えません。

>> 端の方にマウスを移動した場合、そちらに画像も移動する
>> マウスがロールアウトしたら、ズームアウトするというのは残したまま

と書かれている感じの動きをすると思います。
2 とか 100 とか 0.9 とか 0.3 とか，それらしくするように数値を適当に書いていますが，
これらの数をかえると，拡大率や移動スピードなどが変わるはずです。
画面の面積の４分の１くらいのムービークリップだと，ムービークリップの端が見えると思いますが，これをステージより若干大きめにすると，ムービークリップの端は見えなくなると思います。
適当に調節してください。

でも，あーでもないこうでもないと，いろいろ考えて，実現していくのがFlashの面白さであり，Flashの奥深さだと思います。
書いたサンプルも，どこかにあった公式とかではなく，知っている言葉を組み合わせて我流で考えてみただけです。
といっても，「IF文」と「onEnterFrame」とを組み合わせただけですけどね。

最初，質問者さまが提示したスクリプトと基本は同じでしょう。だから考え方は合っていると思います。
スクリプトなんて外には見えません。ちゃんと動けば良いのです。いろいろ考えてやってみてください。

お礼

sassakunさま

本当にこの度はありがとうございました！　
おっしゃられている通り、今後はすぐに誰かに聞くのではなく、自分でいろいろ考えてイメージ通りのスクリプトを作っていきたいと思います！

回答No.2

noname#35109

＃１で答えた者です。

補足に書かれている意味が，よく飲み込めないのですがどういうことでしょうか。

>> ズームしたあとに（ズームした大きさの画像のままの状態）

ここまではわかります。

>>マウスを移動させるのは、どうしたらできるのか

ここがわかりません。

ムービークリップにマウスを重ね，大きくしたあとに，マウスを移動させても大きな状態のままを維持するのであれば，スクリプトの下半分

on (releaseOutside, rollOut) {
this.onEnterFrame = function() {
　～～～省略～～～
this.onEnterFrame = null;
};
}

の部分をなくせばいいわけですし……　　？？？

補足

説明不足で申し訳ありません・・・。それと、お礼を言うのを忘れていました、ありがとうございます！！

言いたかったことは、既出の下記のサイトのように、画像がズームしたあとに、たとえば端の方にマウスを移動した場合、そちらに画像も移動する、というふうにしたいのです。いまは画像がズームしたあとは、画面が固定されたままの状態で、画像範囲内（ムービークリップの範囲内）でマウスを移動することができませんので・・・。　もちろん画像上（ムービークリップ）からマウスがロールアウトしたら、ズームアウトするというのは残したままで、ということです。
すみません、もちろん最初に質問したことに対するお答えはすでにいただけているので、この質問にも答えていただくのはルール違反かもしれませんが・・・、宜しくお願い致します。

http://www.bobscube.com/

回答No.1

noname#35109

それにしても，キモチ悪いFlashですね。
出来はきれいですし，すごいスクリプトなんですけど，船酔いしそうな…

他との絡みが出てきたり，ActionScriptだけではどうにもならない，作図の部分もありますけど，
単純にムービークリップにマウスか乗ったとき，徐々に拡大，
マウスが離れたとき，元のサイズに徐々に戻るというスクリプトを書いておきます。

基本は，質問者さまが書かれている，スクリプトと同じです。
ただ，ゴールに一気に向かわず，徐々にという部分を付け加えているだけです。

他との絡みはないものとするので，ムービークリップのインスタンス名はあえて付けていません。
ムービークリップを適当に作って，以下のスクリプトをコピペしてみてください。
徐々に大きさが変化すると思います。

---サンプル１(コピペ可能)----------
onClipEvent (load) {
yScl = this._yscale;
xScl = this._xscale;
}
on (rollOver) {
this.onEnterFrame = function() {
this._yscale *= 1.1;
this._xscale *= 1.1;
if (this._yscale>=yScl*3) {
this.onEnterFrame = null;
}
};
}
on (releaseOutside, rollOut) {
this.onEnterFrame = function() {
this._yscale *= 0.9;
this._xscale *= 0.9;
if (this._yscale<=yScl) {
this._yscale = yScl
this._xscale = xScl
this.onEnterFrame = null;
}
};
}
-------------------------------

---解説(コピペは多分不可能)----

//ムービークリップ(MC)がロード(表示)されたとき
onClipEvent (load) {
　　//変数ySclとxSclにこのMCの最初の座標を確保
　　yScl = this._yscale;
　　xScl = this._xscale;
}

//このMCにロールオーバーで
on (rollOver) {
　　//フレームレート毎に１回以下を計算※
　　this.onEnterFrame = function() {
　　　　//このMCのXとYスケールを1.1倍に
　　　　this._yscale *= 1.1;
　　　　this._xscale *= 1.1;
　　　　//もし，Yスケールが元の３倍になったら
　　　　if (this._yscale>=yScl*3) {
　　　　　　//この計算終わり
　　　　　　this.onEnterFrame = null;
　　　　}
　　　　};
}

//このMCからマウスが離れたら
on (releaseOutside, rollOut) {
　　//フレームレート毎に１回以下を計算※
　　this.onEnterFrame = function() {
　　　　//このMCのXとYスケールを0.9倍に
　　　　this._yscale *= 0.9;
　　　　this._xscale *= 0.9;
　　　　//もし，Yスケールが元の大きさに戻ったら
　　　　if (this._yscale<=yScl) {
　　　　　　this._yscale = yScl
　　　　　　this._xscale = xScl
　　　　　　//この計算終わり
　　　　　　this.onEnterFrame = null;
　　　　}
　　};
}
---解説終わり--------------------

という物です。
もちろん，他の書き方は無数にあります。
　　//フレームレート毎に１回以下を計算※
の部分ですが，onEnterFrameメソッドと言って，
ドキュメントのプロパティで設定したフレームレート(デフォルトでは1/12秒)に１回{ }でくくられた中の計算をします。

MCの位置を，マウスに近づけたいなど，位置まで変える場合は以下のようなスクリプトになります。

---サンプル２(コピペ可能)----------
onClipEvent (load) {
yScl = this._yscale;
xScl = this._xscale;
yPos = this._y;
xPos = this._x;
}
on (rollOver) {
yMou = _root._ymouse;
xMou = _root._xmouse;
this.onEnterFrame = function() {
this._yscale *= 1.1;
this._xscale *= 1.1;
this._y += (yMou-this._y)*0.1;
this._x += (xMou-this._x)*0.1;
if (this._yscale>=yScl*3) {
this.onEnterFrame = null;
}
};
}
on (releaseOutside, rollOut) {
this.onEnterFrame = function() {
this._yscale *= 0.9;
this._xscale *= 0.9;
this._y += (yPos-this._y)*0.3;
this._x += (xPos-this._x)*0.3;
if (this._yscale<=yScl) {
this._yscale = yScl;
this._xscale = xScl;
this._y = yPos
this._x = xPos
this.onEnterFrame = null;
}
};
}
-------------------------------

まぁつまり，動かしたいMCのプロパティが増えるごとに，変数やスクリプトも増えるわけです。

あくまでも例ですから，他にも書き方はありますし，場合によって変わるので，それぞれ，その都度考えるしかないですね。

補足

すみません・・・ズームしたあとに（ズームした大きさの画像のままの状態）マウスを移動させるのは、どうしたらできるのかも教えていただけると助かります。何から何まで聞いてすみません。・・・可能だったらで構いません・・・。