サムネールギャラリー(2)

| コメント(0) | トラックバック(0)

プログレスバーをつけ、表示枚数を多くした「サムネールギャラリー」を作ってみた。
前回同様、クリックしても大きな画像は出てこないが、ロールオーバー、アウト処理は行っている。

FLASH PLAYER

Get Adobe Flash player

【製作過程】

 画面サイズは452x688。背景は黒。
swfと同階層に「pic/IMG_0059.JPG~IMG_0090.JPG」を設置。

ライブラリにMC「progressbar」を用意する。中には、MC「bar」(112x3)(インスタンス名:bar)をレイヤー1の(0,0)に配置。
さらに、同レイヤーに、静止テキスト「loading...」とダイナミックテキスト「percent」(インスタンス名:percent)をフォントサイズ「10」配置する。
配置が終わったら、ライブラリのMC「progressbar」に対して、リンケージ設定。識別子は「progressbar」。

最後に、以下のコードをメインタイムラインの1フレーム目に記述。

 stop();

//関数「make_mc」定義
function make_mc(i:Number):Void{
 /*初期設定*/
 //写真折り返し枚数設定
 var returnPic:Number=4;
 //サムネールの高さ、幅設定
 var thumb_height:Number=86;
 var thumb_width:Number=113;
 //写真スタートナンバー設定
 var pic_startnum:Number=59;
 
 //「thumb」という名の空のMC作成
 var thumb:MovieClip=_root.createEmptyMovieClip("thumb"+i,i);
 //「thumb」の座標設定
 thumb._x=((i-pic_startnum)%returnPic)*thumb_width;
 thumb._y=Math.floor((i-pic_startnum)/returnPic)*thumb_height;
 //プログレスバーの座標設定
 var syoki:Object={_x:thumb._x,_y:thumb._y+40};
 //プログレスバーMC作成
 var prog:MovieClip=_root.attachMovie("progressbar","progressbar"+i,i*2,syoki);
 //MovieClipLoaderインスタンスを生成
 var mcLoader:MovieClipLoader=new MovieClipLoader();
 var lis:Object=new Object();
 //MovieClipLoader初期設定
 lis.onLoadStart=function(target_mc:MovieClip):Void{
  target_mc._alpha=70;
 }
 //MovieClipLoaderプログレス設定
 lis.onLoadProgress=function(target_mc:MovieClip,nloaded:Number,ntotal:Number):Void{
  var per:Number=Math.floor(nloaded/ntotal*100);//(注意)
  _root["progressbar"+i].bar._xscale=per;
  _root["progressbar"+i].percent.text=per;
 }
 //MovieClipLoaderコンプリート設定
 lis.onLoadComplete=function(target_mc:MovieClip):Void{
  _root["progressbar"+i].onEnterFrame=function():Void{
   this._xscale+=(0-this._xscale)/2;
   if(this._xscale<=1){
    delete this.onEnterFrame;
    this._xscale=0;
   }
  }
 }
 //MovieClipLoader表示設定
 lis.onLoadInit=function(target_mc:MovieClip):Void{
  var scale:Number=Math.floor(120/target_mc._width*100);
  target_mc._xscale=target_mc._yscale=scale;
  //ロールオーバー、アウト処理
  target_mc.onRollOver=function():Void{
   this._alpha=100;
  }
  target_mc.onRollOut=function():Void{
   this._alpha=70;
  }
 }
 //MovieClipLoaderインスタンスにイベントリスナー登録
 mcLoader.addListener(lis);
 
 //キャッシュ対策のための変数生成
  var date:Date=new Date();
  var timer:Number=date.getTime();

 //「thumb」に「jpg」をロード
 mcLoader.loadClip("http://www.ayabin.jp/flashmemo/swf/pic/IMG_00"+i+".JPG",thumb);
}
//関数「make_mc」を実行
for(var i:Number=59;i<91;i++){
 make_mc(i);
}

【まとめ】

表示するサムネールは、前回同様、1600x1200のjpgを、動的かつ相対的に小さくして表示している。
jpgの平均サイズは600k程度だが、枚数が多いためか数枚表示したあと、動かないことが度々あった。
実際にこのようなサイトを作る際には、元の画像とサムネール用の画像を分けて保存したほうがいいかもしれない。そういうわけで、今回、キャッシュ対策は行っていない(変数自体は生成しているが、適用していない)。

注意[コード太字部分]
以下の式では、一見問題ないようだが、意図する結果が得られないので注意。
「var per:Number=Math.floor(nloaded/ntotal)*100;」
(「per」の結果は、0か100になる)

トラックバック(0)

トラックバックURL: http://www.ayabin.jp/mt5/mt-tb.cgi/169

コメントする

このブログ記事について

このページは、webmasterが2009年5月14日 12:00に書いたブログ記事です。

ひとつ前のブログ記事は「動的に深度を操作する」です。

次のブログ記事は「フルフラッシュサイト(4)」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。