« ◇「フォルダよし」指さし確認の勧め | トップページ | ♪パッヘルベルのカノン切り貼り演奏機 »

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)ボタンシンボルを作る ===

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




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

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

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

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

|

« ◇「フォルダよし」指さし確認の勧め | トップページ | ♪パッヘルベルのカノン切り貼り演奏機 »

トラックバック


この記事へのトラックバック一覧です: Flashに文字入力やボタンなどUIを設定する:

« ◇「フォルダよし」指さし確認の勧め | トップページ | ♪パッヘルベルのカノン切り貼り演奏機 »