Flashアンケート集計：円グラフバージョン

Flashアンケート集計：円グラフバージョン

円グラフを表示するとき、アニメーションで表示します。時計の12時の方向から時計回りに円グラフが現れてきます。投票数の一番遠い項目から順番に現れてくる円グラフです。投票数の一番少ない項目が最後に現れることになります。

■　Flashアンケート集計：円グラフバージョン

時計の12時の方向から時計回りに円グラフを現すためには、半円とマスクの組み合わせで表示させます。そのためには、0～50％の右半分の円と、50～100％の左半分の円で分けて考えます。

まず、右半分の0～50％ですが、右半分だけが表示されるようなマスクと半円を用意します。半円をマスクの下に配置して、その下で半円を回転させます。すると、半円が左半分にあるときには全く表示されないので、0％の表示になっていますが、右半分にあるときは50％になります。上半分にあるときは、右の4分の1の円だけが表示されることになりますから、25％の表示です。ですから、左半分から右半分へ半円を回転させて移動すれば、0～50％の円グラフのアニメができます。

■　(1)グラフ用ムービークリップの作成

100フレームで円になる円具が不のムービークリップ「circle_mc」を作ります。

■　(2)円グラフ用ムービークリップの設定

シーン１のメインタイムラインに戻り、「dispkekka」レイヤーの代わりに、レイヤー6つを追加して「circle0」~「circle6」の計7層の円グラフのレイヤーを作ります。「kekka」ラベルのあるフレームにキーフレームを作成し、作成した棒グラフ1つ分のムービークリップ「circle_mc」を１つずつ配置して、それぞれのインスタンス名を「circle0」~「circle6」としておきます。この時点で、各々のインスタンスプロパティの「着色」を使って、それぞれの色を異なった設定にしておきましょう。

■　(3)グラフを管理するムービークリップの設定

グラフのアニメーションを管理するムービークリップを１つ作ります。

[挿入]－[新規シンボル]メニューを選択して、ムービークリップを１つつくり、識別できるように適当な絵を描いて、ステージ上の表示されない位置に配置します。インスタンス名を「movechart_mc」とします。

ActionScriptは後で設定巣rので、このムービークリップの設定はこれで終わりです。

■　(4)ActionScriptの修正

1.　「Action」レイヤーの「main」フレームのスクリプトを修正します。

1
//-- 初期化

2
//-- 各項目名

3
fname = ["i-mode/携帯対応ページ", "Flash Movie作成", "産婦人科の病気のお話", "perl/ASP", "Biochemistory Simmulation ", "Virtual Hospital/その他"];

4
datanum = [];

5
maxnum = fname.length;

6
//-- ラジオボタンの初期設定

7
for (i = 0; i < maxnum; i++) {

8
datanum[i] = 1 ;

9
this["radio" + i].label = fname[i];

10
}

11
stop ();

12
//-- 送信ボタン

13
send_btn.tabIndex = 1;

14
send_btn.onRelease = function () {

15
gotoAndPlay ("send");

16
};

17
//-- 表示ボタン

18
disp_btn.tabIndex = 2;

19
disp_btn.onRelease = function () {

20
gotoAndPlay ("disp");

21
};

5行目：それぞれの円グラフの色を準備します。

6行目：円グラフ用の配列データを準備します。

10行目：円グラフ用の配列データの初期値を設定します。

2.　「action」レイヤーの「kekka」フレームのスクリプトを以下のように修正します。

1
//-- 各項目の値をと最大値を調べる

2
eachdata = [];

3
max = -999;

4
sum = 0;

5
for (i = 0; i < maxnum; i++) {

6
eachdata[i] = Number (myLoadVars["dat" + i]);

7
sum += eachdata[i];

8
tname = "data" + i;

9
eval (tname).text = "";

10
if (max < eachdata[i]) {

11
max = eachdata[i];

12
}

13
//--

14
tname = "vname" + i;

15
eval (tname).text = fname[datanum[i]];

16
}

