UIコンポーネント ActionScript3.0 Flash CS3

UIコンポーネント（User Interface Component）

　UIコンポーネントとはFlashに付属しているボタン、リスト、カラーピッカーなどの部品の事です。ここではUIコンポーネントを使用するにあたっての基本を説明します。

UIコンポーネント使用に関しての基礎

　UIコンポーネントを使用するにはコンポーネントの場所、コンポーネントのプロパティの設定など、いくつか覚える事があります。どれも重要ですので覚えてください。

コンポーネントパネル
ステージに追加
ライブラリに追加
プロパティ
パラメータ

コンポーネントパネル

　UIコンポーネントを使用するにはボタン、リスト、ラジオボタンなど各コンポーネントの一覧が表示されるコンポーネントパネルを開きます。

　Ctrl + F7 キー (Windows) または Command + F7 キー (Macintosh) を押して下のコンポーネントパネルを開きます。コンポーネントパネル内にはButtonやCheckBoxなど部品が並んでいます。
UIコンポーネント

ステージに追加

　コンポーネントをステージに追加する方法を説明します。コンポーネントをステージに追加した時点でそのコンポーネントはライブラリに追加されます。

・コンポーネントパネル内のButtonを選択したらステージへドラッグ&ドロップしてButtonを追加します。（Button項目をダブルクリックしてもステージへ追加可能です。）
ボタン選択

・上記の操作を行ってステージを見るとButtonが配置されているのがわかります。

ライブラリに追加

　コンポーネントを直接ライブラリに追加する方法を説明します。ここで注意してもらいたい事はコンポーネントをステージには追加しないでライブラリのみに追加するという意味です。例えば、後から使用したいButtonコンポーネントがあるとします。最初の段階ではこのButtonコンポーネントはステージに置いておく必要はないが、後からActionScriptで呼び出したい場合などはステージに追加しないでライブラリに直接追加します。

・最初にメニューバーの[ウィンドウ]-[ライブラリ]を選択してライブラリを開きます。Ctrl + L キー (Windows) または Command +L キー (Macintosh) でも可能です。

・次にライブラリに追加したいコンポーネントの項目を選択します。今回はBUttonを選択しました。
ボタン選択

・選択したButtonコンポーネントをドラッグして下のライブラリパネルの赤い枠線内のどちらかにドロップします。

・ライブラリパネル内を見てみるとButtonが追加されているを確認できます。
ライブラリ内のコンポーネント

これでButtonコンポーネントはステージに配置はされていませんがライブラリには追加されいつでも使用できる状態になりました。

プロパティ

　コンポーネントはインスタンス名、位置、サイズなどのプロパティを設定する事ができます。設定を行うにはプロパティインスペクタパネルを使用して設定します。ActionScriptのみでもプロパティの設定は行えますが、ここではプロパティインスペクタパネルを使用した（オーサリング時）の設定方法を説明します。

ここでは例としてプロパティインスペクタパネルを使用してButtonコンポーネントのインスタンス名の付け方を説明します。

・最初にButtonコンポーネントをステージへ配置してステージ上にあるButtonをクリックして選択してください。選択すると青の枠線でButtonが囲まれます。

・次にこのButtonにインスタンス名を付ける為にプロパティインスペクタパネルを開きます。Ctrl + F3 キー (Windows) または Command + F3 キー (Macintosh) を押して下のパネルを開いていください。パネル左上部には[プロパティ] [フィルタ] [パラメータ]のタブが配置されていますが今回は[プロパティ]タブを選択しておいてください。

・最後にプロパティインスペクタ内の<インスタンス名>と表示されている部分にインスタンス名を入力します。今回はmyButtonとインスタンス名にしました。
インスタンス名入力

パラメータ

　それぞれのUIコンポーネントは独自のパラメータを設定する事ができ、それをプロパティインスペクタパネル内の[パラメータ]タブを選択して設定を行います。ここでのUIコンポーネントのパラメータの設定はButtonならButtonのラベル、境界線の表示/非表示など、そのコンポーネントに設定できるパラメータ項目が表示されます。ActionScript のみでもパラメータの設定は行えますが、ここではプロパティインスペクタパネルを使用した（オーサリング時）の設定方法を説明します。

ここでは例としてプロパティインスペクタパネルを使用してButtonコンポーネントの境界線の表示方法を説明します。

・最初にButtonコンポーネントをステージへ配置してステージ上にあるButtonをクリックして選択してください。選択すると青の枠線でButtonが囲まれます。

・このButtonのパラメータの設定を行うので、Ctrl + F3 キー (Windows) または Command + F3 キー (Macintosh) を押して下のパネルを開いていください。パネル左上部には[プロパティ] [フィルタ] [パラメータ]のタブが配置されていますが今回は[パラメータ]タブを選択しておいてください。（コンポーネントは必ず選択しておいてください。）

・パラメータタブのemphasized の項目に着目してください。このパラメータはButtonの境界線の表示/非表示をtrue、falseのブール値で設定する事ができます。デフォルト（初期）の状態ではパラメータ値はfalseに設定してあり、境界線は非表示となっています。

　今回emphasizedをtrueに変更して境界線を表示させてみます。最初にemphasized の項目を選択して矢印キー下を押すとfalseからtrueに変更されます。その他の方法としては設定したいパラメータ項目の右端にある矢印（下のパネルの赤い丸部）をクリックして変更する事も可能です。
パラメータタブ

・下の様にボタンに境界線が表示されます。

この他にもコンポーネントによって色々なパラメータを設定する事ができます。今回はtrue、falseの値を変更しただけですが、値を入力してパラメータの設定を変更する事もあります。例えばButtonのラベル（Buttonに表示されているLabel の部分）を変更する場合は直接テキストを入力を行います。

Top | Contents | Prev　| Next