この講座は,flashソフトを用いてflashアニメをスクリプトで制作し無料で公開したものです">
この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に落としておく
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
このサイトで使用しました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講座総リスト   アクションスクリプトの実践的事始め-活用編(7)