Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 reference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial
ASP ADO リファレンス | PHP関数リファレンス | MySQL関数リファレンス

Flashアンケート集計:棒グラフバージョン(Flash6)

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

■ Flashアンケート集計:棒グラフバージョン(Flash6)

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

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

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

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

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

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

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

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

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行目:%を1増やします。

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

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

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

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

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

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

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

<<<戻る

Shirley's i-box | Shirley's little-box | Dreamweaver Technique | JAVA Script sample | CSS sample | JAVA Applet sample