[AS2] 基礎相簿 (FLASH 8檔案)

[AS2] 基礎相簿 (FLASH 8檔案)
以「10張小圖示按鈕,點選後見大圖」為起點,建構一組基礎相簿
1. 元件庫中先建置小圖示圖框(thumbnail),和大圖框(showBigPhoto)影片元件,並設定連結識別名稱
2. 以第一影格的AS2程式碼來建構這基礎相簿, 舞台上就看不到任何元件實體.
3. 圖檔在SWF的外部, 小圖和大圖的載入都會有下載百分比的預載功能, 第2次瀏覽因為有暫存,預載畫面百分比數字大概就看不到了. 但可以用Flash的預覽功能裡的模擬下載,了解預載功能與狀態

SWF瀏覽






第一影格AS2
//第一個小圖示位置與寬高
var iniX = 60; //第一個小圖示的位置x座標
var iniY = 40; //第一個小圖示的位置y座標
var thumbW:Number = 51; //小圖示寬度
var thumbH:Number = 51; //小圖示高度
var picNum:Number = 10; //外部圖檔數量
//外部圖檔之檔名陣列,設定檔名
var pic:Array = new Array();
for (var j:Number = 1; j<=picNum; j++) {
 pic[j] = "p"+j+".jpg";
}
//從元件庫附加大圖顯示區showBigPhoto,設定其位置,寬高
var showBigPhoto:MovieClip = this.attachMovie("showBigPhoto", "showBigPhoto", this.getNextHighestDepth());
showBigPhoto._x = 248; //大圖框位置x座標
showBigPhoto._y = 60;  //大圖框位置y座標
var bigW = showBigPhoto._width; //將大圖框寬度指定給bigW
var bigH = showBigPhoto._height; //將大圖框高度指定給bigH
//載入小圖示之空白圖框
for (var i:Number = 0; i  var j = i+1;
 var thumbMc:MovieClip = new MovieClip();
 this.attachMovie("thumbnail", "thumb"+j, this.getNextHighestDepth());
 thumbMc = eval("thumb"+j);
 thumbMc.flag = j;
 if (thumbMc.flag<(Math.round(picNum/2)+1)) {
  thumbMc._x = iniX;
  thumbMc._y = iniY+(thumbMc.flag-1)*60;
 } else {
  thumbMc._x = iniX+60;
  thumbMc._y = iniY+((thumbMc.flag-1)-Math.round(picNum/2))*60;
 }
 //載入外部圖檔
 loadPhoto();
}
function loadPhoto() {
 //
 var mcLoader:MovieClipLoader = new MovieClipLoader();
 //
 var listener:Object = new Object();
 //小圖示載入進度
 listener.onLoadProgress = function(target:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void  {
  var percent = Math.round(bytesLoaded/bytesTotal*100);
  if (percent<100) {
   target._parent.per.text = Math.round(bytesLoaded/bytesTotal*100);
  } else {
   target._parent.per.text = "";
  }
 };
 //***設定外部圖檔載入小圖示後之寬與高***
 listener.onLoadInit = function(target:MovieClip):Void  {
  target._width = thumbW;
  target._height = thumbH;
 };
 //*******************************************************
 //
 mcLoader.addListener(listener);
 //***載入小圖
 mcLoader.loadClip(pic[thumbMc.flag], thumbMc.thumbContainer);
 //大圖載入
 var bigLoader:MovieClipLoader = new MovieClipLoader();
 var bigListener:Object = new Object();
 //大圖載入進度
 bigListener.onLoadProgress = function(bigTarget:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void  {
  var bigPercent = Math.round(bytesLoaded/bytesTotal*100);
  if (bigPercent<100) {
   bigTarget._parent.per.text = Math.round(bytesLoaded/bytesTotal*100);
  } else {
   bigTarget._parent.per.text = "";
  }
 };
 //***設定大圖載入後之寬高尺寸***
 bigListener.onLoadInit = function(bigTarget:MovieClip):Void  {
  bigTarget._width = bigW;
  bigTarget._height = bigH;
 };
 //
 bigLoader.addListener(bigListener);
 //***按下小圖示載入外部圖檔至大圖的圖框內
 thumbMc.onRelease = function() {
  bigLoader.loadClip(pic[this.flag], showBigPhoto.showBigContainer);
 };
}

FLA下載