【XML連携】円グラフの描画 [Edit]
投稿者：むらけん | 投稿日：2006.10.06 | [制作全般]
現場で使えそうシリーズ。外部XMLと連携した円グラフの描画です。
XMLを読み込んで表示しています。最初、全てスクリプトで作ってみたのですが、描画にやたらCPUを使わせてしまって重かったので、3.6度(1%分）の扇型MCを作りそれをattachMovieで使いまわすことで動作を軽くすることが出来ました。
XML側では、要素名、グラフの色、数値を指定できるようにし、FLA側では初期設定部分で、円グラフの半径、中心点、影つけるかを設定できるので割りと使い回しが効くと思います。但し、実際使う場合はXMLのキャッシュ対策は必要です。
//==========
//data.xml
<?xml version="1.0" encoding="utf-8"?>
<items>
<item id="1" name="Firefox" num="53" color="ffffff" />
<item id="2" name="safari" num="23" color="dddddd" />
<item id="3" name="InternetExplorer" num="13" color="cccccc" />
<item id="4" name="NetscapeCommunicator" num="9" color="aaaaaa" />
<item id="5" name="Opera" num="2" color="888888" />
</items>
Fla
01| //=====================
02| //初期設定
03|
04| centerX=Stage.width/2-140;//円グラフ中心X座標
05| centerY=Stage.height/2;//円グラフ中心Y座標
06| R=100;//円グラフ半径
07| shadowFlag=true;//影つけるかどうか
08|
09| //=====================
10| //XML読み込み
11|
12| //System.useCodepage=true;//XMLがutf-8なら不要
13| my_xml = new XML();
14| my_xml.ignoreWhite=true;
15| my_xml.load("http://www.muraken.biz/f-site/data.xml");
16| my_xml.onLoad=function(){
17| firstObj = my_xml.firstChild.childNodes;
18| countMax = firstObj.length;
19| xmlData = new Array();
20| for(i=0;i<=countMax-1;i++){
21| xmlData[i] = new Object();
22| xmlData[i].name = firstObj[i].attributes.name;//要素名
23| xmlData[i].num = Number(firstObj[i].attributes.num);//数字
24| xmlData[i].color = firstObj[i].attributes.color;//色
25| }
26| drawing();
27| }
28|
29| //======================
30| //描画スクリプト
31|
32|
33|
34| function drawing(){
35| _mc._x=centerX;
36| _mc._y=centerY;
37| ang=0;
38| for(i=0;i<countMax;i++){
39| for(ii=0;ii<xmlData[i].num;ii++){
40| maskobj="maskparts"+ang;
41| obj="parts"+ang;
42| attachMovie("parts",maskobj,ang+1000);
43| attachMovie("parts",obj,ang+1);
44| maskobj=eval(maskobj);
45| obj=eval(obj);
46| obj.setMask(maskobj);
47| with(maskobj){
48| _height=R;
49| _xscale=_yscale;
50| _x=-1000;
51| _y=-1000;
52| _rotation=Math.round(3.6*ang);
53| }
54| my_color=new Color(obj);
55| my_color.setRGB("0x"+xmlData[i].color);
56| with(obj){
57| _height=R;
58| _xscale=_yscale;
59| _x=centerX;
60| _y=centerY;
61| _rotation=Math.round(3.6*ang);
62| }
63| ang++;
64| }
65| }
66| ang=0;
67| onEnterFrame=animation;
68| }
69|
70| function animation(){
71| maskobj=eval("maskparts"+ang);
72| maskobj._x=centerX;
73| maskobj._y=centerY;
74| ang++;
75| if(ang>=100){
76| delete onEnterFrame;
77| if(shadowFlag && anime==1){
78| with(shadow_mc){
79| _alpha=30;
80| _width=R*2+3;
81| _height=R*2+3;
82| _x=centerX+1;
83| _y=centerY+1;
84| }
85| }
86| txtanime();
87| }
88| }
89| function txtanime(){
90| for(i=0;i<countMax;i++){
91| obj=eval("output"+i);
92| my_color=new Color(obj.box.colorBox);
93| my_color.setRGB("0x"+xmlData[i].color);
94| obj.box.txtBox.text=xmlData[i].num+"%…"+xmlData[i].name;
95| obj.play();
96| }
97| }
ソースはこちらから落としてください。
▽免責事項▽
このサンプルを使用した場合、または使用できなかった等のいかなる損害も、
制作者 むらけん 及び F-site は、その責を負いません。
ご自身の責任においてご使用ください。
この記事へのトラックバック
-
● OpenSocial での Flash 埋め込み（2009年06月26日 13:05）
スパイスラボ神部です。 今後モバイル版も含め、OpenSocial アプリの半分以上が Flash ベースになることは容易に予想されますので、ちょっとその...
from ラボブログ
この記事へのコメント
●1.これいいですね（2010年10月29日 11:01）
上手く使えるかなぁ～
●2.やむ（2010年10月29日 11:03）
いいですね！