目次 †

blogs=[
{"title" : "Universal PDF XSS：【重要】Adobe Readerを8にアップグレードしましょう", "author" : "進地", "date" : "2007/01/18 12:03"},
{"title" : "Web 2.0的アプリのセキュリティ：機密情報にJSONPでアクセスするな", "author" : "進地", "date" : "2007/01/11 07:50"},
{"title" : "AkismetによるPukiWikiへのspam(スパム)防止機能", "author" : "小沼", "date" : "2006/12/21 15:15"},
{"title" : "クチコミメディアにおけるサイトの影響力を知るツール「Webスカウター(Web scouter）」", "author" : "八木", "date" : "2007/01/11 07:50"},
{"title" : "Web 2.0化が進む旅行情報サイトの現状", "author" : "薄井", "date" : "2006/12/18 07:50"}
]

構造としては、[...]配列内に、{"key":"value"}オブジェクトが配置してある形です。
- 注意点：最後の{...}の後ろに ,(カンマ)は付かない！
- 注意点：blogsの =(イコール)前後にスペース等を入れない！

↑

[edit]

Flash側のシンボル †

Flashのシンボルとしては、下記の３つだけ

box …JSONの1データを表示するボックス
canvas …ボックスを表示するエリア
title.jpg …ARK-Webのロゴ

↑

[edit]

Flash側のフレームアクションのコード †

asレイヤーの最初のフレームに↓こう書いています
```
var main = new Main(this);
main.loadAndAttachItems();
stop();
```

Mainクラスを生成して、loadAndAttachItemsメソッドを呼んでいるだけで、Flashにはその他のコードはありません。
Mainクラス生成の際に、メインタイムラインを渡しています。これで、Mainクラス内でメインタイムライン上にあるオブジェクトを操作できます。

↑

[edit]

MainクラスのloadAndAttachItemsメソッド †

次に、MainクラスのloadAndAttachItemsメソッドを見ていきます。

	/**
	 * データ(JSON)を読み込んでアタッチする.
	 */
	public function loadAndAttachItems() {
		var main:Main = this;
		
		// JSONをロードする
		var jsonData:LoadVars = new LoadVars();
		jsonData.load ("sample.txt");
		jsonData.onLoad = function(success:Boolean) {
			if (!success) {
				main.getMtl().gotoAndStop('Load_faild');
				return ;
			}
			// データをパースして、リンケージに書き出したboxにアタッチする
			var list:Object = JSON.parse(this.blogs);
			for (var i = 0 ; i < list.length ; i++) {
				var oneRecord = list[i];
				var xPos = Math.floor(Math.random() * (720 - 230 - 10 + 1)) + 10;
				var yPos = Math.floor(Math.random() * (500 - 100 - 10 + 1)) + 10;
				main.attachItem(main.getCanvas(), "box", "box_"+i+"_mc", xPos, yPos, oneRecord);
			}
		}
	}

まず、JSONファイルをロードするわけですが、単純にすると↓このようになります。

var jsonData:LoadVars = new LoadVars();
jsonData.load ("sample.txt");
jsonData.onLoad = function(success:Boolean) {
	// JSONロード後の実装
}

なんてことないですね。単にLoadVarsでファイルを読んでいるだけです。
ファイルを読み込めたら、↓この部分でJSON形式をパースさせてFlashのオブジェクト形式に変換させています。
```
var list:Object = JSON.parse(this.flashVar);
```

変換後の値がlist変数へ入ります。

↑

[edit]

MainクラスのattachItemメソッド †

データをパースして、リンケージに書き出したboxにアタッチするの部分は、MainクラスのattachItemメソッドを見てみましょう。

	/**
	 * アタッチする.
	 *
	 * @param MovieClip   アタッチするタイムライン
	 * @param String      リンケージに書き出されたシンボル名
	 * @param String      インスタンス名
	 * @param Number      x座標
	 * @param Number      y座標
	 * @param Object      JSONで読み込んだ 1データ
	 */
	public function attachItem(timeline:MovieClip, linkageName:String, instanceName:String, xPos:Number, yPos:Number, data:Object) {
		var box_mc:MovieClip = timeline.attachMovie(linkageName, instanceName, timeline.getNextHighestDepth());
		box_mc._x = xPos;
		box_mc._y = yPos;
		box_mc.title_txt.text  = data.title;
		box_mc.author_txt.text = data.author;
		box_mc.date_txt.text   = data.date;
	}

　引数は↓このように渡していました (上のloadAndAttachItemsメソッドより)

main.attachItem(main.getCanvas(), "box", "box_"+i+"_mc", xPos, yPos, oneRecord);

timelineは、Flash側のメインタイムライン上に配置してあるcanvas_mcオブジェクトを渡しています。
- つまり、このオブジェクト上にboxシンボルをアタッチします。
linkageNameは、boxシンボルをリンケージとして書き出したboxを指定しています。
instanceNameは、box_i_mc(iはforループで増加)を指定していました。
xPosとyPosは、canvas_mcにアタッチした後の座標を指定しています。
- ↓この計算はcanvas_mc内に収まる範囲でランダム、という意味です。
```
var xPos = Math.floor(Math.random() * (720 - 230 - 10 + 1)) + 10;
var yPos = Math.floor(Math.random() * (500 - 100 - 10 + 1)) + 10;
```

dataは、JSONで読み込んだ 1件分のデータです。1件にはtitleとauthorとdateがあるので、それぞれboxシンボル内のテキストに代入しています。

これをforループ分繰り返してボックスを複数表示させているわけです。

↑

[edit]

まとめ †

FlashでJSONファイルを読み込むのは、LoadVarsで普通に読み込む
JSONファイルをパースするのは、JSON.parse("ファイル名") を利用する

