FlashでXMLを活用するメリットとは?

2008年6月4日(水)
高橋 義博

とりあえずXMLファイルをFlashから読み込んでみよう!

 では、次回・次々回で作成していく、「写真スライドショー」で利用するXMLファイルをFlashに読み込んでみたいと思います。XMLファイルはこちらからダウンロード(http://www.thinkit.co.jp/images/article/83/1/8311.zip)できます(8311.zip/0.392 KB)。

 ここでは、Adobe Flash CS3での作業手順を説明します。

 XMLファイルをFlashで読み込むためには、ActionScriptというプログラミング言語を利用します。

 Adobe Flashを起動して、「Flashファイル(AS 2.0)」を新規作成します。新規作成したファイルを「slideShow.fla」という名前で保存します。XMLファイルを読み込むためのActionScriptは「シーン1」レイヤーの「フレーム1」に図3のように記述します。

 まずは、trace()という命令を使い、出力パネルにXMLデータの内容を表示します。

ActionScriptを入力してみよう

 アクションパネルに記載されているActionScriptを確認しながら、XMLファイルを読み込む手順を学習していきましょう。

System.useCodepage = false;

 Flashコンテンツ(SWFファイル)のバージョン6以降で外部ファイルの文字コードの設定が、バージョン5以前の「Shift-JIS」から「UTF-8」に変更されました。そのため、「Shift-JIS」のXMLデータを利用している方の場合は、System.useCodepageの設定を「true」に設定し、「UTF-8」のXMLデータを利用する場合には、「false」を設定してください。本サンプルのXMLデータは「UTF-8」ですので、「flase」が設定されています。

var photo_xml = new XML();

 XMLファイルを読み込むためには、XMLオブジェクトからXMLインスタンスを作成する必要があります。今回は、「photo_xml」という名前のXMLインスタンスを作成します。

photo_xml.ignoreWhite = true;

 読み込んだXMLファイルに改行・空白行・タブなどがありますと誤動作する可能性がありますので、それらを削除します。

photo_xml.onLoad = startSlideShow;

 XMLファイルを読み込んだインスタンスに対して、実行する関数を適用させます。今回は、「startPhoto」という関数を実行します。また、この「onLoad」メソッドの部分がFlash Playerから実行される処理になります。

photo_xml.load("slideShow.xml");

 作成したインスタンス「photo_xml」に外部XMLファイル「slideShow.xml」を読み込ませます。読み込ませるためのメソッドは「load」です。

function startSlideShow ()

 XMLファイルを読み込んだときに実行される処理を{}の中に記述しています。今回は、trace()を利用して、XMLファイルの内容を表示します

 ActionScriptの入力が完了したら、「Ctrl+Enter」を押すと「出力パネル」が表示され、改行やタブなどが削除された状態のXMLファイルの内容を確認できます。本記事のサンプルFlashファイルは、こちらからダウンロード(http://www.thinkit.co.jp/images/article/83/1/8312.zip)できます(8312.zip/5.51 KB)。

 以上が、FlashコンテンツでXMLファイルを読む込むための基本操作になります。

 今回は、XMLファイルのすべての内容を確認しただけですので、次回ではXMLファイルの任意のデータを取得する方法を説明していきます。お楽しみに!

制御機器メーカーでソフト開発やWebマスターの業務を経て、2007年からフリーランスとして、Webサイト制作、Flashコンテンツ制作を行っている。また、WebスクールでWebデザイン、Flash制作の講師などを担当し、経験を生かして幅広い指導を行っている。

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています