FLASHで構成されているサイトでよく見かけるサムネイル画像がマウスの動きに反応して加速したり減速したりしながらスクロールするナビゲーション。 今回はその作り方を基本から理解することにしたい。 基本的には、前項で勉強したマウストレイルに良く似たテクニックと言える。 本お勉強に入る前に、マウストレイルをまず勉強しておくことをお勧めする。 基本を理解する マウストレイルで示した、遅延効果付加型で作成することにする。 慣性効果付加型で作成すると動きがもっとダイナミックになるが、遅延効果付加型のほうが落ち着いた動きが作れるし、スクリプトの理解もしやすいので、今回はこの型を使うことにしたい。 まず、マウストレイルのときと同様新規ファイルを開いた後、「挿入」「新規シンボル」でシンボルstarを作成し、リンケージで識別子を starにして「アクションスクリプトの書き出し」にチェックを入れる。 starはマウストレイルに使ったものと同じイメージを使うが、大きさを100×95.5と約倍の大きさにする。 このstarを横に並べて、マウスに反応する動きを作成してみよう。 考え方は、ステージ左右の真ん中にマウスがあるときは画像は動かず(加速度が0)、マウスが中心から遠ざかるほど加速度が大きくなる(遅延効果が小さくなる)ようにする。 マウスが左にずれると画像は右に、右にずれると画像が左にスクロールするようにする。 以下に、スクリプトと実例を示す。(ステージは500×200) |
|
スクリプト 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; } } |
配列starを定義 星の数を8個に設定 ムービークリップの生成(starをステージに並べる) 250はステージ中心のx座標、100はstarを並べる間隔 (x=250を中心に、左右対象にstarを並べる) y座標は80に固定 各starはそのときのマウスの位置によって加速を受けて左右に動く (自分の位置は関係しない・・・マウストレイルとここが違う) 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:画像全体の長さ(個々の長さ×個数;最初に定義あり) −120:完全に左に消えるx座標 (520は右に消える座標) ロールオーバーしたときのファンクションの呼び出し ロールアウトしたときのファンクションの呼び出し Colorオブジェクトの作成 this:本インスタンス ロールオーバー時の着色 ロールアウト時の着色(元の色) |
フォトギャラリーの作成 基本が理解できたところで、これをナビゲーションとしたフォトギャラリーを作ってみよう。 ここでは、新幹線ギャラリー(http://tec.supertrain.net/)からダウンロードさせていただいて、0系から800系までの9枚の写真を用いた。 まず、作例を見ていただくと以下のようであり、次に、スクリプトと解説を記す。 |
|
スクリプト | |
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 (0系から800系に対応) ステージに拡大写真表示用のスクリーン(560×420)を 矩形ツールで描き、シンボルに変換する インスタンス名をmyJpgとし、変形ツールで変形基準点を 矩形の左上に移動する(ここが画像読込みの基点になる) また、この例では、スクリーンを囲む枠線を別に描いている 処理中の i の取り込み ロールオーバー時のアクション名 ロールアウト時のアクション名 リリース時のアクション名 各アクション アルファ値を50に 元に戻す リリースされた番号の拡大写真をimageと定義 myJpgにimageを読み込んで表示 (拡大写真は外部ファイル(sksl0 - sksl8.jpg)で、同じフォルダにある) |
HOME お勉強総リスト |