- ベストアンサー
マウスに反応した画像スクロール
- Flashを使用して500px×500pxの画像を200px×200pxのサイズで表示し、マウスの動きに合わせて画像をスクロールさせたい。
- 画像をスクロールさせる際にはループではなく、画像の端までスクロールしたら止めたい。
- スクロール速度はゆっくりとしたものに設定したい。
- fruits_lee
- お礼率94% (176/186)
- Flash
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
> もしご存じの方、 ご存じというか，普通はご存じではなく考えるのですよ。 まず大切なのはムービークリップ（以下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作成を解説する方も，解説する気が誰も起こらないでしょうねという意味です。 私が解説サイトをもっていたとしても，まず解説ネタには使わないでしょう。 マウス追従の方が説明が簡単ですし，ためになります。 またこれはマウス追従のちょっと変形版です。
お礼
厳しいお言葉かと思いきや、ものすごく親切な説明ありがとうございます。少し理解できない部分もあったのですが、説明していただいたことを参考に色々と調べつつやっているうちに、当初やろうと思っていたことは実現できました。ありがとうございました。