「MovieClipLoaderクラス」を使って、写真ギャラリーサイトによくある「サムネールギャラリー」を作ってみた。
スクリーンをクリックでスタート。ちなみにサムネールをクリックしても大きい画像は出てこない。
【主な流れ】
swfと同階層に「gallerypic」というフォルダをつくり、任意の大きさの画像を9枚置く。
それをFLASH側で、100x100のサムネールに変更し、ロードが完了したものから順に表示していく。
【製作過程】
画面サイズは300x300。背景は黒。
100x100のムービークリップ「load_mc」(インスタンス名:load_mc)を用意。それをステージに配置して、シンボル化する。名前は「thumb」。ライブラリに生成された「thumb」を開くと、先ほどの「load_mc」がレイヤー1に配置されているので、さらにレイヤーを追加し、そこにライブラリから「load_mc」をレイヤー1と同座標で配置する(インスタンス名:curtain)。レイヤー2にマスク設定。
さらにレイヤーを追加し、フレームアクション(1フレーム目)に「this.curtain._height=1;」を設定し、ライブラリの「thumb」に対してリンケージ設定をする(識別子:thumb)。
(ムービークリップ「thumb」の構造↓)

_rootに戻って、1フレーム目に以下のアクションを記述。
swfと同階層に「gallerypic」フォルダを作り、その中に写真9枚を用意する。画像名は「0.JPG」から「8.JPG」とする。
for(var i:Number=0;i<9;i++){
//動的ムービークリップ「thumb」の座標
var syoki:Object={_x:(i%3)*100,_y:Math.floor(i/3)*100};
//ムービークリップ「thumb」を動的配置
var _mc:MovieClip=_root.attachMovie("thumb","thumb"+i,i,syoki);
//「MovieClipLoader」インスタンス生成
var mcLoader:MovieClipLoader=new MovieClipLoader();
var lis:Object=new Object();
//ロードしたSWFの第1フレームアクション設定
lis.onLoadInit=function(target_mc:MovieClip):Void{
//写真の縦を100pxとしたときの、スケール値を取得
var scale:Number=Math.ceil(100/target_mc._height*100);
target_mc._xscale=target_mc._yscale=scale;
//「thumb」内に設置したマスクムービークリップ「curtain」を操作
target_mc._parent.curtain.onEnterFrame=function():Void{
this._height+=(100-this._height)/10;
if(this._height>=99){
delete this.onEnterFrame;
this._height=100;
}
}
}
//キャッシュ対策のための変数生成
var date:Date=new Date();
var timer=date.getTime();
mcLoader.addListener(lis);
mcLoader.loadClip("http://www.ayabin.jp/flashmemo/swf/gallerypic/"+i+".JPG?time="+timer,_mc.load_mc);
}
【まとめ】
「MovieClipLoaderインスタンス.loadClip」の2番目の引数「表示させる(ターゲット)ムービークリップ」は、イベントハンドラの引数「target_mc:MovieClip」に相当する。したがって、イベントハンドラ内で、それ以外のムービークリップを操作したい場合は、「target_mc」からの相対的なパスを設定する必要がある(参照、上記太字部分)。
MTで「MovieClipLoaderインスタンス.loadClip」を使用する場合、呼び出すURLは、絶対パスでなければならない模様。
(失敗)「thumb」と同様に「load_mc」をマスクとして「attachMovie」で配置し、「setMask」で動的にマスクをかけようとしたが、最後の1枚しかかからず断念。要するにループの度に上書きされていたようだが、工夫すればいけそうな気がする。

コメントする