XMLに記述されているサムネイル画像を等間隔に並べるには？

質問

XMLに記述されているサムネイル画像（複数）を帯状に（フイルムのネガの様に）縦に等間隔に並べたいのです。

XMLは各ノードに画像名とサイズが属性として記述されており、
画像サイズは横幅は同じですが、高さがそれぞれ異なるので、単純に箱に入れるわけにはいかないようです。

そこで、
1.伸縮可能な箱を用意する。
2.XMLから、属性[高さ]を取得し、1の伸縮可能な箱に設定
3.2つめからは、箱のy座標を、足していく。
4.これを繰り返す。

帯状に並べた画像には後々上下にスライドをさせたいと思います。
ところが、この方法ですと、3つめ以降が意図しない位置に表示されたり、あるいは表示すらされなかったりします。

どなたか力を貸してください。
後々、この帯状の画像（群）を上下にスライドさせたりもしようと思っています。

Flashは8.0です。

回答No.1

BlurFiltan · ベストアンサー

ご質問では，
具体的に何をどうしたのかを書かれていらっしゃらないため，
なぜ 3つめ以降が意図しない位置に表示されたり表示すらされなかったりするのかはわかりません。

ただ，それとは別の問題で，

> 2.XMLから、属性[高さ]を取得し、1の伸縮可能な箱に設定

この考え方 というか やりかた はまずいと思います。

箱とは何かよくわかりませんが，
仮にムービークリップだとして，
写真をロードしたムービークリップを伸縮させると写真が変形してしまいます。
箱（ムービークリップ）の大きさは変えてはならないのではないでしょうか。

10×10px で作成したムービークリップに
100×100px の JPEG をロードすれば，
そのムービークリップは 100×100px になります。

200×200px で作成したムービークリップに
100×100px の JPEG をロードしても，
そのムービークリップは 100×100px になります。

ムービークリップを変形させなければ，
ムービークリップの大きさは写真に影響を与えません。
変なことをすると歪むだけです。

たとえばこんな感じでできると思いますが↓（例）。

外部XML「data.xml」
---------------------------------------
<album>
<photo nm="img0.jpg" h="50" />
<photo nm="img1.jpg" h="80" />
<photo nm="img2.jpg" h="60" />
<photo nm="img3.jpg" h="70" />
<photo nm="img4.jpg" h="100" />
</album>
---------------------------------------

「data.xml」 及び「img.0.jpg」～「img.4.jpg」と
同じ階層にある SWF フレーム1 のスクリプト
（コピペするだけで用意する物はありません）
---------------------------------------
// x座標 px と y座標 py (左上端座標)の設定
px = 50;
py = 20;
// 写真と写真の間の隙間 sh のサイズを設定
sh = 10;

// XML インスタンスの作成
pXML = new XML();

// 余分な空白の削除
pXML.ignoreWhite = true;

// XMLロード時の動作を定義
pXML.onLoad = function(OK) {

// ロード成功時
if (OK) {
// ノード数の取得
n_len = this.firstChild.childNodes.length;

// i=0→ノード数未満 で i に 1 を加算しながらループ
for (i=0; i<n_len; i++) {
if (i == 0) {
// i が 0 のとき写真の高さを 0 とする
ph = 0;
} else {
// i が 1以上 で 写真の高さに h属性数 を加算
ph += Number(this.firstChild.childNodes[i-1].attributes.h);
}
// nm 属性の取得
pnm = this.firstChild.childNodes[i].attributes.nm;

// 空のムービークリップ p_mc0～ノード数 を作成
_root.createEmptyMovieClip("p_mc"+i, i);
// p_mc0～ノード数 の x 座標を指定
_root["p_mc"+i]._x = px;
// p_mc0～ノード数 の y 座標を指定
_root["p_mc"+i]._y = py+sh*i+ph;

// nm 属性のJPEG をロード
_root["p_mc"+i].loadMovie(pnm);
}
}
};

// 外部XML のロード
pXML.load("data.xml");
---------------------------------------

写真を拡大縮小させるのでしたら，
その場合に限って写真のロードされたムービークリップを拡大縮小させれば良いですが，
そうでないかぎりは，
写真のロードされたムービークリップは拡大縮小しないほうが良いと思います。

以降も同様です。

スライドさせるようにする場合は，
上のように _root に空のムービークリップを入れるのではなく，
「スライドさせる全体のムービークリップ」を作成して，
そのムービークリップの中に「ロード用ムービークリップ」を作成した方が良いかもしれませんが，
その方法をとった場合も，
「スライドさせる全体のムービークリップ」自体を拡大縮小させてはいけません。
写真まで拡大縮小してしまいます。

お礼

ありがとうございます。

外部XMLの構造はご察しの通りで、もう一つ属性（linkURL）が付きます。ここの掲示板でも何度か似たような質問を見ましたが、（BlurFiltanさまが解答されていましたね）複数の画像を並べたものが見当たらなかったので、質問させていただきました。

空の箱というのは表示用のスクリーンで、ここにXMLから読み込んだを表示させています。
実は、質問した後に、表示用のスクリーンを複数個用意して、
それぞれのX座標を0、
Y座標を「自分より上にあるスクリーンの高さの合計」に設定したところ、
意図した場所に配置は出来たのですが、スクリプトがやたらに長くなってしまい尚かつ画像群を上下にスライドする方法がわからず、途方に暮れているところでした。

BlurFiltanさまが書かれた手法でやってみたいと思います。