Flashアンケート集計:棒グラフバージョン(Flash6)
せっかくのFlashを使ったアンケートですから、HTMLでできるような数値だけの表現ではなく、もう少し面白い表示方法に仕立ててみましょう。棒グラフを表示するとき、アニメーションで表示します。各項目の棒グラフがみんないっせいに伸びてまるで「レースをしているように見える」棒グラフです。投票数の少ない項目から順番に止まっていくので、一番とうっ票数の多い項目が最後まで走り続けることになります。集計結果の表示方法を改造するだけなので、基本的には数値表示バージョンの仕組みがほとんどそのまま使えます。
アンケート集計のアニメーション表示を開始すると、すべての項目がいっせいに延び始め、投票数に届いたものからストップしていきます。そして、最終的に投票数がトップの項目が最後に止まります。
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//-- 各項目名 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}; 4行目:棒グラフ用の配列データを準備します。
8行目:棒グラフ用の配列データの初期値を設定します。
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