Flashに文字入力やボタンなどUIを設定する: 万象酔歩

Flashに文字入力やボタンなどUIを設定する

メモです

FlashのActionScriptを使ってインタラクティブなアプリケーションを作る道筋の基本(部品とプログラムをどのようにして入れるか）を示します。

簡単といえば簡単なことなのですが、どの本を読んでもどうやれば部品を画面に導入できるのかピンときませんでした。ということは、一度出来ても直ぐ忘れる。忘れるともう一度やるのが億劫になる。そこで、各段階の絵で説明

文字入力アプリ:TextInputを使う

＝＝＝　０：コンポーネント窓を出しておく＝＝＝

まず、
[ウィンドウ]-[コンポーネント]
でコンポーネント・ウィンドウを出します。（下図ではアクションもあらかじめ出した状態になっています）

コンポーネント窓がでます。
[UserInterface]を開くと中にTextInputやButtonなどの部品があります。

＝＝＝　１：コンポーネントをステージにドラッグ、インスタンス名を与える＝＝＝

コンポーネント窓からTextInputをステージにドラッグします。
ステージ上のTextInputを選択し、プロパティ上のインスタンス名（ここでは text_1)を設定します。

＝＝＝　２：プログラムを書く＝＝＝

ステージを選択し、アクション-フレーム窓で、当該インスタンス（ここではtext_1) を指定したプログラムを書きます。（アクション-フレーム窓が出ていない場合は[ウィンドウ]-[アクション]で出ます）

このプログラムは、TextInputでenterが押されたら、TextInputの文字列をデバグ用の窓にトレースしています。
タイムラインのフレームにaのマークが付き、そのフレームにプログラムが割り当てられたことが示されます。

＝＝＝　３：試しに動かす＝＝＝

[デバッグ]-[ムービーのデバッグ]を起動

アプリの窓(ムービーの窓）が出る。
テキスト領域に文字列を入れ、enterを押すと、プログラムに従い、入力された文字列がデバグトレース出力に出力されます。

TextInputだけを使った簡単なプログラムを ▼湿った空気は「どの位」軽いかに置きました。AC3ソースもつけています。

ボタン:Buttonを使う

＝＝＝　１：ボタンインスタンスを設定　＝＝＝

TextInputと同じように「コンポーネント」から「ステージ」にドラッグし、プロパティでインスタンス名を設定します。

＝＝＝　２：表示を設定　＝＝＝

[ウィンドウ]->[コンポーネントインスペクタ]で「コンポーネントインスペクタ」を出し、当該ボタンを選択し、「コンポーネントインスペクタ」のラベルを書き換えます。
ボタンの表示に反映されます。

＝＝＝　３：アクションを設定　＝＝＝

ステージを選択し、「アクション-フレーム」を出し、アクションを設定します。

function btn_play_clicked(e:MouseEvent){
   // ...動作を書く...
   }
// ボタンのインスタンス名がbtn_playだとして
btn_play.addEventListener(MouseEvent.MOUSE_DOWN, btn_play_clicked);
// 注意！MouseEvent.CLICKは使うべきではありません！

ボタンを作る

次のような姿のボタンを作ります。