このFlash講座1234は,flashソフトを用いてflashアニメをスクリプトで制作し無料で公開したものです![]() |
||
| FLASH講座 ーアクションスクリプトの実践的事始めー 活用編 (8)複数シリーズDATA用フォトギャラリー 鳳凰三山 |
||
| 先日、南アルプスの鳳凰三山を縦走してきました。 その時のフォトギャラリーを作成しましたので今回のflash講座とします。 写真は、木々の新緑、日の出、花、山々、滝などのシリーズに分けて表示できる、すなわち、複数シリーズに対応できるギャラリー形式とします。 スクリプトは、サムネイルがスライドして登場する部分と、サムネイルのクリックで写真を表示する部分をクラスファイルにしました。 |
||
| SAMPLE | ||
| フォトギャラリーのサンプルファイルは こちら です。 | ||
| ステージの準備 | ||
| 750×570のステージ、FrameRate 30、背景色黒に設定。 写真表示用スクリーンとして600×450の灰色矩形をステージ右上に描き(座標、130, 20)、左に、ギャラリーの表題に続き、メニューを白文字(16point)で縦に並べる。 ここでは、新緑、花々、日の出、鳳凰三山、山々展望、滝の6シリーズである。 ついで、85×20の大きさの黒色矩形の新規シンボルを作成し、この矩形を各メニュー文字の上に重ねて配置する。(文字が見えなくなるよう、重なりを設定) 各メニュー文字の上の矩形のインスタンス名を、menu1,menu2,,,,,menu6と名付ける。 各シリーズのサムネイル写真(60×45)をシンボルとしてライブラリーに読み込み、インスタンス名を p+シリーズ番号+写真番号とする。 たとえば、menu1の写真は、p11,p12,p13,,,,,p16 のようにする。 同名のリンケージを設定する。 さらに表示用写真(650×450)をpicL11.jpg, picL12.jpg ,,,, picL16.jpg のように名付け、Flashファイルと同じフォルダに置く(他のホルダーでも良いが、そのときはパスを指定する) |
||
| スクリプト(全角スペースが入っている行は、コピー・ペイストだけではエラーになります) | ||
| gallery_slidethumb.asファイルに class gallery_slidethumb extends MovieClip { private var mc:MovieClip; private var pre_mc:MovieClip; function gallery_slidethumb(n:Number, p_num:Number, pic_width:Number) { for (var i:Number = 1; i<=p_num; i++) { mc = _root.attachMovie("p"+n+i, "pic"+n+i, i); mc._x = -200; mc._y = 490; if (i>=2) { mc.num = i; var j:Number = i-1; mc.pre_mc = _root["pic"+n+j]; mc.onEnterFrame = function() { this._x += (this.pre_mc._x+pic_width+5-this._x)/2; this.onRelease = function() { _root.screen.loadMovie("pic"+n+this.num+"L.jpg"); }; }; } else { mc.onEnterFrame = function() { this._x += (180-this._x)/2; this.onRelease = function() { _root.screen.loadMovie("pic"+n+1+"L.jpg"); }; }; } } } } gallery_slidethumb.fla(swf)ファイルに var menu_num:Number=6; var thumb_max:Number=8; var thumb1:Number=7; var thumb2:Number=8; var thumb3:Number=5; var thumb4:Number=7; var thumb5:Number=7; var thumb6:Number=3; _root.menu1.onRelease = function() { var gallery:gallery_slidethumb = new gallery_slidethumb(10, thumb_max, 60); var gallery:gallery_slidethumb = new gallery_slidethumb(1, thumb1, 60); }; _root.menu2.onRelease=function( ) { var gallery:gallery_slidethumb = new gallery_slidethumb(10, thumb_max, 60); var gallery:gallery_slidethumb = new gallery_slidethumb(2, thumb2, 60); } _root.menu3.onRelease=function( ) { var gallery:gallery_slidethumb = new gallery_slidethumb(10, thumb_max, 60); var gallery:gallery_slidethumb = new gallery_slidethumb(3, thumb3, 60); } _root.menu4.onRelease=function( ) { var gallery:gallery_slidethumb = new gallery_slidethumb(10, thumb_max, 60); var gallery:gallery_slidethumb = new gallery_slidethumb(4, thumb4, 60); } _root.menu5.onRelease=function( ) { var gallery:gallery_slidethumb = new gallery_slidethumb(10, thumb_max, 60); var gallery:gallery_slidethumb = new gallery_slidethumb(5, thumb5, 60); } _root.menu6.onRelease=function( ) { var gallery:gallery_slidethumb = new gallery_slidethumb(10, thumb_max, 60); var gallery:gallery_slidethumb = new gallery_slidethumb(6, thumb6, 60); } for (i=1; i<=menu_num; i++) { _root["menu"+i]._alpha = 0; _root["menu"+i].onRollOver=function() { this._alpha=30; } _root["menu"+i].onRollOut=function() { this._alpha=0; } } |
クラスの定義(継承:MovieClip) MovieClip の宣言 〃 関数gallery_slidethumb(n:シリーズ番号、p_num:そのシリーズの写真枚数、pic_width:写真幅) 写真の枚数だけ ステージにサムネイル写真を配置 初期配置x座標 初期配置y座標 もし、i (写真番号)が2以上なら 番号の保存 一つ前の写真番号 一つ前の写真のムービークリップの定義 このmcのフレームアクション x座標を、前のmcのx座標+写真幅+5に サムネイルがクリックされたら、 screenに該当する写真を表示 そうでなかったら(i が1だったら) 表示x座標を180に サムネイルがクリックされたら、 screenに該当する写真を表示 メニュー(シリーズ)の数 一番多い枚数 シリーズ1のサムネイルの枚数 menu1がクリックされたら gallery_slidethumb クラスのインスタンス作成 (シリーズ10、サムネイル最大数(8枚) ) gallery_slidethumb クラスのインスタンス作成 (シリーズ1、サムネイル数thumb1(7枚) ) 以下同様 注) シリーズ10は表示されているサムネイルを 覆って隠すために用意された、黒い矩形 最大枚数を常に表示することにより、 表示されているサムネイルを全て隠す (別途、p101,p102,,,p108のように最大枚数分の 黒い矩形のシンボルを作成しておく) 各メニューについて メニュ矩形の初期アルファー値を0に ロールオーバー時には30に (白いメニュー文字が薄くなる) ロールアウトされたら元の0に |
|
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - -
|
||
| HOME Flash講座総リスト アクションスクリプトの実践的事始め-活用編(9) | ||
![]()