「読んだ本をXMLでまとめてXSLTでスタイリングしてみるの巻」から情報を取得し、グラフ化しています。
package{
import flash.display.Sprite;
import flash.display.Graphics;
import flash.display.MovieClip;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.events.IOErrorEvent;
import flash.events.ProgressEvent;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.text.*;
import flash.media.Sound;
import flash.media.SoundChannel;
import flash.media.SoundTransform;
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;
import flash.geom.Point;
import sketchbook.SketchBook;
import sketchbook.display.SpriteHelper;
import sketchbook.graphics.GraphicsHelper;
//**************************
// /xslt/book/index.xml を基にインフォメーショングラフィックを作成する
//**************************
public class Bookgraph extends Sprite {
var graphCanvas:Sprite;//グラフを生成するエリア
var sideCanvas:Sprite;//ボタンを生成するエリア
var labelCanvas:Sprite;//テキスト情報を生成するエリア
var position:Point;
var category:Array = ["art","business","design","marketing","novel","science","technic","web"];//カテゴリのラベル
var graphColors:Array = [0x341C6F,0x265588,0xD2AA30,0x2595D2,0x84181B,0x26842E,0x3B74E3,0xFF6600];//グラフの色
var graphPI:Array;//塗りつぶす角度
var paint:Array;//塗りつぶす角度を実行時にセット
var radius:Array;//円の半径
var rotate:Number;//円の角度
var meter:Array;//塗りつぶすスプライト
var helper:Array;//塗りつぶすスプライトのgraphics
var count:Array;//各カテゴリが出現したらインクリメント
var percent:Array;//各ラベルのパーセントを表示するテキストフィールド
var button:Array = new Array();//ボタン
var xmlLoader//xml loader オブジエクト
var xmlObj:XML;//book.xml オブジエクト
var xmlReq:URLRequest;
var unit:Array;//年毎のオブジェクト
var year:Array;//年
var bookClass:Array;//書籍カテゴリ毎のオブジェクト
var bookLabels:Array;//書籍名
var bookURI:Array;//書籍の Amazon URI
var timer:Timer;//繰り返しの時間を管理
var loopBool:Boolean = false;
var loopSurv:Number = 0;
var plus:Number = 6;
var yearLabel:TextField;
//**************************
// コンストラクタ関数
//**************************
public function Bookgraph(){
graphCanvas = new Sprite();
addChild(graphCanvas);
position = new Point;
position.x = 250;
position.y = 300;
sideCanvas = new Sprite();
sideCanvas.x = 0;
sideCanvas.y = 0;
addChild(sideCanvas);
labelCanvas = new Sprite();
labelCanvas.x = 580;
labelCanvas.y = 50;
addChild(labelCanvas);
yearLabel = new TextField();
var yfmt:TextFormat = new TextFormat();
yfmt.size = 20;
yearLabel.defaultTextFormat = yfmt;
yearLabel.autoSize = TextFieldAutoSize.LEFT;
yearLabel.mouseEnabled = false;
labelCanvas.addChild(yearLabel);
loadXML();
createPercent();
sideCanvas.addEventListener(MouseEvent.MOUSE_DOWN,function(e:MouseEvent){
var currentNum = e.target.name;
setXMLData(currentNum);
});
}
private function createPercent(){
percent = new Array();
for(var i=0;i<category.length;i+=1){
var cateUnit = new Sprite();
cateUnit.x = 0;
cateUnit.y = i*32+38;
var cateColor = new Sprite();
cateColor.graphics.lineStyle(0,0,0);
cateColor.graphics.beginFill(graphColors[i]);
cateColor.graphics.drawRect(0,0,20,20);
cateColor.graphics.endFill();
cateUnit.addChild(cateColor);
var cateLabel = new TextField();
var fmt:TextFormat = new TextFormat();
fmt.size = 16;
cateLabel.defaultTextFormat = fmt;
cateLabel.text = category[i];
cateLabel.textColor = 0x333333;
cateLabel.x = 30;
cateLabel.y = 2;
cateLabel.autoSize = TextFieldAutoSize.LEFT;
cateLabel.mouseEnabled = false;
cateUnit.addChild(cateLabel);
percent[i] = new TextField();
percent[i].defaultTextFormat = fmt;
percent[i].textColor = 0x333333;
percent[i].x = 90;
percent[i].y = 2;
percent[i].autoSize = TextFieldAutoSize.RIGHT;
cateUnit.addChild(percent[i]);
labelCanvas.addChild(cateUnit);
}
}
//**************************
// XMLの読み込みと unit node Array を取得する関数
//**************************
private function loadXML(){
unit = new Array();
year = new Array();
xmlLoader = new URLLoader();
xmlReq = new URLRequest("/xslt/book/index.xml");
//読み込みが完了したら関数を実行
xmlLoader.addEventListener(Event.COMPLETE, function(){
xmlObj = new XML(xmlLoader.data);
var unitObj = xmlObj.unit;
var yearObj = xmlObj.unit.year;
for(var i:Number=0; i<4; i+=1){
unit.push(unitObj[i]);
year.push(yearObj[i]);
//ボタン生成
var btnLabel = new TextField();
var fmt:TextFormat = new TextFormat();
fmt.size = 16;
btnLabel.defaultTextFormat = fmt;
btnLabel.text = yearObj[i];
btnLabel.textColor = 0xFFFFFF;
button[i] = new Sprite();
var grp:Graphics = button[i].graphics;
grp.lineStyle(0,0x000000,1);
grp.beginFill(0x000000,1);
grp.drawRect(0,0,100,30);
grp.endFill();
button[i].x = 110*i;
button[i].y = 0;
button[i].name = i;
button[i].addChild(btnLabel);
btnLabel.x = 30;
btnLabel.y = 6;
btnLabel.autoSize = TextFieldAutoSize.LEFT;
btnLabel.mouseEnabled = false;
button[i].buttonMode = true;
button[i].mouseChildren = false;
sideCanvas.addChild(button[i]);
}
setXMLData(0);
});
xmlLoader.addEventListener(IOErrorEvent.IO_ERROR, function(){ trace("erroe") });
xmlLoader.load(xmlReq);
}
//**************************
// XML オブジェクトからデータを読み込む関数
//**************************
private function setXMLData(currentNum){
bookClass = new Array();
bookLabels = new Array();
meter = new Array();
helper = new Array();
bookURI = new Array();
radius = new Array();// = new Array();//円の半径
graphPI = new Array();//塗りつぶす角度
count = new Array();//各カテゴリが出現したらインクリメント
for(var j:Number = 0;j<category.length;j+=1){
count[j] = 0;
}
var book = unit[currentNum].book;
var all = book.length()/100;
for(var i=0;i<book.length();i+=1){
bookClass[i] = book[i].attribute("class");
for(var k=0;k<category.length;k+=1){
if(bookClass[i] == category[k]){
count[k] += 1;
}
}
bookLabels.push(book[i].booktitle[0]);
bookURI.push(book[i].url[0]);
}
for(var l=0;l<count.length;l+=1){
graphPI[l] = count[l] / all * 3.6;
radius[l] = (count[l]+10) * 10;
meter[l] = new Sprite();
percent[l].text = Math.ceil(count[l] / all) + "%";
}
yearLabel.text = year[currentNum];
createHGraph();
}
//**************************
// 円を生成する関数を繰り返す
//**************************
private function createHGraph(){
paint = new Array();
for(var j:Number = 0;j<category.length;j+=1){
paint[j] = 0;
}
timer = new Timer(33,100);
timer.addEventListener(TimerEvent.TIMER,surveyGraph);
timer.start();
}
//**************************
// 円を生成する関数
//**************************
private function surveyGraph(evt:TimerEvent):void{
if(loopBool != false){
graphCanvas.removeChild(graphCanvas.getChildAt(0));
}
for(var i:Number = 0;i<meter.length;i+=1){
if(paint[i] <= graphPI[i]){
paint[i] += plus;
}else if(paint[i] >= graphPI[i]){
loopSurv += 1;
}
meter[i].name = "meter"+i;
helper[i] = new SpriteHelper(meter[i]);
helper[i].beginFill(graphColors[i]);
if(i!=0){
rotate = rotate + graphPI[i-1];
}else{
rotate = 0;
}
helper[i].drawPie(position.x, position.y, radius[i], paint[i], rotate);
helper[i].endFill();
graphCanvas.addChild(meter[i]);
}
loopBool = true;
}
}
}
HTML へのリクエストは htmlSQL で中継しています。
package{
import fl.controls.ComboBox;
import fl.data.DataProvider;
import fl.controls.TextArea;
import fl.events.ComponentEvent;
import flash.display.Sprite;
import flash.display.Graphics;
import flash.display.MovieClip;
import flash.display.Loader;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.events.IOErrorEvent;
import flash.net.URLLoader;
import flash.net.URLRequest;
public class ParseHTML extends Sprite {
var urls:Array;
var tag:Array;
var aTa:TextArea;
var comboURL:ComboBox;
var comboHTML:ComboBox;
var pre:String;
public function ParseHTML(){
pre = "http://vosegus.org";
urls = [
{label:"/blog/2010/04/--.html", data:"pre+/blog/2010/04/--.html"},
{label:"/labs/Flash/signal.html", data:"pre+/labs/Flash/signal.html"},
{label:"/blog/2010/06/post-87.html", data:"pre+/blog/2010/06/post-87.html"},
{label:"/labs/Flash/weather.html", data:"pre+/labs/Flash/weather.html"}
];
tag = [
{label:"h1", data:"h1"},
{label:"h2", data:"h2"},
{label:"p", data:"p"},
{label:"a", data:"a"}
];
//コンボボックスを作成
comboURL = new ComboBox();
comboURL.dropdownWidth = 160;
comboURL.width = 160;
comboURL.move(10, 10);
comboURL.prompt = "URLを選択";
comboURL.dataProvider = new DataProvider(urls);
addChild(comboURL);
comboHTML = new ComboBox();
comboHTML.dropdownWidth = 110;
comboHTML.width = 110;
comboHTML.move(205, 10);
comboHTML.prompt = "タグを選択";
comboHTML.dataProvider = new DataProvider(tag);
addChild(comboHTML);
//テキストエリアを作成
aTa = new TextArea();
aTa.move(10,50);
aTa.setSize(500, 200);
aTa.condenseWhite = true;
aTa.htmlText = ‘ここに取得した HTML が出力されます。‘;
addChild(aTa);
button.addEventListener(MouseEvent.MOUSE_DOWN, parse);
}
private function parse(e:Event){
loadXML(comboURL.selectedItem.data,comboHTML.selectedItem.data);
}
private function loadXML(getUrl,tagName){
//リクエスト生成
var loader:URLLoader = new URLLoader();
var req:URLRequest = new URLRequest(pre+"getHTML.php"+"?url="+getUrl+"&tag="+tagName);
//読み込みが完了したら関数を実行
loader.addEventListener(Event.COMPLETE, function(){
//XMLデータの出力
var setXML:XML = new XML(loader.data);
if(tagName == "h1"){aTa.text = setXML.h1;}
if(tagName == "h2"){aTa.text = setXML.h2;}
if(tagName == "p"){aTa.text = setXML.p;}
if(tagName == "a"){aTa.text = setXML.a;}
});
//エラーハンドリング
loader.addEventListener(IOErrorEvent.IO_ERROR, function(){
});
//XMLの読み込み
loader.load(req);
}
}
}