PR
図2●今回作成するマルチページ方式のアンケート・フォーム。上のタブをクリックすると表示内容が変わる。それぞれのページを1枚のスライドとして作成している
図2●今回作成するマルチページ方式のアンケート・フォーム。上のタブをクリックすると表示内容が変わる。それぞれのページを1枚のスライドとして作成している
[画像のクリックで拡大表示]
図3●3枚のスライドを用意し,それぞれに名前をつける
図3●3枚のスライドを用意し,それぞれに名前をつける
[画像のクリックで拡大表示]
図4●「プレゼンテーション」スライドに配置する文字とコンポーネント
図4●「プレゼンテーション」スライドに配置する文字とコンポーネント
[画像のクリックで拡大表示]
表1●各スライドに配置するコンポーネントの種類と数,コンポーネントにつける名前(インスタンス名)
表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

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


Flashムービーをスライドに取り込んで表示させる

 スライドやフォームは,今回の記事のように直接コンポーネントを配置して表示させる以外にも,すでに作成してあるFlashムービー・ファイル(拡張子がswfのファイル)を読み込んで表示させることが可能です。この仕組みを利用すると,Flashムービーを次々に切り換えながら表示するテレビ・チャンネルのようなアプリケーションを簡単に作成できます。

 作成方法はいたって簡単。[スクリーン]パネルから任意のスライド,またはフォームを選択して,[プロパティ]パネルでパラメータ・タブを選び,contentPathの欄に読み込みたいFlashムービー・ファイルのパスを入力するだけです。

 ただし,タイムラインを持つムービーの場合,デフォルトの設定では読み込んだムービーがすぐに再生されてしまいます。テレビ・チャンネルらしく見せるには,スライドやフォームのイベント(ムービー読み込み完了時に発生するcomplete,表示時に発生するrevealなど)と,ムービーの再生/停止を制御するメソッド(play,stop)を使うとよいでしょう。具体的には任意のスライドに

on(complete){content.stop();}
on(reveal){content.play();}

と記述すれば,一時停止状態で待機し,表示時に再生するといった制御が可能です。スライドを非表示にした時に発生するhideイベントを使って停止・巻き戻し処理(content.gotoAndStop(1);など)を行うのも効果的です。


つづく…

吉岡 梅(よしおか うめ)
山梨県在住のソフトウエア開発者。

◆下記のURLから,サンプル・プログラムを無償ダウンロードできます
http://software.nikkeibp.co.jp/software/download/down04c.html#200405