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を使ったアンケート集計を作ってみましょう。CGIのプログラムはできていますし、項目を選択するラジオボタンの仕組みもできていますから、データを送信する所と集計結果を表示する所を作れば、アンケート集計は実現できます。

■ Flashアンケート集計:数値表示バージョン(Flash6)

Flash側での動作は、大きく分けて4つのブロックに分けて考えることができます。

1
main
最初にアンケートの質問を表示したり選択肢のラジオボタンを表示するところ

2

send
送信ボタンが押された時に、データの送信処理を行うところ
3
disp
表示ボタンが押された時に、データの受信のみを行うところ
4
kekka
CGIからの受信が終了した時に、そのデータを表示するところ

■ 作成

最初に、アンケート結果を数値で表示するバージョンを作成します。
アンケートの内容は、次のような質問にします。

質問:患者さんとのコミュニケーションにおけるコメディカルスタッフの位置づけ

選択肢
@ 患者さんの緊張を緩和させる
A  患者さんの相談に乗っている
B  特定の分野のみ説明している
C  医師と同等に説明している
D  患者さん意思を医師に伝える役をしている
E  特に役割はない
F  その他

1. [修正]−[ドキュメント]でムービーのサイズは550×400px位にしておきます。

2. レイヤーを5つ追加して、計6層のレイヤーを用意します。フレームは22フレームまで用意します。

ラベル名
説明
label ラベル用レイヤー
action ActionScript用レイヤー
dispkekka アンケート結果表示用レイヤー
button ボタン用レイヤー
radio ラジオボタン用レイヤー
back 背景用レイヤー

3. 「label」レイヤーで、1フレーム、6フレーム、11フレーム、16フレーム目にキーフレームを作成し、「main」「send」「disp」「kekka」というラベルを設定します。

4. 「back」レイヤーに背景の絵を描いて、静止テキストを挿入します。

5. 「radio」レイヤーにラジオボタンを表示します。先ほど作ったラジオボタンコンポーネントを利用しましょう。
 「radibottun.fla」を開き、[ウィンドウ]−[ライブラリ]メニューでライブラリを表示します。その状態で作成中のファイルを[ウィンドウ]メニューの一番下から選択すると、作成中の画面上に 「radibottun.fla」のライブラリが表示されます。

6. その状態でライブラリからコンポーネントをドラッグ&ドロップすると、今作成中のファイルにコンポーネントがコピーされて使えるようになります。「ezRadioGroup」を1つと「ezRadioButton」を7つドラッグ&ドロップします。
  「ezRadioGroup」には、「RadioGroup1」という名前をつけておきます。「kekka」フレームから後ろではラジオボタンの表示は必要ありませんので、空白キーフレームを挿入しておきます。背景の絵も追加します。

7. ボタンシンボルを作成し、「button」レイヤーに2つ配置します。
 送信用ボタンに「send_btn」、表示用ボタンに「disp_button」というインスタンス名を付けます。「kekka」フレームから後ろではボタンの表示は必要ありませんので、空白キーフレームを挿入しておきます。

8. 「dispkekka」レイヤーの「kekka」フレームに、kekkaを表示するテキストボックスを作ります。テキストツールに「ダイナミックテキスト」のテキストボックスを1つ作り、変数名を「dispkekka」とします。「線の種類」を[複数行]に設定しておきます。

9. 「Action」レイヤーの「main」フレームに、以下のスクリプトを記述します。

1
//-- 初期化
2
//-- 各項目名
3
fname = ["i-mode/携帯対応ページ", "Flash Movie作成", "産婦人科の病気のお話", "perl/ASP", "Biochemistory Simmulation ", "Virtual Hospital/その他"];
4
maxnum = fname.length;
5
//-- ラジオボタンの初期設定
6
for (i = 0; i < maxnum; i++) {
7
datanum[i] = 1 ;
8
this["radio" + i].label = fname[i];
9
}
10
stop ();
11
//-- 送信ボタン
12
send_btn.tabIndex = 1;
13
send_btn.onRelease = function () {
14
gotoAndPlay ("send");
15
};
16
//-- 表示ボタン
17
disp_btn.tabIndex = 2;
18
disp_btn.onRelease = function () {
19
gotoAndPlay ("disp");
20
};

3行目:fnameという変数に各選択項目の表示内容を用意しています。
   「Arrayオブジェクト=newArray();」は、「Arrayオブジェクト=[];」と略して記述することできます。ここでは、「fname=[];」と記述しています。

4行目:項目の数をmaxnumに代入しています。

6〜8行目:ラジオボタンの各項目に、表示内容を表示しています。

12行目:[TAB]キーを押すとこのボタンが1番目に選択されるように設定しています。

13〜15行目:この送信用ボタンが押されたら、「send」フレームにジャンプします。

17行目:[TAB]キーを押すとこのボタンが2番目に選択されるように設定しています。

18〜20行目:この表示用ボタンがクリックされたら、「disp」フレームにジャンプします。

10. 「action」レイヤーの「send」フレームに、以下のスクリプトを記述します。

1
//--アンケート送信オブジェクト
2
mySendVars = new LoadVars();
3
mySendVars.selectdata = RadioGroup1.getValue();
4
//--アンケート受信オブジェクト
5
myLoadVars = new LoadVars();
6
myLoadVars.onLoad = function(success) {
7
gotoAndStop("kekka");
8
}
9
//--アンケート送受信
10
mySendVars.sendAndLoad("enqdata.cgi",myLoadVars,"POST");
11
stop();

2行目:アンケート送信用のオブジェクトを作ります。

3行目:CGIに送信する「selectdata」という変数に、ラジオボタン司令塔の「Radiogroup1」の「getValue関数」で取得した、今選択されている値を代入します。

5行目:データ受信用のオブジェクトを作ります。

6〜8行目:データの読み込みが完了したら、「kekka」フレームにジャンプします。

10行目:データの送受信を開始します。

11行目:データの読み込みが完了するまで、このフレームで停止します。

11. 「action」レイヤーの「disp」フレームに、以下のフレームスクリプトを記述します。

1
//--アンケート受信オブジェクト
2
myLoadVars = new LoadVars();
3
myLoadVars.onLoad = function(success) {
4
gotoAndStop("kekka");
5
}
6
//--アンケート受信
7
myLoadVars.load("enqdata.cgi");
8
stop();

2行目:データ受信用のオブジェクトを作ります。

3〜5行目:データの読み込みが完了したら、「kekka」フレームにジャンプします。

7行目:データの送受信を開始します。

8行目:データの読み込みが完了するまで、このフレームで停止します。

12. 「action」レイヤーの「kekka」フレームに、以下のスクリプトを記述します。

1
//-- 各項目の値を表示する
2
dispkekka = "";
3
for (i = 0; i < maxnum; i++) {
4
dispkekka += fname[i] + ":" + myLoadVars["dat" + i] + newline;
5
}
6
stop ();

2行目:結果を表示するテキストの「despkekka」をクリアします。

3〜5行目:すべての項目について、処理を繰り返します。
    「項目名」と「アンケート結果の数値」と「改行」をdispkekkaに追加していくので、すべての項目を繰り返すことで一覧表が表示されます。

13. これで、Flashアンケート集計はできあがりです。
   [ファイル]−[名前をつけて保存...]メニューを選択し、「enquete.fla」という名前で保存します。

14. [ファイル]−[パブリッシュ]メニューを選択して、「enquete.swf」「enquete.htm」の2つのファイルを書き出します。

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

1. 作成した「enquete.swf」「enquete.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