Flash入門
第5回 マルチページ形式アプリを作ってみよう

図2●今回作成するマルチページ方式のアンケート・フォーム。上のタブをクリックすると表示内容が変わる。それぞれのページを1枚のスライドとして作成している

[画像のクリックで拡大表示]

図3●3枚のスライドを用意し，それぞれに名前をつける

[画像のクリックで拡大表示]

図4●「プレゼンテーション」スライドに配置する文字とコンポーネント

[画像のクリックで拡大表示]

表1●各スライドに配置するコンポーネントの種類と数，コンポーネントにつける名前（インスタンス名）

[画像のクリックで拡大表示]

マルチページ形式のアンケートを作ってみよう

　スライドとフォームの違いがわかったところで，スライドプレゼンテーション形式のアプリケーションを作成してみましょう。今回は，矢印キーで次々とスライドを表示させていく，というのよりは，もう少し凝った感じがするアプリケーションです。具体的には，ページ単位に表示内容を切り換えながら必要な項目を入力してもらう「マルチページ形式のアンケート」を作成します（図2[拡大表示]）。

　まず，メニューで[ファイル]-[新規]と選択して，表示されるダイアログボックスでスライドプレゼンテーションを選んで開発画面を表示させたら，適当な名前を付けて保存します。次に[スクリーン]パネル上部の「+」ボタンを使って新規スライドを2枚追加して，合計3枚のスライドを用意します。そして，それぞれのスライドの名前のところをダブルクリックして「info_slide」「question_slide」「present_slide」に変更します（図3[拡大表示]）＊4。

　引き続き，[スクリーン]パネルで「プレゼンテーション」を選択し，画面左端の[ツール]の中から「テキストツール」を使って「アンケートにご協力をお願いします」と記述し，「矩形ツール」を使って適当な大きさの四角形を一つ配置します（図4[拡大表示]）。次にマルチページらしくみせるために，四角形の上部にButtonコンポーネントをタブ風に三つ配置します＊5。さらに，アンケートの結果を送信する処理のためのButtonコンポーネントを四角形の下に配置します。各Buttonコンポーネントの「インスタンス名」は，[プロパティ]パネルを使ってそれぞれ，info_btn，question_btn，present_btn，submit_btnに変更しておきます。同時に，[プロパティ]パネルのパラメータ・タブにあるlabelプロパティの値を変更して，ボタンに表示する文字列も変えておきましょう（図4）。

　次に，[スクリーン]パネルからinfo_slideを選択します。このとき，先ほど作成した「プレゼンテーション」画面がそのまま表示されていることに気づかれるでしょう。実は，スライドプレゼンテーションでは，上位の階層（親の階層）のスライドの内容に，個々の下位の階層のスライド（子のスライド）の内容を重ね合わせて表示する仕組みになっています。ただし，同時に表示される子のスライドは，前述したように1枚だけです。

　この性質を利用し，親の階層（ここでは「プレゼンテーション」）に共通で使用するコンポーネントや文字や絵を配置し，個別に表示するコンポーネントや文字を子の階層（ここではinfo_slide）に配置するようにすれば，効率よく画面を作成できます＊6。

　仕組みが理解できたところで，info_slideに図2(a)のように，文字とTextInputコンポーネントを二つ配置します。TextInputコンポーネントのインスタンス名はそれぞれ，myName，myEmailとします。

　同様に，question_slide，present_slideに，図2(b)(c)のようにListコンポーネントや文字を配置しましょう。Listコンポーネントに項目を追加するには，対象のリストを選択し，[プロパティ]パネルのパラメータ・タブ内のlabelsプロパティを編集します。各コンポーネントには表1のようにインスタンス名を付けておきます。異なるスライドの同じ位置に文字やコンポーネントを貼り付けたい場合には，まず元となる対象を選択し，[編集]-[コピー]（または[ctrl]+[c]）でコピーします。次にコピー先のスライドを選択し，[編集]-[同じ位置にペースト]（または[ctrl]+[shift]+[v]）で貼り付けた後に，表示する文字列やコンポーネントの内容，インスタンス名などを修正すると，簡単に位置をそろえられます。

　基本的にはこれで画面は完成ですが，せっかくFlashを使うですから，見た目も気にしたいですよね。info_slide，question_slide，present_slideの各スライド上のボタンと四角形の継ぎ目に，ボタンやフォームの内部と同色の四角を矩形ツールで記述して配置するなどしてマルチページらしく見えるように工夫してください＊7。

　ここまでできたら，メニューから[制御]-[ムービープレビュー]と選択して，プレビュー画面で実行してみましょう。キーボードの左右の矢印キーを押すと，表示するスライドが順番に切り換わることを確認できます。また，各スライドのコンポーネントに値を入力したり選択した後にほかのスライドを表示し，元のスライドに戻ると，入力・選択した項目が保持されていることがわかります。確認を終えたら，右上の「×」ボタンをクリックしてプレビュー画面を閉じておいてください。