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

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

「MovieClipLoaderクラス」を使って、写真ギャラリーサイトによくある「サムネールギャラリー」を作ってみた。
スクリーンをクリックでスタート。ちなみにサムネールをクリックしても大きい画像は出てこない。

FLASH PLAYER

Get Adobe Flash player

【主な流れ】

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」の構造↓)

解説.gif

_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枚しかかからず断念。要するにループの度に上書きされていたようだが、工夫すればいけそうな気がする。

トラックバック(0)

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

コメントする

このブログ記事について

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

ひとつ前のブログ記事は「Yahoo!ドームの時計」です。

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

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