プログレスバーをつけ、表示枚数を多くした「サムネールギャラリー」を作ってみた。
前回同様、クリックしても大きな画像は出てこないが、ロールオーバー、アウト処理は行っている。
【製作過程】
画面サイズは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になる)

コメントする