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

Question

下記のサイトのように画像にマウスが乗ったら、ズームするようにしたいのですが、どのようなスクリプトを書いているのでしょうか？

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; 
}

ご教授宜しくお願い致します。

sassakun · Accepted Answer

＃１，２です。補足で書いていらっしゃる意味がわかりました。だいたい横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 · Answer

＃１で答えた者です。

補足に書かれている意味が，よく飲み込めないのですがどういうことでしょうか。

>> ズームしたあとに（ズームした大きさの画像のままの状態）

ここまではわかります。

>>マウスを移動させるのは、どうしたらできるのか

ここがわかりません。

ムービークリップにマウスを重ね，大きくしたあとに，マウスを移動させても大きな状態のままを維持するのであれば，スクリプトの下半分

on (releaseOutside, rollOut) {
this.onEnterFrame = function() {
　～～～省略～～～
this.onEnterFrame = null;
};
}

の部分をなくせばいいわけですし……　　？？？

sassakun · Answer

それにしても，キモチ悪い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のプロパティが増えるごとに，変数やスクリプトも増えるわけです。あくまでも例ですから，他にも書き方はありますし，場合によって変わるので，それぞれ，その都度考えるしかないですね。

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

＃１，２です。

＃１で答えた者です。

この回答への補足

それにしても，キモチ悪いFlashですね。

この回答への補足

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

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

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

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