Flashアンケート集計:円グラフバージョン
円グラフを表示するとき、アニメーションで表示します。時計の12時の方向から時計回りに円グラフが現れてきます。投票数の一番遠い項目から順番に現れてくる円グラフです。投票数の一番少ない項目が最後に現れることになります。
時計の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//-- 各項目名 3fname = ["i-mode/携帯対応ページ", "Flash Movie作成", "産婦人科の病気のお話", "perl/ASP", "Biochemistory Simmulation ", "Virtual Hospital/その他"]; 4datanum = []; 5maxnum = fname.length; 6//-- ラジオボタンの初期設定 7for (i = 0; i < maxnum; i++) { 8datanum[i] = 1 ; 9this["radio" + i].label = fname[i]; 10} 11stop (); 12//-- 送信ボタン 13send_btn.tabIndex = 1; 14send_btn.onRelease = function () { 15gotoAndPlay ("send"); 16}; 17//-- 表示ボタン 18disp_btn.tabIndex = 2; 19disp_btn.onRelease = function () { 20gotoAndPlay ("disp"); 21}; 5行目:それぞれの円グラフの色を準備します。
6行目:円グラフ用の配列データを準備します。
10行目:円グラフ用の配列データの初期値を設定します。
2. 「action」レイヤーの「kekka」フレームのスクリプトを以下のように修正します。
1//-- 各項目の値をと最大値を調べる 2eachdata = []; 3max = -999; 4sum = 0; 5for (i = 0; i < maxnum; i++) { 6eachdata[i] = Number (myLoadVars["dat" + i]); 7sum += eachdata[i]; 8tname = "data" + i; 9eval (tname).text = ""; 10if (max < eachdata[i]) { 11max = eachdata[i]; 12} 13//-- 14tname = "vname" + i; 15eval (tname).text = fname[datanum[i]]; 16} 17//-- 棒グラフの初期化 18movechart_mc.per = 0; 19stop (); 20//-- 棒グラフのアニメーション 21movechart_mc.onEnterFrame = function () { 22if (this.per < 100) { 23this.per++; 24for (i = 0; i < maxnum; i++) { 25val = Math.floor (eachdata[i] * 100 / max); 26if (this.per <= val) { 27eval ("bar_" + i).gotoAndStop (this.per); 28} 29if (this.per == val) { 30eval ("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変数に代入します。この項目の%値が今表示している%値より大きいときは、棒グラフを伸ばします。もし同じ値なら、投票数をこの棒グラフに表示します。
Shirley's i-box | Shirley's little-box | Dreamweaver Technique | JAVA Script sample | CSS sample | JAVA Applet sample