PR
図2●今回開発するアプリケーション。難しそうに見えるかもしれませんが案外簡単につくれますよ
図2●今回開発するアプリケーション。難しそうに見えるかもしれませんが案外簡単につくれますよ
[画像のクリックで拡大表示]
図1●フォームアプリケーションを新規開発する際に使う開発環境の画面
図1●フォームアプリケーションを新規開発する際に使う開発環境の画面
[画像のクリックで拡大表示]
図3●コンポーネントなどをフォーム上に配置して画面を作成する
図3●コンポーネントなどをフォーム上に配置して画面を作成する
[画像のクリックで拡大表示]
表2●各コンポーネントに付ける名前
表2●各コンポーネントに付ける名前
[画像のクリックで拡大表示]
図4●コンポーネントの名前やプロパティを設定したところ
図4●コンポーネントの名前やプロパティを設定したところ
[画像のクリックで拡大表示]

コンポーネントを組み合わせて
アプリケーションの画面を作成

 Flashの開発環境をざっと理解したところで,サンプル・アプリケーションを作ってみましょう。こうしたツールは「習うよりも慣れろ」的なところがありますから,ソフトを持っている方はぜひ手を動かして試してみてください。

 ここで開発するのは,「おなまえ」「e-mailアドレス」「主に使用している開発ツール」の3項目を入力して[送信]ボタンを押してもらうという,よくあるアンケート・アプリケーションです(図2[拡大表示])。今回は初めてですから,ボタンを押したときに「おなまえ」欄が空白なら入力を促し,そうでなければお礼の文面を表示する,という極めて簡単な仕様にしました。せっかくFlashを使うのですから,クッキー(画面右の鳥の名前です)のアニメーションを貼り付けてみました(もちろんこれはアプリケーションの仕様として必須というわけではありません)。

 Flashを起動して(図1[拡大表示])の画面を表示させてください。まず,ステージの大きさを決めます*5。メニューから[修正]-[ドキュメント]を選択すると開かれる「ドキュメントプロパティ」ウィンドウで「サイズ」欄に任意の数値を入力します。今回は幅を550px(ピクセル),高さを300pxに設定してください。

 この時点でとりあえずファイルを保存しておきましょう。メニューの[ファイル]-[名前を付けて保存]を選んで現れるダイアログボックスで,「ファイル名」として「sample01.fla」を入力し[保存]ボタンをクリックします。

 次に[スクリーン]パネルで「アプリケーション」を選択してステージ上に表示されるフォームに,[コンポーネント]パネルからコンポーネントを配置していきます(図3[拡大表示])。「おなまえ」「e-mailアドレス」欄にはTextInputコンポーネントを,「主に使用している開発言語」リストボックスにはListコンポーネントを,[送信]ボタン部分にはButtonコンポーネントを配置します。「おなまえ」などフォーム上の文字は,左端に並んだツールからテキストツール(「A」のアイコン)を選んで,適当な場所をクリックして現れる四角形の中に入力します。

 コンポーネントを配置し終えたら,それぞれに名前(インスタンス名)を設定します。Flashではプログラムでコンポーネントを指定する際に,名前を使ってアクセスします。そのため,プログラムで使用するコンポーネントには,開発者が名前を付けておく必要があるのです。名前を付けるには,[プロパティ]パネルを開き,パネル左上の「インスタンス名」欄に任意の名前を入力します。今回は表2[拡大表示]のように各コンポーネントに名前を付けておきましょう。

 次に,各コンポーネントのプロパティを変更することにより,表示する文字列やリストの初期値を設定します。まずボタンを選択し,[プロパティ]パネルの[パラメータ]タブを選択し,label欄に「送信」と入力しましょう(図4[拡大表示])。次はリストボックスです。同じく[パラメータ]タブのlabel欄を選択し,右側に表示される虫眼鏡マークを押します。すると項目入力用の「値」ウィンドウが表示されますから,ウィンドウ左上の「+」ボタンを押してリストの項目を入力していきます。

 次に,少し趣向を変えて,あらかじめ作成してあるアニメーションを,作成中のフォームに取り込みます。日経ソフトウエアのWebサイト(http://software.nikkeibp.co.jp/software/)のダウンロードページに「cookie_fly.fla」というファイルがありますので,ダウンロードしてFlash上で開いてください*6。吹き出しが一つと,クッキーが羽ばたくアニメーションが表示されますね。

 Flashでは,複数のファイルを開くと,画面上部にファイルごとのタブが表示されます。このタブをクリックして,画面を切り換えることができるのです。まず,cookie_fly.flaの画面でクッキーと吹き出しをまとめて選択し*7,メニューから[編集]-[コピー]と選択してコピーします*8

 次に「sample01.fla」と書かれたタブをクリックして先ほどの画面に戻り,メニューから[編集]-[中央にペースト]を選択して貼り付けます*9。位置を調整したら,吹き出し部分に文章を表示できるように,Labelコンポーネントを配置して,cookie_Balloonと名前をつけます。さらに,[プロパティ]パネルでtextの欄に「必要事項を記入して[送信]ボタンを押してね!」と初期値を入力します。

 この時点でいったん,動作を確認してみましょう。メニューで[制御]-[ムービープレビュー]と選択すると「Flashムービーの書き出し中」というメッセージが表示され,しばらくしてプレビュー画面と呼ぶ動作確認用の画面が表示されます。この画面で,きちんとテキストを入力できるか,リストボックスで項目を選択できるか,ボタンを押せるか,などを確認しておきましょう。プレビュー画面で確認が終わったら,画面右上の「×」ボタンを押してプレビュー画面を終了します。


つづく…

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

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