XMLを読み込んで外部JPGにリンクを貼りたい

質問

アクションスクリプト初心者です。
どうぞよろしくお願いいたします。
アプリケーションはFLASH8(MAC)です。
いろいろ書籍とかWEBとか方法を探してみたのですが、
なかなかXMLとの連動で参考になる記述が見当たりませんので
アドバイスお願いいたします。

やりたい事は、ステージに画像3点配置しその画像クリックで別ページに飛ばしたいのです。
画像指定とリンク先はXMLで外部ファイル化し、更新しやすくしたいのです。
画像のレイアウトは、あらかじめムービークリップをステージ上に配置し、外部JPGと入れ替える形で考えてます。
アクションスクリプトの記述方法とXMLの書き方を
どうぞアドバイスよろしくお願いいたします。

回答No.1

BlurFiltan · ベストアンサー

「プログラム実行の流れ」は，
おおまかには次のようになるようにすれば良いと思います。
（ASコードの行の順ではありません。）

　外部XMLのロード
　　　　↓
　XMLロード完了次第
　画像をMovieClipLoaderにロードし，
　ムービークリップに表示
　　　　↓
　画像がロードされ次第
　画像ムービークリップにリンクを設定

この説明では，
ファイルはすべて同じフォルダにベタ置きするものとします。

　任意のフォルダ
　　　├ ○○.html
　　　├ ○○.swf
　　　├ data.xml
　　　├ aaa.jpg
　　　├ bbb.jpg
　　　└ ccc.jpg

まず XML ですが，
次のような感じで用意すれば良いと思います。
あくまでもサンプル例で，必ずしもこのようにする必要はありません。

-----------------------------------------
<?xml version="1.0" encoding="UTF-8"?>
<file>
<gazou image="./aaa.jpg">./xxx.html</gazou>
<gazou image="./bbb.jpg">./yyy.html</gazou>
<gazou image="./ccc.jpg">./zzz.html</gazou>
</file>
-----------------------------------------

> あらかじめムービークリップをステージ上に配置し

とりあえずそこまで作成して，
その３つのムービークリップにインスタンス名を付けます。

「load_mc0」，「load_mc1」，「load_mc2」
というインスタンス名を付けたことにしておきます。

そして，
「load_mc0」，「load_mc1」，「load_mc2」
が存在するフレームに次のように書けばできあがりです。

-----------------------------------------
// MovieClipLoaderクラスのインスタンスを作成
var myMCL:MovieClipLoader = new MovieClipLoader();
// ロード監視用インスタンスの作成
var mclListener:Object = new Object();

// ロード対象MC画像表示時 の動作を定義
mclListener.onLoadInit = function(targetMC:MovieClip) {
// 変数 n にロード表示したMCの最後の数字を取得
var n:Number = Number(targetMC._name.substr(7, 1));
// ロード表示したMCに lnk という変数を設定
targetMC.lnk = myXML.firstChild.childNodes[n].firstChild.nodeValue;
// 検索されたMCクリック時の動作を定義
targetMC.onRelease = function() {
getURL(this.lnk, "_blank");
};
};

// mclListenerをmyMCLのリスナーとして登録
myMCL.addListener(mclListener);

// - - - - - - - - - -

// XML クラスのインスタンスを作成
var myXML:XML = new XML();
// 余分な空白などを削除する設定にする
myXML.ignoreWhite = true;

// 外部 XML ロード完了時 の動作を定義
myXML.onLoad = function(loadOK) {
// ロード成功時
if (loadOK) {
for (i=0; i<=2; i++) {
// 外部画像のロード
myMCL.loadClip(myXML.firstChild.childNodes[i].attributes.image, _root["load_mc"+i]);
}
}
};

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

一見，
最初に書いた 「プログラム実行の流れ」 とは違って見えるかもしれません。
違うというより，
まるで でたらめ か，逆順に実行される ように書いているように見えるかもしれません。
しかし最初に書いた 「プログラム実行の流れ」 通りの順にちゃんと実行されます。
決して でたらめ に書いたのでも 逆順に実行される ように書いたのでもありません。

