（９）マウスに反応する画像スクロール
FLASHで構成されているサイトでよく見かけるサムネイル画像がマウスの動きに反応して加速したり減速したりしながらスクロールするナビゲーション。 今回はその作り方を基本から理解することにしたい。 基本的には、前項で勉強したマウストレイルに良く似たテクニックと言える。 本お勉強に入る前に、マウストレイルをまず勉強しておくことをお勧めする。 基本を理解する マウストレイルで示した、遅延効果付加型で作成することにする。 慣性効果付加型で作成すると動きがもっとダイナミックになるが、遅延効果付加型のほうが落ち着いた動きが作れるし、スクリプトの理解もしやすいので、今回はこの型を使うことにしたい。 まず、マウストレイルのときと同様新規ファイルを開いた後、｢挿入｣「新規シンボル｣でシンボルｓｔａｒを作成し、リンケージで識別子を ｓｔａｒにして「アクションスクリプトの書き出し」にチェックを入れる。 ｓｔａｒはマウストレイルに使ったものと同じイメージを使うが、大きさを１００×９５．５と約倍の大きさにする。 このｓｔａｒを横に並べて、マウスに反応する動きを作成してみよう。 考え方は、ステージ左右の真ん中にマウスがあるときは画像は動かず(加速度が０)、マウスが中心から遠ざかるほど加速度が大きくなる（遅延効果が小さくなる)ようにする。 マウスが左にずれると画像は右に、右にずれると画像が左にスクロールするようにする。 以下に、スクリプトと実例を示す。（ステージは５００×２００） |
|
| スクリプト var star:Array = new Array(); var s_num:Number = 8; for (i=1; i <= s_num; i++) { _root.attachMovie("star","star"+i,i); star[i] = eval("star"+i); star[i]._x = 250-100*(s_num-i ); star[i]._y = 80; } _root.onEnterFrame = function() { for (i=1; i<=s_num; i++) { _root.star[i]._x += (250-_root._xmouse)/10; } } |
配列ｓｔａｒを定義 星の数を8個に設定 ムービークリップの生成（ｓｔａｒをステージに並べる) ２５０はステージ中心のｘ座標、１００はｓｔａｒを並べる間隔 （ｘ＝２５０を中心に、左右対象にｓｔａｒを並べる) ｙ座標は８０に固定 各ｓｔａｒはそのときのマウスの位置によって加速を受けて左右に動く (自分の位置は関係しない・・・マウストレイルとここが違う) １０の大きさで加速の程度が変わる |
| 見えなくなったら更新ボタンを押してください |
|
画像ループ型スクローラー 上のケースでは、画像がステージの右か左に消えてしまうと、マウスでうまく調節しないと全く見えなくなってしまう。 そこで、画像(星)が右に消えたら一番左の位置に、左に消えたら一番右の位置に移動するスクリプトを付け加えた例を以下に示す。 この場合、星の数は８個であるが、無限ループで、常に画面に表示されている。 ついでに、ロールオーバー効果を付加した。 |
|
| スクリプト var star:Array = new Array(); var s_num:Number = 8; var length:Number = s_num*100; for (i=1; i<=s_num; i++) { _root.attachMovie("star","star"+i,i); star[i] = eval("star"+i); star[i]._x = 250-100*(s_num-i); star[i]._y = 80; } _root.onEnterFrame = function() { for (i=1; i <= s_num; i++) { if (_root.star[i]._x < -120) { _root.star[i]._x += length; } else if (_root.star[i]._x > 520) { _root.star[i]._x -= length; } _root.star[i]._x += (250-_root._xmouse)/10; star[i].onRollOver = rollov; star[i].onRollOut = rollou; } } function rollov() { objColor=new Color(this); objColor.setRGB(0x00ffff); } function rollou() { objColor.setRGB(0xfef80e); } |
スクリプトの説明 length：画像全体の長さ(個々の長さ×個数；最初に定義あり) −１２０：完全に左に消えるｘ座標 （５２０は右に消える座標） ロールオーバーしたときのファンクションの呼び出し ロールアウトしたときのファンクションの呼び出し Colorオブジェクトの作成 this：本インスタンス ロールオーバー時の着色 ロールアウト時の着色(元の色) |
フォトギャラリーの作成 基本が理解できたところで、これをナビゲーションとしたフォトギャラリーを作ってみよう。 ここでは、新幹線ギャラリー（http://tec.supertrain.net/）からダウンロードさせていただいて、0系から800系までの９枚の写真を用いた。 まず、作例を見ていただくと以下のようであり、次に、スクリプトと解説を記す。 |
|
| スクリプト | |
| var sks:Array = new Array(); var s_num:Number = 9; var length:Number = s_num*125; for (i=0; i<s_num; i++) { _root.attachMovie("sks"+i,"sks"+i,i); sks[i] = eval("sks"+i); sks[i]._x = 320-125*(s_num-i); sks[i]._y = 50; } _root.onEnterFrame = function() { for (i=0; i < s_num; i++) { if (sks[i]._x < -170) { sks[i]._x += length; } else if (sks[i]._x >800) { sks[i]._x -= length; } sks[i]._x += (320-_root._xmouse)/10; sks[i].num = i; sks[i].onRollOver = rollov; sks[i].onRollOut = rollou; sks[i].onRelease = release; } } function rollov() { this._alpha = 50; } function rollou() { this._alpha = 100; } function release() { image="sksl"+this.num+".jpg" myJpg.loadMovie(image); } stop(); |
キャンバスの大きさは、640×600 サムネイルの数は9 サムネイルの大きさは、120×90 サムネイルの写真はシンボル化し、リンケージを設定 名前は、sks0 - sks8 （０系から８００系に対応) ステージに拡大写真表示用のスクリーン（560×420）を 矩形ツールで描き、シンボルに変換する インスタンス名をｍｙJpgとし、変形ツールで変形基準点を 矩形の左上に移動する（ここが画像読込みの基点になる） また、この例では、スクリーンを囲む枠線を別に描いている 処理中の i の取り込み ロールオーバー時のアクション名 ロールアウト時のアクション名 リリース時のアクション名 各アクション アルファ値を５０に 元に戻す リリースされた番号の拡大写真をimageと定義 myJpgにimageを読み込んで表示 （拡大写真は外部ファイル（sksl0 - sksl8.jpg）で、同じフォルダにある） |
| HOME お勉強総リスト | |