スタイルの設定

スタイル設定について
コンポーネントのデフォルトスタイルへのアクセス
コンポーネントインスタンスのスタイルの設定と取得
- TextFormat を使用したテキストプロパティの設定
コンポーネントのすべてのインスタンスへのスタイルの設定
すべてのコンポーネントのスタイルの設定

Flash で様々な状態のコンポーネントが描画されるとき、通常はコンポーネントのスタイルによって、そのスキン、アイコン、テキストフォーマットおよびパディングの値が指定されます。例えば、Button がダウン状態のときは、アップ状態または通常状態とは異なるスキンで描画されます。これが発生するのは、Button の上でマウスボタンをクリックしたときです。また、無効状態のときも別のスキンが使用されます。この状態は、 enabled プロパティを false に設定すると発生します。

コンポーネントのスタイルは、ドキュメント、クラスおよびインスタンスの各レベルで設定します。さらに、一部のスタイルプロパティは親コンポーネントから継承できます。たとえば、List コンポーネントは BaseScrollPane からの継承によって ScrollBar スタイルを継承します。

コンポーネントをカスタマイズするスタイルは、次のように設定できます。

コンポーネントインスタンスにスタイルを設定する。個々のコンポーネントインスタンスで、カラーやテキストのプロパティを変更することができます。これは場合によっては効果的ですが、ドキュメント内のすべてのコンポーネントについて個別にプロパティを設定する必要がある場合などは、かえって時間がかかる可能性もあります。
ドキュメントの特定のタイプのすべてのコンポーネントのスタイルを設定する。ドキュメント内のすべての CheckBox またはすべての Button など、特定のタイプのすべてのコンポーネントのスタイルに一貫性を持たせるには、コンポーネントレベルでスタイルを設定します。

コンテナにスタイルのプロパティを設定すると、そのコンテナに含まれるコンポーネントにプロパティの値が継承されます。

ライブプレビュー機能を使ってステージにコンポーネントを表示する場合、スタイルプロパティに加えた変更は表示されません。

スタイル設定について

スタイルの使用に関しては次のような点が重要です。

継承

コンポーネントの子は、設計上、親コンポーネントからスタイルを継承するように設定されます。ActionScript 内でスタイルの継承を設定することはできません。

優先順位

同じコンポーネントスタイルを複数の方法で設定した場合、優先順位に従って最初に検出されたスタイルが使用されます。Flash は値が見つかるまで次の順序でスタイルを調べます。

コンポーネントインスタンスのスタイルプロパティを探します。
継承スタイルに含まれるスタイルの場合は、親階層から継承される値を探します。
コンポーネント上のスタイルを探します。
StyleManager のグローバル設定を探します。
検索の結果、そのプロパティが定義されていない場合は、値として undefined が使用されます。

コンポーネントのデフォルトスタイルへのアクセス

コンポーネントクラスの静的 getStyleDefinition() メソッドを使用するコンポーネントでは、そのデフォルトスタイルにアクセスできます。例えば、次のコードは ComboBox コンポーネントのデフォルトスタイルを取得し、 buttonWidth プロパティおよび downArrowDownSkin プロパティのデフォルト値を表示します。

import fl.controls.ComboBox; 
var styleObj:Object = ComboBox.getStyleDefinition(); 
trace(styleObj.buttonWidth); // 24 
trace(styleObj.downArrowDownSkin); // ScrollArrowDown_downSkin

コンポーネントインスタンスのスタイルの設定と取得

任意の UI コンポーネントインスタンスは、 setStyle() メソッドおよび getStyle() メソッドを直接呼び出して、スタイルを設定したり、取得したりできます。次のシンタックスで、コンポーネントインスタンスのスタイルおよび値を指定します。

instanceName.setStyle("styleName", value);

このシンタックスで、コンポーネントインスタンスのスタイルを取得します。

var a_style:Object = new Object(); 
a_style = instanceName.getStyle("styleName");

