XML管理のフォトギャラリーPart:1
最初に：
この記事はFlash初心者向けです。書いてる本人も初心者です。（笑）
今回作るもの：
xml管理のフォトギャラリー
mp3プレイヤーやflvプレイヤーにも応用が可能だと思われます。
多分、、、、。
言語：
ActionScript2,xml
同じ階層にflaファイル、xmlファイル、新規フォルダ、
フォルダの名前はimageとし中に読み込む画像を入れます。
flaファイルはgallery.fla,xmlファイルはphoto.xmlと名前をつけます。
面倒な方はこちらからダウンロードしてください。
注意：flaファイルはCS3で書き出しています。
今回はflashにxmlを読み込み、画像のパスを抜き出すまでやります。
xmlコード
<images>
<image thum="image/thum1.jpg" photo="image/photo1.jpg" />
<image thum="image/thum2.jpg" photo="image/photo2.jpg" />
<image thum="image/thum3.jpg" photo="image/photo3.jpg" />
<image thum="image/thum4.jpg" photo="image/photo4.jpg" />
<image thum="image/thum5.jpg" photo="image/photo5.jpg" />
<image thum="image/thum6.jpg" photo="image/photo6.jpg" />
<image thum="image/thum7.jpg" photo="image/photo7.jpg" />
<image thum="image/thum8.jpg" photo="image/photo8.jpg" />
<image thum="image/thum9.jpg" photo="image/photo9.jpg" />
<image thum="image/thum10.jpg" photo="image/photo10.jpg" />
</images>
でflashで新規でファイルを開きます。
タイムラインの最初のフレームにActionScriptを書いていきます。
ActionScriptコード
var xml:XML = new XML();
xml.ignoreWhite = true;
xml.onLoad = function() {
nodes = this.firstChild.childNodes;
for (var i = 0; i<nodes.length; i++) {
photoList.push({thum:nodes[i].attributes.thum, photo:nodes[i].attributes.photo});
trace(photoList[i].photo);
}
};
xml.load("photo.xml");
trace(xml.load("photo.xml"));
以下コードの解説
まず、画像のパスを格納する配列を作成
次にxmlオブジェクトを作成
xmlデータの空白のみのノードや改行をアレする、、、。
、、、、、、とりあえず毎回設定します。
詳しくはヘルプを見て下さい。（笑）
nodes = this.firstChild.childNodes;
for (var i = 0; i<nodes.length; i++) {
photoList.push({thum:nodes[i].attributes.thum, photo:nodes[i].attributes.photo}); trace(photoList[i].photo);
trace(photoList[i].photo);
}
};
xmlをロードした後の設定です。
xmlのfirstChild.childNodesまでを変数"nodes"にします。
nodes = this.firstChild.childNodes;
for (var i = 0; i<nodes.length; i++) {
photoList.push({thum:nodes[i].attributes.thum, photo:nodes[i].attributes.photo}); trace(photoList[i].photo);
trace(photoList[i].photo);
}
};
そしてnodesの数だけfor文で回します。
ちなみにnodesってxmlの中のこれの事です→<image thum="image/thum1.jpg" photo="image/photo1.jpg" />
今回は10個ノードがあるので10回ファンクションが繰り返されます。
モチロンxmlのノードを増やせば回数も増えます。
nodes = this.firstChild.childNodes;
for (var i = 0; i<nodes.length; i++) {
photoList.push({thum:nodes[i].attributes.thum, photo:nodes[i].attributes.photo}); trace(photoList[i].photo);
trace(photoList[i].photo);
}
};
でnodesの中のthum=""とphoto=""の中の画像のパスだけ取り出して最初に作った配列"photoListに足していきます。
nodes = this.firstChild.childNodes;
for (var i = 0; i<nodes.length; i++) {
photoList.push({thum:nodes[i].attributes.thum, photo:nodes[i].attributes.photo}); trace(photoList[i].photo);
trace(photoList[i].thum);
}
};
で、トレースします。
結果は以下のようになるはず、、、、
image/thum2.jpg
image/thum3.jpg
image/thum4.jpg
image/thum5.jpg
image/thum6.jpg
image/thum7.jpg
image/thum8.jpg
image/thum9.jpg
image/thum10.jpg
trace(xml.load("photo.xml"));
xmlをロードします。これは最後に書くのがお作法？らしいです。
今回は以上です。
次回はサムネイル画像をフラッシュ上に表示させ、横に並べるまでやります。
トラックバック(0)
このブログ記事を参照しているブログ一覧: XML管理のフォトギャラリーPart:1
このブログ記事に対するトラックバックURL: http://alwaysfinetuning.com/mt/mt-tb.cgi/27
