![[ARK-Web SandBox]](image/sandbox.gif "[ARK-Web SandBox]")
- バックアップ一覧
- ソース を表示
- Flash/FlashでJSON形式のデータを読み込む (ActionScript2.0を利用) は削除されています。
- 1 (2007-01-19 (金) 13:36:41)
Flash/FlashでJSON形式のデータを読み込む (ActionScript2.0を利用)?
目次 †
概要 †
- FlashでJSONファイルをパースしてオブジェクト型として返してくれるライブラリがあります。
- これを利用したサンプル
- 時間の都合上、下記の制約があります (とりあえず今回はFlashでJSONをパースして出力することだけを行っています)
- ボックスは直近のアークウェブ ブログから取ってきたものですがリンクさせてません
- 読み込むJSONファイルは固定です
- ボックスはドラッグできません
ソースレビュー †
バージョン †
- 今回利用しているバージョンは、Flash8 ActionScript2.0です。
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の =(イコール)前後にスペース等を入れない！
Flash側のシンボル †
- Flashのシンボルとしては、下記の３つだけ
- box …JSONの1データを表示するボックス
- canvas …ボックスを表示するエリア
- title.jpg …ARK-Webのロゴ
Flash側のフレームアクションのコード †
- asレイヤーの最初のフレームに↓こう書いています
var main = new Main(this); main.loadAndAttachItems(); stop();
- Mainクラスを生成して、loadAndAttachItemsメソッドを呼んでいるだけで、Flashにはその他のコードはありません。
- Mainクラス生成の際に、メインタイムラインを渡しています。これで、Mainクラス内でメインタイムライン上にあるオブジェクトを操作できます。
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変数へ入ります。
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;
- ↓この計算はcanvas_mc内に収まる範囲でランダム、という意味です。
- dataは、JSONで読み込んだ 1件分のデータです。1件にはtitleとauthorとdateがあるので、それぞれboxシンボル内のテキストに代入しています。
- これをforループ分繰り返してボックスを複数表示させているわけです。
まとめ †
- FlashでJSONファイルを読み込むのは、LoadVarsで普通に読み込む
- JSONファイルをパースするのは、JSON.parse("ファイル名") を利用する
