FLASHのお勉強 ーアクションスクリプトの実践的事始めー

(63) FLASHフォトビューアー4   2008/3/29
 枚数の多い写真をビューアーで見せたいときに、サムネイルが画面からあふれてしまうことがある。 こんな時に向いている、サムネイルをスクロール可能にするタイプのビューアーが今回のお勉強である。 さらに、拡大写真が表示されたときに、順送りで写真を表示できる機能も付与した。 actionscript 2.0 で作成
SAMPLE
ステージの準備
●550*400、背景色黒のステージ(12fps)を設定
●x=500の位置に、インスタンス名 up_btn、down_btn の二つのボタンを配置し、その間に、スライドバー bar を配置
  (スライドバーの長さは、37.5、移動用ガイド矩形の長さは、240)
●以下のムービークリップ(基準点左上)を作成し、ライブラリーに格納する
  ・サムネイル読み込み用の矩形ムービークリップ(60*45、リンケージ名 cell ) 色は任意
  ・拡大写真読み込み用矩形ムービーークリップ(大きさ、色適当、リンケージ名 screen )
  ・画面マスク用矩形ムービークリップ(500*300、リンケージ名 mask ) 色適当
  ・拡大写真消去ボタン用ムービークリップ(リンケージ名 btn )
  ・拡大写真順送りボタン用(リンケージ名 next_btn、back_btn )
●サムネイル写真(75*56) 40枚(sp1.jpg,,,,,,sp40.jpg)、拡大写真(500*375) 40枚(Lp1.jpg,,,,,,Lp40.jpg)を
  swfファイルと同じフォルダに格納する (フォルダを別に設けた場合は、読み込むときパスを通せばよい)
スクリプト_root、FRAME1に記述
var pic_num = 40;
var x0 = 50;
var y0 = 50;
var row = 5;

attachMovie("screen","screen",200);
screen._x = screen._y=20;
screen._alpha = 0;
attachMovie("mask","mask1",201);
mask1._x = 20;
mask1._y = 30;
attachMovie("mask","mask2",202);
mask2._x = 20;
mask2._y = 20;
mask2._yscale = 120;
mask1._visible = false;
mask2._visible = false;
_root.setMask(mask1);

attachMovie("btn","btn",203);
btn._x = 465;
btn._y = 350;
attachMovie("next_btn","next_btn",204);
next_btn._x = 495;
next_btn._y = 350;
attachMovie("back_btn","back_btn",205);
back_btn._x = 435;
back_btn._y = 350;

for (i=1; i<=pic_num; i++) {
  mc1 = attachMovie("cell", "cell"+i, i);
  mc1._x = x0+80*((i-1)%row);
  mc1._y = y0+60*Math.floor((i-1)/row);
  mc2 = attachMovie("cell", "overcell"+i, 100+i);
  mc2._x = x0+80*((i-1)%row);
  mc2._y = y0+60*Math.floor((i-1)/row);
  mc2._alpha = 0;
  jpg = ("sp"+i+".jpg");
  mc1.loadMovie(jpg);
  mc1._xscale = mc1._yscale=65/75*100;
  mc2.n = i;
  mc2.onRollOver = a;
  mc2.onRollOut = b;
  mc2.onRelease = function() {
    pOrder = this.n;
    c();
  };
}
function a() {
  num = this.n;
  pic = _root["cell"+num];
  pic.onEnterFrame = function() {
    this._xscale += (100-this._xscale)/2;
    this._yscale += (100-this._yscale)/2;
  };
}
function b() {
  pic.onEnterFrame = function() {
    this._xscale += (65/75*100-this._xscale)/2;
    this._yscale += (65/75*100-this._yscale)/2;
  };
}
function c() {
  for (i=1; i<=pic_num; i++) {
    _root["cell"+i]._visible=false;
  }
  if (next_b && pOrder<40) {
    pOrder++;
    next_b = false;
  }
  if (back_b && pOrder>1) {
    pOrder--;
    back_b = false;
  }
  _root.setMask(mask2);
  _root.flag = 0;
  jpgL = "Lp"+pOrder+".jpg";
  screen.loadMovie(jpgL);
  onEnterFrame = function () {
    if (_root.flag == 1) {
      screen._alpha += (0-screen._alpha)/2;
    } else {
      screen._alpha += (100-screen._alpha)/3;
    }
  };

}
btn.onRelease = function() {
  for (i=1; i<=pic_num; i++) {
    _root["cell"+i]._visible=true;
  }
  _root.flag = 1;
  _root.setMask(mask1);
};
next_btn.onRelease = function() {
  next_b = true;
  c();
};
back_btn.onRelease = function() {
  back_b = true;
  c();
};
down_btn.onPress = function() {
  if (bar._y<=270) {
    for (i=1; i<=pic_num; i++) {
      _root["cell"+i]._y -= 10;
      _root["overcell"+i]._y -= 10;
    }
    bar._y += 10;
  }
};
up_btn.onPress = function() {
  if (bar._y>=90) {
    for (i=1; i<=pic_num; i++) {
      _root["cell"+i]._y += 10;
      _root["overcell"+i]._y += 10;
    }
    bar._y -= 10;
  }
};
bar.onPress = function() {
  this.startDrag(true,500,80,500,280);
  onEnterFrame = function () {
    for (i=1; i<=pic_num; i++) {
      _root["cell"+i]._y = y0+60*Math.floor((i-1)/row)-bar._y+80;
      _root["overcell"+i]._y = y0+60*Math.floor((i-1)/row)-bar._y+80;
    }
  };
};
bar.onRelease = function() {
  stopDrag();
  delete onEnterFrame;
};
bar.onReleaseOutside = function() {
  stopDrag();
  delete onEnterFrame;
};

写真枚数
サムネイル1枚目x座標

列数

拡大写真読み込み用スクリーンをステージに
アルファを0に

2種類のマスクをステージに




マスクを非表示に

ステージ全体にマスクをかける

ボタン類をステージに表示(サムネイル表示画面では、マスクの外になるので見えない)








cellを40枚5列に並べ(mc1)、ここにサムネイル写真をロードし、さらにそれぞれ上に
cell(overcell)をのせる(mc2) これは、ロールオーバーやリリースに反応させるため












ロールオーバーで
scaleを100に





ロールアウトで
scaleを65/75*100に






サムネイルを非表示にする


サムネイルがクリックされたとき、nextボタンやbackボタンがクリックされたときに拡大写真を読み込み表示させる関数








screenに拡大写真を表示



写真表示にFadeIn、FadeOut効果




サムネイルを表示

消去ボタンがリリースされたら


nextボタン



backボタン




downボタンがPressされたら、cell(サムネイル)と、overcellを同時に1クリック当たり10pixずつ下に送る
















スライドバー
ドラッグ可領域指定

スライドバーの動きに連携させて、全てのサムネイルとovercellを移動させる




スライドバーがリリースされたときと、領域外にマウスが出たときに、ドラッグを不可にする

スクリプトの説明
mask1、mask2
  サムネイル表示部の上下を非表示にするために、mask1をかける。拡大写真を表示させるときには、
  大きなmask2を使う
mc1._x = x0+80*((i-1)%row);  mc1._y = y0+60*Math.floor((i-1)/row);
  (i-1)を列数で割った余りに間隔をかけてx座標とし、割った数の切り下げ値に間隔をかけてy座標とする
if (next_b && pOrder<40) { pOrder++; next_b = false; }
  nextボタンがリリースされるたびに、写真番号を1増やして(次の写真を)表示
 
flashirohaサイト内  Web全体 
HOME   お勉強総リスト