xpathを使用したフォトライブラリー(1)

解説

xpathを利用したフォトライブラリーの作成方法をご紹介します。
サンプルを見て分かるように、右のプルダウンを選択するとサムネイルが表れ
クリックするとメインの写真が切り替わる仕組みです。
読み込むxmlファイルによって写真ライブラリを切り替えることが出来ます。

xpathのダウンロード作業

このページの一番下にあるload_006.zipをダウンロードして下さい。

続いてxfactorstudioのサイトからXPath4AS2をダウンロードすると
comというフォルダがダウンロード出来ます。
load_006.zipを解凍したフォルダ内にcomのフォルダを
下記写真のように置いて下さい。

pic.png

 

 

※_rootに下記のscriptを記述
//xpathの実行。
import com.xfactorstudio.xml.xpath.*;
function loadXML(xmlValue) {
foodXmlRoot = new XML();
foodXmlRoot.ignoreWhite = true;
foodXmlRoot.onLoad = function(success:Boolean) {
if (success) {
//XMLのロードが成功したら、下に定義したxpathLoad関数を実行します。
removef_bg();
xpathLoad();
retsu();
} else {
trace("XMLのロードに失敗しました。");
}
};
foodXmlRoot.load(xmlValue);
}
function xpathLoad() {
//ノードを辿って、指定の要素にアクセスする。
var bgUrl:Array = XPath.selectNodes(foodXmlRoot, "photo/jpg/text()");
for (i=0; i=nMax) {
break;
}
}
}
}
//複製したサムネイルを削除
function removef_bg() {
for (i=0; i<30; i++) {
removeMovieClip(eval("this.f_bg"+i));
}
}
//デフォルトで最初のアルバムを表示させる
loadXML("xml/album1.xml");
※リンゲージネームのf_bgのムービークリップに下記scriptを記述
//デフォルトの写真を表示
_root.waku.loadMovie(eval("_parent.bg"+0));
//サムネイル用の写真を表示
waku.loadMovie(eval("_parent.bg"+this.num));
//サムネイルをクリックするとメインの写真を切り替え
this.onPress = function() {
_root.waku.loadMovie(eval("_parent.bg"+this.num));
};
※プルダウンcomboBoxに下記スクリプトを記述
comboBoxのパラメーター設定はサンプルファイルを参考にして下さい。
on (change) {
_parent.loadXML(this.value);
}

サンプルファイルのダウンロード

サンプルファイル

投稿者:

kishiken

企業務めのWEBデザイナーです。