XML がロードされる前に XMLがロードされたときの動作定義 をしておく必要がありますし，
画像をロードする前に 画像がロードされたときの動作定義 をするのが普通です。
また，それ以外の変数やデータやインスタンスも先に準備しておくのが普通です。
したがって，上のようなコード順にするのが妥当となります。

// 変数 n にロード表示したMCの最後の数字を取得
var n:Number = Number(targetMC._name.substr(7, 1));

という 奇妙な部分 がありますが，
なぜこのようなものを書いているのかと言うと，
MovieClipLoader に一気に画像などをロードした場合，
ロードされる順が保証されていないからです。

重い画像は当然遅くロードが完了すると思いますし，
その他色々な要因でロードされる画像の順は変わります。
そこで，
ロードされた画像用のXMLデータノードのどれに対応しているかを特定するために n を取得しています。

targetMC._name は 「load_mc?」 です。 「?」 は 0～2 のうちいずれかです。
したがって targetMC._name.substr(7, 1) は，
("load_mc?")._name.substr(7, 1)　と同じ意味になります。
これで 「?」 の文字部分が取得できます。

ムービークリップが 「load_mc0」～「load_mc325」 まであるとするなら，
var n:Number = Number(targetMC._name.substr(7, 3));
と変更してもらえば良いです。
「load_mc0」～「load_mc????」 と予測が付かない場合は，適当に，
var n:Number = Number(targetMC._name.substr(7, 10));
などとしてくださっても問題ありません。

　MovieClipLoader に，
　最初は XML の １つ目のノードの画像をロードし，
　そのロードが完了次第 次のノードの画像をロードし，
　そのロードが完了次第 次のノードの画像をロードする。

というしくみでロードさせるようにすると，この奇妙な部分は不要です。
ただし，この場合，
画像がパラパラに読み込まれて全体のロードには時間が余分にかかります。

また，
MovieClipLoader に画像が読み込まれるたびにその数をカウントし，
カウントが目標数になったときに初めて，
すべての画像MCに for文 で順に getURL を設定するようにしても，
この奇妙な部分は不要になります。
ただし，この場合，
すべての画像のロードが完了しないとすべての画像MCにリンクがかかりません。

なるべく速く３枚の外部画像をロードし，
ロードされる端からリンクを設定するために，この奇妙な部分を使っています。

この辺は時と場合や好みなどで変わります。
またこれ以外にも方法はあります。
１つの技巧的工夫例だと思ってください。

Flash など Web 系で，
他の外部のものをロードするプログラムは，
「常に ロードされる時間 を待って次の動作をさせる」
ということを考慮してプログラムする必要があります。

この辺のロードされる状態が順を追ってイメージできれば簡単にできるのですが，
慣れるまではちょっと難しいかもしれません。

あと上では触れていませんが，
外部データをもとに，そのデータから他の画像などをロードさせる場合，
ファイルパスも間違える可能性が高くなるのでファイル階層を変える場合は注意してください。
基本的にすべては SWF からではな HTML からのパスになります。

上の XML に書いた
　<gazou image="./aaa.jpg">./xxx.html</gazou>
というファイル（ファイルパス）や，
スクリプト中の，
　// 外部XMLのロード
　myXML.load("data.xml");
のパスは，SWFから見たファイルパスではなく HTML から見たファイルパスです。

　任意のフォルダ
　　　├ ○○.html
　　　├ ○○.swf
　　　…　　…

ということで作成しているので，
SWF からのパスも HTML からのパスも同じになっているだけです。

お礼

BlurFiltanさま
とても詳しいアドバスありがとうございます。
貴重な時間を割いて頂き、本当に心より感謝いたします。

簡単にサンプルを作り確認したところ”バッチリ”動きました!!

又、細かく分からない箇所でポストするかもしれませんが
これに懲りずアドバイスお願いいたしますm(_ _)m

本当に助かりましたぁ～

補足

BlurFiltanさま

何とか無事に制作する事ができました。
本当にありがとうございました。