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アンケート集計:円グラフバージョン

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

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

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

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

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

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

グラフのアニメーションを管理するムービークリップを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
};

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行目:%を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