この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に
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
このサイトで使用しましたflashソフトはflash mx 2004年版(Flash Japan)- flash8 及び FlashCS3-2007年版です。 flash講座(フラッシュ講座)は、Yoshioka氏(通称、ひげ親父)による制作です。 コツコツと作られたflash素材(flashアニメ、スクリプト)はユーザーの方により保存変更され動画flash(動画フラッシュ)や携帯flash(待受flash)として利用されて来ました。
 氏は、flashスクリプトについての学習を、パソコン塾講師活躍中に始められ、独立した今も続けておられます。   macromedia flashソフトは新しくadobe flash時代に入りましたので、これを機会にflash学習サイトを「flash講座1234」としてリニューアルいたしました。 引き続きご愛顧承りますよう、よろしくお願いいたします。                                                                            (by Hiraoka)
HOME   Flash講座総リスト   アクションスクリプトの実践的事始め-活用編(9)