2010-01-13(Wed) 16:56
【AS3.0】外部XMLで作るシンプルなイメージギャラリー
外部XML＆イメージを使用した（若干）柔軟性のある簡単なイメージギャラリーを作成したいと思います。
完成イメージ図はこんな感じです。
左側の小さな水色の画像をクリックすると右側の大きな画像が切り替わるといういたってシンプルなつくりです。
-
まずは表示させるべき画像を作成します。
名称は「m1.gif」～「m9.gif」（サムネイル）と、「b1.gif」～「b9.gif」（大きい画像）にしました。
flaファイルと同階層に「img」という名前のフォルダを作成し、そこに表示させる画像を入れます。 -
XMLファイルも画像と同階層に作成します。
こんな感じです。<?xml version="1.0" encoding="utf-8"?> <data> <img thum="img/m1.gif" src="img/b1.gif">画像1</img> <img thum="img/m2.gif" src="img/b2.gif">画像2</img> <img thum="img/m3.gif" src="img/b3.gif">画像3</img> <img thum="img/m4.gif" src="img/b4.gif">画像4</img> <img thum="img/m5.gif" src="img/b5.gif">画像5</img> <img thum="img/m6.gif" src="img/b6.gif">画像6</img> <img thum="img/m7.gif" src="img/b7.gif">画像7</img> <img thum="img/m8.gif" src="img/b8.gif">画像8</img> <img thum="img/m9.gif" src="img/b9.gif">画像9</img> </data>
文字は表示されないのですが、あとあとのことを考えてとりあえず入れてあります。
「load.xml」で保存します。 -
package { import flash.display.Loader; import flash.display.LoaderInfo; import flash.display.Sprite; import flash.events.MouseEvent; import flash.net.URLLoader; import flash.net.URLRequest; import flash.events.Event; public class Main extends Sprite { //サムネイルの並べる数 var _thumNum:uint; //サムネイルの間隔 var _thumInterval:uint; //XMLから読み込んだデータを入れる配列 var _imgList:Array = new Array(); var _thumList:Array = new Array(); var _urlLoader:URLLoader; //サムネイルが入る配列 var _thum:Array = new Array(); //全部のサムネイルを入れるコンテナ var _thumContainer:Sprite = new Sprite(); //大きい画像を入れるコンテナ var _imgContainer:Sprite = new Sprite(); //現在選択されている画像番号 var _currentNum:int = -1; public function Main() { //初期設定 _thumNum = 3; _thumInterval = 10; _imgContainer.x = 200; //外部XMLファイルの指定 _urlLoader = new URLLoader(new URLRequest("img/load.xml")); // 読み込み完了時に呼び出されるイベント _urlLoader.addEventListener (Event.COMPLETE, XMLloadComp); this.addChild(_thumContainer); this.addChild(_imgContainer); } //XMLロード完了の処理 function XMLloadComp (event:Event):void { var xml : XML = new XML(_urlLoader.data); //XMLのデータを配列に入れる for each (var xmlObj:Object in xml.img) { _imgList.push (xmlObj.@src); _thumList.push (xmlObj.@thum); } //配列の長さだけイメージをロード for (var i:uint = 0; i < _imgList.length; i++ ) { _thum.push(new Sprite()); var thumLoader:Loader = new Loader(); thumLoader.load (new URLRequest(_thumList[i])); _thum[i].addChild(thumLoader); //nameに番号を入れる _thum[i].name = String(i); thumLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumImgloadComp); } } //サムネイルロード完了 function thumImgloadComp(event:Event):void { //該当するサムネイルの番号を取得 var imgNum:int = int(event.target.loader.parent.name); //_thumInterval（間隔）だけ開けてサムネイルを配置 event.target.loader.x = (event.target.width + _thumInterval) * (imgNum % _thumNum); event.target.loader.y = (event.target.height + _thumInterval ) * (int(imgNum / _thumNum)); _thumContainer.addChild(event.target.loader); event.target.loader.name = imgNum; event.target.loader.addEventListener(MouseEvent.CLICK, onThumImg); } //サムネイルクリック function onThumImg(event:Event):void { //クリックされた番号をnumに入れる var num:uint = event.target.name; //現在の画像以外の場合画像をロード if (num != _currentNum) { var imgLoader:Loader = new Loader(); imgLoader.load (new URLRequest(_imgList[num])); imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imgloadComp); _currentNum = num; } } //イメージロード完了 function imgloadComp(event:Event):void { //古い画像の削除（imgContainerの子要素を全て削除） while(_imgContainer.numChildren > 0){ _imgContainer.removeChildAt(0); } //新しい画像の配置 _imgContainer.addChild(event.target.loader); } } }【13～30行目】
プロパティ宣言です。
「_imgList」「_thumList」XMLから読み込んだ文字列を入れる配列。
「_thum」はサムネイルのローダーを入れる配列。
「_imgContainer」大きい画像は一つなのでspriteです。
「_currentNum」はサムネイルを押したときに現在の画像の番号を入れておく変数です。
最初は何も選択されていないので-1にしてあります。
【62行目】
どのサムネイルがクリックされたか判別するためにnameプロパティに配列と同じ番号を入れておきます。
【69行目】
62行目で入れた番号をint型で取り出します。
【56～63行目】
サムネイルのロードです。
一緒にサムネイルも並べてしまった方が簡単なのですが、画像の大きさなども動的取得したかったので、LoaderInfoイベント後に並べてます。
【71～72行目】
ここでサムネイルを並べてます。
サムネイルの並び順などを変更したい場合はこの辺を変えてみてください。
【84～89行目】
クリックされた番号が現在の番号（_currentNum）以外だったらイメージをロードします。
最後に「_currentNum」に現在の番号を入れます。
【93～100行目】
新しい画像を入れる前にいったん古い画像を削除します。
また、画像をフェードして表示するなどのアニメーションをしたい場合この辺りに処理を書けばいいのではないかと思います。
TrackBack URL