サムネイル付きフォトギャラリー

前回追加したような自動遷移や切り替えエフェクトは付いてません。

左側にサムネイルが付いてて、クリックすると右側にその写真が表示されるアレです。
今回のは元写真を縮小してサムネイルにするタイプではなく、サムネイル用の画像を別に用意するバージョンにしました。

またダラダラ長くてすみません。

XMLはこんな感じ。

<?xml version="1.0" encoding="utf-8"?>

<date>
	<photoset img="img/00.jpg" thumb="img/t00.png" txtArea="コメント01"></photoset>
	<photoset img="img/01.jpg" thumb="img/t01.png" txtArea="コメント02" ></photoset>
	<photoset img="img/02.jpg" thumb="img/t02.png" txtArea="コメント03" ></photoset>
	<photoset img="img/03.jpg" thumb="img/t03.png" txtArea="コメント04" ></photoset>
	<photoset img="img/04.jpg" thumb="img/t04.png" txtArea="コメント05" ></photoset>
	<photoset img="img/05.jpg" thumb="img/t05.png" txtArea="コメント06" ></photoset>
</date>

actionscript3.0

// Tweensyライブラリ読み込み

import com.flashdynamix.motion.Tweensy;

import com.flashdynamix.motion.TweensyTimeline;

// Colorクラスの読み込み

import fl.motion.Color;

//htmlから受け渡されたmyVarの読み込み

var flashVars:Object = this.loaderInfo.parameters;

var myVar:String = flashVars['myVar'];
var thumBoard_mc:MovieClip;

thumBoard_mc = new MovieClip();
var myXML:XML;

var i:int; //次・戻るボタン用の変数

var ti:int; //サムネイルボタン用の変数

var photoLength:int;

var comboXML:String = myVar; //htmlから受け渡された変数
var a_URL:URLRequest = new URLRequest("photo.xml");

var xmlLoader:URLLoader = new URLLoader();

xmlLoader.load(a_URL);
var imgLoader:Loader = new Loader();

var myLoadObject:MovieClip = new myLoading();
var thumLoader:Loader = new Loader();

var thumSet:MovieClip = new thumBoard();




// ***** XMLがロードされる度に行われる処理 *****

xmlLoader.addEventListener(Event.COMPLETE, xComplete); //XMLの読み込みが終わったら実行

function xComplete(event:Event):void {
  XML.ignoreWhitespace = true; // 文字化けしないように空白行を削除

  myXML = new XML(xmlLoader.data);

  

  i = 0; 

  photoLength = (myXML.photoset.length() -1); //フォトセットに何枚写真が入ってるか
//  初期表示の写真

  xLoadImage(); //imgLoaderに新しい画像を読み込む

  imgLoader.x = 0;

  imgLoader.y = 0;

  var cTrans1:ColorTransform = new ColorTransform(1,1,1,0,0,0,0,0); //アルファを０で読み込む

  imgLoader.transform.colorTransform = cTrans1;

  

// テキスト表示ですよ

  txtArea.text = String(myXML.photoset[i].@txtArea);
// ローディング表示

  var myLoadObject:MovieClip = new myLoading();

  board_mc.addChild(myLoadObject);

  myLoadObject.x = 380;

  myLoadObject.y = 270;

// 「読み込み中」が点滅するTweensy

  var ct:ColorTransform = myLoadObject.transform.colorTransform;

  ct.alphaMultiplier = 0;

  var myRepeat:TweensyTimeline = Tweensy.to(myLoadObject.transform.colorTransform, ct, 0.5, null, 0, myLoadObject);

  myRepeat.repeatType = TweensyTimeline.YOYO;

  myRepeat.repeats = -1;

// 次の画像の読み込みが終わったらアルファを１に戻して、画像を表示＆「読み込み中」を削除する

  imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, doComplete);

  function doComplete(eventObject:Event):void {

    var ct:ColorTransform = imgLoader.transform.colorTransform;

    ct.alphaMultiplier = 1.0;

    Tweensy.to(imgLoader.transform.colorTransform, ct, 0.3, null, 0, imgLoader);

    imgLoader.contentLoaderInfo.removeEventListener(Event.COMPLETE, doComplete);

    board_mc.removeChild(myLoadObject);

  }


