このflash講座は,flashソフトを用いてflashアニメをスクリプトで制作し無料で公開したものです![]() |
||
FLASH講座 ーアクションスクリプトの実践的事始めー 活用編 (6)スライド式ナビゲーション&ギャラリー |
||
本日のflash講座は、ロールオーバーするとメニューバーが流れ、マウスを置いたメニューが左からバー一杯に流れ込み、クリックすると今度は、表示目的の写真が画面上から流れ込むタイプのフォトギャラリーを作成しました。 まずは以下にサンプルを示します。 |
||
なお、ここで使用した写真は、以下のサイトからDLしました。いずれも素晴らしい写真満載のサイトです。 海: http://www.e-beach.info/wallmain.htm 川: http://www.yunphoto.net 山: http://snowman.whitering.net/kabegami/yama.htm 古都: http://www.photokyoto.com/kyoto/site-kiyomizudera/site_kiyomizudera.htm 都会: http://www.ne.jp/asahi/to/apple/tokyo1/tokyo2.htm |
||
ステージの設定・及び準備 | ||
(1)w506、h465、黒のステージ、フレームレート30fpsを設定 (2)ステージに写真表示用スクリーンを配置(w500,h400,x3,y3、色グレー、インスタンス名:screen) (3)w500、h400の写真5枚をステージに読み込みシンボルに変換、シンボル名、リンケージ名をpicL1...picL5とし、 ステージから削除する (4)上記写真の縦方向の一部を切り取り(w500,h50)、さらに、横方向をw100に縮小させる 各縮小写真に、海、川などの文字を書き、シンボルに変換、シンボル名、リンケージ名をpic1...pic5とする (5)メニュー写真のバック用に黒の矩形描画(w500,h62)をシンボル名、リンケージ名backで作成 |
||
スクリプト(_rootに) | ||
var pic:Array = new Array(); var ro_x:Array = new Array(); var rl_y:Array = new Array(); pic_num = 5; bar_w = 100; bar_h = 50; x0 = 3; y0 = 406; count = 1; //Background of menu bar _root.attachMovie("back", "back", 0); _root.back._x = x0; _root.back._y = 403; //menu bar for (i=1; i<=pic_num; i++) { _root.attachMovie("pic"+i, "pic"+i, i); pic[i] = eval("pic"+i); pic[i]._x = x0+bar_w*(i-1); pic[i]._y = y0; pic[i].num = i; pic[i].onRollOver = rover_mc; pic[i].onRollOut = rout_mc; pic[i].onRelease = rls_mc; } function rover_mc() { n = this.num; for (i=1; i<=pic_num; i++) { if (count<=pic_num) { pic[i]._xscale = 500; if (i>=n) { pic[i]._x = x0+500*(i-n)-2000; } if (i<n) { pic[i]._x = x0+500*(i-n+1); } ro_x[i] = pic[i]._x; count++; } } _root.onEnterFrame = function() { for (k=1; k<=pic_num; k++) { pic[k]._x += (ro_x[k]+2000-pic[k]._x)/5; } }; } function rout_mc() { _root.onEnterFrame = function() { mx = _root._xmouse; my = _root._ymouse; if (mx<x0 || mx>x0+pic_num*bar_w || my>y0+50 || my<y0) { count = 1; for (i=1; i<=pic_num; i++) { pic[i]._xscale += (100-pic[i]._xscale)/5; pic[i]._x += (x0+100*(i-1)-pic[i]._x)/2; } } }; } function rls_mc() { n = this.num; for (i=1; i<=pic_num; i++) { _root.screen.picL[i]._yscale = 100; _root.screen.picL[i]._alpha = 100; if (i>=n) { _root.screen.picL[i]._y = 400*(i-n)-1600; } if (i<n) { _root.screen.picL[i]._y = 400*(i-n+1); } rl_y[i] = _root.screen.picL[i]._y; } _root.screen.onEnterFrame = function() { for (k=1; k<=pic_num; k++) { _root.screen.picL[k]._y += (rl_y[k]+1600-_root.screen.picL[k]._y)/5; } }; } |
配列の定義 メニュー(ナビ)バーのサイズ メニューバーの配置(左上)座標 ロールオーバ時アクションを1回でとめるためのカウント メニューバー背景の配置 メニューバーを配置 イベント時のバーのナンバーを取得 ロールオーバー時のアクション呼び出し ロールアウト時 リリース時 ロールオーバー時 ロールオーバーされたメニューの番号n取得 縮小写真1-5に対して もしcountが5以下なら 横幅を500に 写真番号がn以上だったら クリックされたバーのx座標を-2000とし、以下、 順番に右方向に並べる nより小さかったら 縮小写真それぞれのx座標取得 countに1を加える _rootのフレームアクション 先に取得したx座標に2000加えた座標に移動 (クリックしたバーが5倍になってスライドしながら登場し止まる(イージング)) ロールアウト時 もし、マウスがメニューバー範囲を外れたら countを1に戻す それぞれのメニュー写真を初期値に縮小 初期x座標に戻す リリース時 リリースされた番号を取得 ここからは、メニューバーのスクリプトを縦方向に変えただけ すなわち、screenに配置された各写真をノーマルなサイズに戻し(最初は5分の1になっている)、クリックされた番号の写真をyがー1600の位置に、それ以外の写真を順番に800,400,0に配置し、そのまま、クリックされた写真が0位置になる(画面に表示される)ようにスライドさせている screenに配置された写真のフレームアクション クリック時に配置された位置から、1600を加えたy座標に移動し止まる |
|
スクリプト(screenに) | ||
//Large Picture MC onClipEvent(load){ var picL:Array = new Array(); pic_num=5; for (i=1; i<=pic_num; i++) { this.attachMovie("picL"+i, "picL"+i, -i); picL[i] = eval("picL"+i); picL[i]._yscale = 20; picL[i]._alpha = 30; picL[i]._x = 0; picL[i]._y = 400/pic_num*(i-1); } } |
写真はムービークリップscreenに配置する (メニュ-バーのフレームアクションと本写真のフレームアクションを同時に_rootにおくと干渉するため) 最初は、写真の高さを5分の1に縮めて5枚が全部並ぶように配置し、アルファー値を30に落としておく |
|
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - -
|
||
HOME Flash講座総リスト アクションスクリプトの実践的事始め-活用編(7) |