Flashに文字入力やボタンなどUIを設定する
メモです
FlashのActionScriptを使ってインタラクティブなアプリケーションを 作る道筋の基本(部品とプログラムをどのようにして入れるか) を示します。
簡単といえば簡単なことなのですが、どの本を読んでも どうやれば部品を画面に導入できるのかピンときません でした。ということは、一度出来ても直ぐ忘れる。忘れる ともう一度やるのが億劫になる。 そこで、各段階の絵で説明
文字入力アプリ:TextInputを使う
=== 0:コンポーネント窓を出しておく ===
まず、
[ウィンドウ]-[コンポーネント]
でコンポーネント・ウィンドウを出します。(下図ではアクションも
あらかじめ出した状態になっています)

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

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

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

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

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

TextInputだけを使った簡単なプログラムを ▼湿った空気は「どの位」軽いかに置きました。AC3ソースもつけています。
ボタン:Buttonを使う
=== 1:ボタンインスタンスを設定 ===
TextInputと同じように「コンポーネント」から「ステージ」に ドラッグし、プロパティでインスタンス名を設定します。
=== 2:表示を設定 ===

[ウィンドウ]->[コンポーネントインスペクタ]で「コンポーネント
インスペクタ」を出し、当該ボタンを選択し、「コンポーネント
インスペクタ」のラベルを書き換えます。
ボタンの表示に反映されます。
=== 3:アクションを設定 ===
ステージを選択し、「アクション-フレーム」を出し、アクションを設定 します。
function btn_play_clicked(e:MouseEvent){ // ...動作を書く... } // ボタンのインスタンス名がbtn_playだとして btn_play.addEventListener(MouseEvent.MOUSE_DOWN, btn_play_clicked); // 注意!MouseEvent.CLICKは使うべきではありません!
ボタンを作る
次のような姿のボタンを作ります。
![]() |
![]() |
![]() |
これらはPhotoShopで作成し、gif化したものです。
このボタンを使った記事を ▼パッヘルベルのカノン切り貼り演奏機に於いてあります。
=== (1)画像をライブラリに取り込む ===
[ファイル]-[読み込み]-[ライブラリに読み込み]で画像ファイルを読み込みます。



=== (2)ボタンシンボルを作る ===
[挿入]-[新規シンボル]で新たなシンボルを作成する。


"アップ"のマスを選択し、ライブラリから画像をステージにドラッグする。

"オーバー"のマスに空白のキーフレームを設定する

ライブラリからマウス・オーバーの画像をステージにドラッグする。

同様にマウス・ダウンもセットする。

| 固定リンク