マウスに反応した画像スクロール

例えば500px×500pxの画像があるとして、それを200px×200pxのサイズのFlashで見せたいと思っています。当然Flashの方がサイズが小さいので画像の全体像は見えませんが、マウスの動きに反応して右なら右、下なら下にスクロールさせたいのです。このとき、ループではなく、画像の端までスクロールしたら止めたい（できればゆっくり・そっと止めたい）んですが、検索しようとしてもせいぜい「action script 画像 スクロール」ぐらいしか思いつかず、そういったスクリプトのサンプルが見つかりません。もしご存じの方、慣れているからそれぐらいなら書いてやるというような優しい方、おられましたらよろしくおねがいします。

イメージとしてはこんな感じです。
http://www.uniden.jp/jijitsu/

No.1 ベストアンサー 回答者： BlurFiltan 回答日時： 2007/11/21 11:50

> もしご存じの方、

ご存じというか，普通はご存じではなく考えるのですよ。

まず大切なのはムービークリップ（以下MCと略します）の基準点です。
画像をMCに変換しますが，
そのときに左上のコーナーを基準点としてMCに変換します。
本当はどこでも良いのですが，
基準点の場所によってスクリプトや計算や考え方が変わります。
考えるのに都合が良いので左上のコーナーに基準点を設定します。
基準点がそのMCの座標の基準ポイントとなります。

　┏基準点　　┏MC
　田■■■■■■■■■
　■■■■■■■■■■
　■■■■■■■■■■
　■■■■■■■■■■
　■■■■■■■■■■

そして，ステージより画像の方が大きいわけです。

x軸についてのみ考えます。
もし，
マウスの座標がステージの左上のコーナーにあった場合，
つまり，マウスの座標が x=0 であった場合，
画像入りMCのコーナーも x=0 に来れば良いわけです。

　　　　　　　　　　┏マウス
　　　　　　　　　　↓　┏ステージ　┏画像入りMC
　　　　　　　　　　田□□□■■■■■■
　　　　　　　　　　□□□□■■■■■■
　　　　　　　　　　■■■■■■■■■■
　　　　　　　　　　■■■■■■■■■■
　　　　　　　　　　■■■■■■■■■■

もし，
マウスの座標がステージの右上のコーナーにあった場合，
つまり，マウスの座標が x=ステージの幅 であった場合，
画像入りMCのコーナーは，
x=ステージの幅 - ムービークリップの幅
に来れば良いわけです。

　　　　　　　　　　　　　　　┏マウス
　　　　　　　　　　　　　　　↓(ステージ右端にあるつもり)
　田■■■■■□□□□
　■■■■■■□□□□
　■■■■■■■■■■
　■■■■■■■■■■
　■■■■■■■■■■
└─ 画像入りMC幅 ─┘
　　　　　　　　　└───┘
　　　　　　　　 　ステージ幅

マウスx＝0　のとき
MCx＝0

マウスx＝ステージ幅　のとき
MCx＝ステージ幅 - MCの幅

これをグラフにします。
右肩下がりの一次関数のグラフになります。

　　MCx
　　 ↑　　　　　　　ステージ幅
　□■□□□□□□┃□□□
　■ 0 ■■■■■■■■■■→マウスx
　□■■□□□□□回□□□
　□■□■□□□□回□□□
　□■□□■□□□回□□□
　□■□□□■□□回□□□
　□■□□□□■□回□□□
　□■□□□□□■回□□□
　□■回回回回回回■回回回━ステージ幅 - MCの幅
　□■□□□□□□回□□□

　ｙ＝ax＋ｂ … 一次関数
　MCx ＝a × マウスx ＋ b

切片 b は原点0
傾きは a は (ステージ幅 - MCの幅)/ステージ幅

したがって，

　MCx ＝(ステージ幅 - MCの幅)/ステージ幅 × マウスx

という一次方程式が得られます。

ｙも同様に考えられます。

　MCy ＝(ステージ高さ - MCの高さ)/ステージ高 × マウスx

ここまでで，計算は終わりです。


////////////////////////////////////////////////////////////////////

基準点が左上のコーナーにある画像入りMC に，
仮に 「G」 というインスタンス名を付けたとします。

上の式を ActionScript で表すとこうなります。
---------------------------------------------------------
_root.G._x = (Stage.width-_root.G._width)/Stage.width*_root._xmouse;
_root.G._y = (Stage.height-_root.G._height)/Stage.height*_root._ymouse;
---------------------------------------------------------

これを随時変更すれば良いのですから，
_root のフレームに書くスクリプトはこうなります。
---------------------------------------------------------
_root.G.onEnterFrame = function() {
_root.G._x = (Stage.width-_root.G._width)/Stage.width*_root._xmouse;
_root.G._y = (Stage.height-_root.G._height)/Stage.height*_root._ymouse;
};
---------------------------------------------------------

これをスムースな動きにしたいのですから，
目標ポイントに徐々に近づければ良いということになります。
---------------------------------------------------------
// 変数 spd を設定
spd = 1/10;
_root.G.onEnterFrame = function() {
_root.G._x += ((Stage.width-_root.G._width)/Stage.width*_root._xmouse-_root.G._x)*spd;
_root.G._y += ((Stage.height-_root.G._height)/Stage.height*_root._ymouse-_root.G._y)*spd;
};
---------------------------------------------------------

やたら横長になってしまって，
おそらく途中で改行してしまっていると思いますが，
_root.G.onEnterFrame = function() { }
の { } 内は２行のままです。

説明が大変な割には，
すごい技やすごい計算式やすごい発想を使っているわけではないので，
普通の方は解説などしないでしょうね。
わざわざ解説しても，見る方としては「で？」 状態になってすごく意味のないネタに見えます。
ですから，どこにも解説されていないのだと思います。

悪い動きだとか，動きが面白くないとか，
Flashサイトの動きのネタに使うのが良くないとか，
そういう意味ではありませんよ。
解説をわざわざ作成してまで，「すごくためになる」とか「なるほど！」というようなことではないので，
Flash作成を解説する方も，解説する気が誰も起こらないでしょうねという意味です。
私が解説サイトをもっていたとしても，まず解説ネタには使わないでしょう。

マウス追従の方が説明が簡単ですし，ためになります。
またこれはマウス追従のちょっと変形版です。

この回答へのお礼

厳しいお言葉かと思いきや、ものすごく親切な説明ありがとうございます。少し理解できない部分もあったのですが、説明していただいたことを参考に色々と調べつつやっているうちに、当初やろうと思っていたことは実現できました。ありがとうございました。

お礼日時：2007/12/16 17:23