17
//-- 棒グラフの初期化

18
movechart_mc.per = 0;

19
stop ();

20
//-- 棒グラフのアニメーション

21
movechart_mc.onEnterFrame = function () {

22
if (this.per < 100) {

23
this.per++;

24
for (i = 0; i < maxnum; i++) {

25
val = Math.floor (eachdata[i] * 100 / max);

26
if (this.per <= val) {

27
eval ("bar_" + i).gotoAndStop (this.per);

28
}

29
if (this.per == val) {

30
eval ("data" + i).text = eachdata[i];

31
}

32
}

33
}

34
};

5~16行目：すべての項目のデータを、まずeachdata変数に代入し、それと同時にsum変数に追加して、総投票数を求めます。

18行目：棒グラフは最初0％から表示を開始するので、per変数に0を代入します。

21行目：グラフのアニメーションを管理するムービークリップ「movechart_mc」に1フレームごとに実行する（onEnterFrame）スクリプトを設定しています。

22行目：表示する％が100以下であれば、アニメーションを開始します。

23行目：％を１増やします。

24行目：すべての項目について繰り返します。

25～31行目：この値の％をval変数に代入します。この項目の％値が今表示している％値より大きいときは、棒グラフを伸ばします。もし同じ値なら、投票数をこの棒グラフに表示します。

■　サーバーへのアップロードと実行

1.　作成した「barchart.swf」「barchart.htm」と、前出の「enqdata.cgi」「enqdata.dat」の計４つのファイルを、サーバーにアップロードします。

2.　「enqdata.cgi」のパーミッションを「755」に、「enqdata.dat」のパーミッションを「666」に設定します。

3.　ブラウザで「enquete.htm」にアクセスしてみましょう。アンケートのページが表示されます。

4.　項目を選択して「アンケート送信」ボタンをクリックするか、「グラフを見る」ボタンをクリックすると、アンケートの集計結果が表示されます。

<<<戻る

1	//-- 初期化
2	//-- 各項目名
3	fname = ["i-mode/携帯対応ページ", "Flash Movie作成", "産婦人科の病気のお話", "perl/ASP", "Biochemistory Simmulation ", "Virtual Hospital/その他"];
4	datanum = [];
5	maxnum = fname.length;
6	//-- ラジオボタンの初期設定
7	for (i = 0; i < maxnum; i++) {
8	datanum[i] = 1 ;
9	this["radio" + i].label = fname[i];
10	}
11	stop ();
12	//-- 送信ボタン
13	send_btn.tabIndex = 1;
14	send_btn.onRelease = function () {
15	gotoAndPlay ("send");
16	};
17	//-- 表示ボタン
18	disp_btn.tabIndex = 2;
19	disp_btn.onRelease = function () {
20	gotoAndPlay ("disp");
21	};

1	//-- 各項目の値をと最大値を調べる
2	eachdata = [];
3	max = -999;
4	sum = 0;
5	for (i = 0; i < maxnum; i++) {
6	eachdata[i] = Number (myLoadVars["dat" + i]);
7	sum += eachdata[i];
8	tname = "data" + i;
9	eval (tname).text = "";
10	if (max < eachdata[i]) {
11	max = eachdata[i];
12	}
13	//--
14	tname = "vname" + i;
15	eval (tname).text = fname[datanum[i]];
16	}
17	//-- 棒グラフの初期化
18	movechart_mc.per = 0;
19	stop ();
20	//-- 棒グラフのアニメーション
21	movechart_mc.onEnterFrame = function () {
22	if (this.per < 100) {
23	this.per++;
24	for (i = 0; i < maxnum; i++) {
25	val = Math.floor (eachdata[i] * 100 / max);
26	if (this.per <= val) {
27	eval ("bar_" + i).gotoAndStop (this.per);
28	}
29	if (this.per == val) {
30	eval ("data" + i).text = eachdata[i];
31	}
32	}
33	}
34	};