getStyle() メソッドは Object 型を返します。これは、異なるデータ型を持つ複数のスタイルを返すことができるためです。例えば、次のコードは TextArea インスタンス（ aTa ）のフォントスタイルを設定し、 getStyle() メソッドを使用してそのスタイルを取得します。この例では、戻り値を TextFormat オブジェクトにキャストし、その値を TextFormat 変数に割り当てます。キャストを行わないと、コンパイラーは Object 変数を TextFormat 変数に強制しようとしてエラーが発生します。

import flash.text.TextFormat; 
 
var tf:TextFormat = new TextFormat(); 
tf.font = "Georgia"; 
aTa.setStyle("textFormat",tf); 
aTa.text = "Hello World!"; 
var aStyle:TextFormat = aTa.getStyle("textFormat") as TextFormat; 
trace(aStyle.font);

TextFormat を使用したテキストプロパティの設定

コンポーネントインスタンスのテキストをフォーマットするには、TextFormat オブジェクトを使用します。 TextFormat オブジェクトには、 bold 、 bullet 、 color 、 font 、 italic 、 size など、テキスト特性を指定できるプロパティがあります。これらのプロパティは TextFormat オブジェクトで設定し、 setStyle() メソッドを呼び出してコンポーネントインスタンスに適用します。例えば、次のコードでは TextFormat オブジェクトの font 、 size および bold プロパティを設定し、それらのプロパティを Button インスタンスに適用します。

/* Create a new TextFormat object to set text formatting properties. */ 
var tf:TextFormat = new TextFormat(); 
tf.font = "Arial"; 
tf.size = 16; 
tf.bold = true; 
a_button.setStyle("textFormat", tf);

次の図は、Submit ラベルを持つボタンでの、これらの設定の効果を示しています。

setStyle() を使用してコンポーネントインスタンスに設定したスタイルプロパティは、最も優先度が高く、その他のスタイル設定よりも優先されます。ただし、単一のコンポーネントインスタンスに対して setStyle() を使用して設定したプロパティが多ければ多いほど、該当するコンポーネントの実行時のレンダリング速度は遅くなります。

コンポーネントのすべてのインスタンスへのスタイルの設定

StyleManager クラスの静的 setComponentStyle() メソッドを使用すると、コンポーネントクラスのすべてのインスタンスのスタイルを設定できます。例えば、すべての Button のテキストのカラーを赤に設定するには、最初に Button をステージまでドラッグし、次の ActionScript コードをタイムラインのフレーム 1 のアクションパネルに追加します。

import fl.managers.StyleManager; 
import fl.controls.Button; 
 
var tf:TextFormat = new TextFormat(); 
tf.color = 0xFF0000; 
StyleManager.setComponentStyle(Button, "textFormat", tf);

ステージにそれ以降に追加するすべての Button のラベルは赤になります。

すべてのコンポーネントのスタイルの設定

StyleManager クラスの静的 setStyle() メソッドを使用すると、すべてのコンポーネントにスタイルを設定できます。

List コンポーネントをステージまでドラッグし、インスタンス名を aList にします。
Button コンポーネントをステージまでドラッグし、インスタンス名を aButton にします。
アクションパネルが開いていない場合は、 F9 キーを押すか、ウィンドウメニューからアクションを選択してアクションパネルを開きます。タイムラインのフレーム 1 に次のコードを入力して、すべてのコンポーネントのテキストのカラーを赤に設定します。
```
import fl.managers.StyleManager; 
 
var tf:TextFormat = new TextFormat(); 
tf.color = 0xFF0000; 
StyleManager.setStyle("textFormat", tf);
```

次のコードをアクションパネルに追加して List にテキストを埋め込みます。

aList.addItem({label:"1956 Chevy (Cherry Red)", data:35000}); 
aList.addItem({label:"1966 Mustang (Classic)", data:27000}); 
aList.addItem({label:"1976 Volvo (Xcllnt Cond)", data:17000}); 
aList.allowMultipleSelection = true;

制御／ムービーをプレビューするを選択するか、Ctrl + Enter キーを押してコードをコンパイルし、コンテンツをテストします。ボタンのラベルとリストの両方のテキストが赤になります。