Flashアンケート集計：棒グラフバージョン（Flash6）

Flashアンケート集計：棒グラフバージョン（Flash6）

せっかくのFlashを使ったアンケートですから、HTMLでできるような数値だけの表現ではなく、もう少し面白い表示方法に仕立ててみましょう。棒グラフを表示するとき、アニメーションで表示します。各項目の棒グラフがみんないっせいに伸びてまるで「レースをしているように見える」棒グラフです。投票数の少ない項目から順番に止まっていくので、一番とうっ票数の多い項目が最後まで走り続けることになります。集計結果の表示方法を改造するだけなので、基本的には数値表示バージョンの仕組みがほとんどそのまま使えます。

■　Flashアンケート集計：棒グラフバージョン（Flash6）

アンケート集計のアニメーション表示を開始すると、すべての項目がいっせいに延び始め、投票数に届いたものからストップしていきます。そして、最終的に投票数がトップの項目が最後に止まります。

■　(1)％を表示するグラフの作成

1.　数値表示バージョンのFlashを「barchart.fla」という名前をつけて別名で保存し、[挿入]－[新規シンボル]メニューを選択して、ムービークリップを１つつくり、100％フレームで伸びきる棒グラフ1つ分のムービークリップ「bar_mc」を作ります。

2.　「bar_mc」ムービークリップを開いて、「bar」レイヤーを作成し、1フレーム目で1%、100フレーム目で100％の長さに伸びきる棒グラフを作り、トゥィーンを作成します。

3.　「ActionScript」レイヤーを追加し、1フレーム目にフレームスクリプト「stop();」を記述して、1フレーム目で停止させておきます。

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

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

■　(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
};

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

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

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	};