// サムネイルの実行セット。枚数分繰り返す。

  for(ti = 0; ti <= photoLength; ti++) {

    xThum();

  }

  addChildAt(thumBoard_mc, 1);

}




//imgLoaderに新しい画像を読み込む

function xLoadImage():void {

  var imgURL:URLRequest = new URLRequest(myXML.photoset[i].@img);

  imgLoader.load(imgURL);

  board_mc.addChild(imgLoader);

}
// TweensyでimgLoaderを白くする

function  xToWhite():void {

  var ct:ColorTransform = imgLoader.transform.colorTransform;

  ct.redOffset = 230;

  ct.greenOffset = 230;

  ct.blueOffset = 230;

  Tweensy.to(imgLoader.transform.colorTransform, ct, 0.3, null, 0, imgLoader);

}
// TweensyでimgLoaderが白くなったのを元に戻す

function xToOriginal():void {

  var ct:ColorTransform = imgLoader.transform.colorTransform;

  ct.redOffset = 0;

  ct.greenOffset = 0;

  ct.blueOffset = 0;

  Tweensy.to(imgLoader.transform.colorTransform, ct, 0.3, null, 0, imgLoader);

}






//************* サムネイル関連 ************
function xThum():void { 

  var thumURL:URLRequest = new URLRequest(myXML.photoset[ti].@thumb);

  thumLoader = new Loader();

  thumLoader.load(thumURL);

  thumSet = new thumBoard(); //ライブラリに用意していたサムネイルサイズの空MC。
  thumSet.addChild(thumLoader); 

 

//例のサムネイルが並べる部分。x=20,y=40の位置に、横(90px＋右margin:10px)縦(90px＋下margin10px）で、横二列で並べています。ああ分かりにくい。

  thumSet.x = (ti % 2)*100 + 20; 

  thumSet.y = Math.floor(ti / 2)*100 + 40;

  

  thumLoader.name = String(ti); //インスタンス名を付与！

  thumSet.buttonMode = true; //ボタン機能付与、カーソルが手型になる

  thumSet.addEventListener(MouseEvent.MOUSE_UP, xThumClick); //クリックイベントを付与
  thumBoard_mc.addChild(thumSet); //何枚もバラバラ状態のサムネイルを1セットにするため突っ込む。

// ↑今回はホントはいらないかもだけど、xmlの切り替えやサムネイルを入れ替える時なんかに必要になる…気がする。

}


//サムネイルをクリックしたら行う処理セット

function xThumClick(eventObject:MouseEvent):void {

  var target = DisplayObject(eventObject.target); //クリックした画像をターゲットに認定。

  trace(target.name);

  xToWhite(); //imgLoaderを白くする

  

  i = Number(target.name); //ここで次・戻るボタン用の変数「i」に、サム用の「ti」を代入しないとずれる。
// テキスト表示

  txtArea.text = String(myXML.photoset[i].@txtArea);


// ローディング表示

  var myLoadObject:MovieClip = new myLoading();

  board_mc.addChild(myLoadObject);

  myLoadObject.x = 380;

  myLoadObject.y = 270;

  

  var ct:ColorTransform = myLoadObject.transform.colorTransform;

  ct.alphaMultiplier = 0;

  var myRepeat:TweensyTimeline = Tweensy.to(myLoadObject.transform.colorTransform, ct, 0.5, null, 0, myLoadObject);

  myRepeat.repeatType = TweensyTimeline.YOYO;

  myRepeat.repeats = -1;


  var intervalId:uint = setTimeout(xWait, 120); //0.12秒後に

//次の画像をimgLoaderに読み込みなおす

  function xWait(){

    var imgURL:URLRequest = new URLRequest( myXML.photoset[target.name].@img);

    imgLoader.load(imgURL);

    board_mc.addChild(imgLoader);

    

    imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, doComplete);

    

    function doComplete(eventObject:Event):void {

      xToOriginal(); //白くなったのを元に戻す

      imgLoader.contentLoaderInfo.removeEventListener(Event.COMPLETE, doComplete);

      board_mc.removeChild(myLoadObject);

    }
    trace("MemoryUsage : "+Math.round(System.totalMemory/1024)+"KByte");

  }

}
this.stop();

大佐さん、どうですかね？

「んにゃっ、トウモロコシのひげうまいよ？」

そうですか。