投稿者竹村 | パーマリンク

tag: Flash?, JSON

↑

[edit]

バージョン †

今回利用しているバージョンは、Flash8 ActionScript2.0です。

↑

[edit]

JSONデータ †

今回表示させているJSONデータは、直近のアークウェブブログから取ってきたものです。

blogs=[
{"title" : "Universal PDF XSS：【重要】Adobe Readerを8にアップグレードしましょう", "author" : "進地", "date" : "2007/01/18 12:03"},
{"title" : "Web 2.0的アプリのセキュリティ：機密情報にJSONPでアクセスするな", "author" : "進地", "date" : "2007/01/11 07:50"},
{"title" : "AkismetによるPukiWikiへのspam(スパム)防止機能", "author" : "小沼", "date" : "2006/12/21 15:15"},
{"title" : "クチコミメディアにおけるサイトの影響力を知るツール「Webスカウター(Web scouter）」", "author" : "八木", "date" : "2007/01/11 07:50"},
{"title" : "Web 2.0化が進む旅行情報サイトの現状", "author" : "薄井", "date" : "2006/12/18 07:50"}
]

構造としては、[...]配列内に、{"key":"value"}オブジェクトが配置してある形です。
- 注意点：最後の{...}の後ろに ,(カンマ)は付かない！
- 注意点：blogsの =(イコール)前後にスペース等を入れない！

↑

[edit]

Flash側のシンボル †

Flashのシンボルとしては、下記の３つだけ

box …JSONの1データを表示するボックス
canvas …ボックスを表示するエリア
title.jpg …ARK-Webのロゴ

↑

[edit]

Flash側のフレームアクションのコード †

asレイヤーの最初のフレームに↓こう書いています
```
var main = new Main(this);
main.loadAndAttachItems();
stop();
```

Mainクラスを生成して、loadAndAttachItemsメソッドを呼んでいるだけで、Flashにはその他のコードはありません。
Mainクラス生成の際に、メインタイムラインを渡しています。これで、Mainクラス内でメインタイムライン上にあるオブジェクトを操作できます。

↑

[edit]

MainクラスのloadAndAttachItemsメソッド †

次に、MainクラスのloadAndAttachItemsメソッドを見ていきます。

	/**
	 * データ(JSON)を読み込んでアタッチする.
	 */
	public function loadAndAttachItems() {
		var main:Main = this;
		
		// JSONをロードする
		var jsonData:LoadVars = new LoadVars();
		jsonData.load ("sample.txt");
		jsonData.onLoad = function(success:Boolean) {
			if (!success) {
				main.getMtl().gotoAndStop('Load_faild');
				return ;
			}
			// データをパースして、リンケージに書き出したboxにアタッチする
			var list:Object = JSON.parse(this.blogs);
			for (var i = 0 ; i < list.length ; i++) {
				var oneRecord = list[i];
				var xPos = Math.floor(Math.random() * (720 - 230 - 10 + 1)) + 10;
				var yPos = Math.floor(Math.random() * (500 - 100 - 10 + 1)) + 10;
				main.attachItem(main.getCanvas(), "box", "box_"+i+"_mc", xPos, yPos, oneRecord);
			}
		}
	}

まず、JSONファイルをロードするわけですが、単純にすると↓このようになります。

var jsonData:LoadVars = new LoadVars();
jsonData.load ("sample.txt");
jsonData.onLoad = function(success:Boolean) {
	// JSONロード後の実装
}

なんてことないですね。単にLoadVarsでファイルを読んでいるだけです。
ファイルを読み込めたら、↓この部分でJSON形式をパースさせてFlashのオブジェクト形式に変換させています。
```
var list:Object = JSON.parse(this.flashVar);
```

変換後の値がlist変数へ入ります。

↑

[edit]

MainクラスのattachItemメソッド †

データをパースして、リンケージに書き出したboxにアタッチするの部分は、MainクラスのattachItemメソッドを見てみましょう。

	/**
	 * アタッチする.
	 *
	 * @param MovieClip   アタッチするタイムライン
	 * @param String      リンケージに書き出されたシンボル名
	 * @param String      インスタンス名
	 * @param Number      x座標
	 * @param Number      y座標
	 * @param Object      JSONで読み込んだ 1データ
	 */
	public function attachItem(timeline:MovieClip, linkageName:String, instanceName:String, xPos:Number, yPos:Number, data:Object) {
		var box_mc:MovieClip = timeline.attachMovie(linkageName, instanceName, timeline.getNextHighestDepth());
		box_mc._x = xPos;
		box_mc._y = yPos;
		box_mc.title_txt.text  = data.title;
		box_mc.author_txt.text = data.author;
		box_mc.date_txt.text   = data.date;
	}

　引数は↓このように渡していました (上のloadAndAttachItemsメソッドより)

main.attachItem(main.getCanvas(), "box", "box_"+i+"_mc", xPos, yPos, oneRecord);

timelineは、Flash側のメインタイムライン上に配置してあるcanvas_mcオブジェクトを渡しています。
- つまり、このオブジェクト上にboxシンボルをアタッチします。
linkageNameは、boxシンボルをリンケージとして書き出したboxを指定しています。
instanceNameは、box_i_mc(iはforループで増加)を指定していました。
xPosとyPosは、canvas_mcにアタッチした後の座標を指定しています。
- ↓この計算はcanvas_mc内に収まる範囲でランダム、という意味です。
```
var xPos = Math.floor(Math.random() * (720 - 230 - 10 + 1)) + 10;
var yPos = Math.floor(Math.random() * (500 - 100 - 10 + 1)) + 10;
```