Flash CS3 ドキュメンテーション

ActionScript 2.0 コンポーネントガイド > コンポーネントのカスタマイズ > スキンとスタイルの組み合わせによるコンポーネントのカスタマイズ

スキンとスタイルの組み合わせによるコンポーネントのカスタマイズ

このセクションでは、スタイル、テーマ、およびスキン設定を使ってコンボボックスコンポーネントインスタンスをカスタマイズします。この手順では、スキンとスタイル設定を組み合わせて、コンポーネントの一意の外観を作成する方法を示します。

ステージでのコンポーネントインスタンスの作成

この実習の前半では、カスタマイズの対象となる ComboBox インスタンスを作成する必要があります。

ComboBox インスタンスを作成するには:

1. ComboBox コンポーネントをステージにドラッグします。
2. [プロパティ] パネルで、インスタンスに my_cb という名前を付けます。
3. メインタイムラインの最初のフレームに次の ActionScript を追加します (ActionScript を、コンポーネント自体ではなくフレームに追加していることを確認します。[アクション] パネルのタイトルバーには、[アクション - フレーム] が表示されるはずです)。

   my_cb.addItem({data:1, label:"One"});
   my_cb.addItem({data:2, label:"Two"});
   

4. [制御]-[ムービープレビュー] を選択して、Halo テーマのデフォルトのスタイルおよびスキン設定が適用されたコンボボックスを表示します。

新しいスキン宣言の作成

次に、新しいスタイル宣言を作成して、このスタイル宣言にスタイルを割り当てる必要があります。スタイル宣言に必要なすべてのスタイルを割り当てた後、新しいスタイル名をコンボボックスインスタンスに割り当てることができます。

新しいスタイル宣言を作成して、名前を指定するには :

1. メインタイムラインの最初のフレームで、ActionScript の先頭に次の行を追加します (コーディング規則として、すべての読み込みステートメントは、ActionScript の冒頭に記述する必要があります)。

   import mx.styles.CSSStyleDeclaration;
   

2. その次の行に、新しいスタイル宣言の名前を指定し、その名前をグローバルスタイル定義に追加します。

   var new_style:Object = new CSSStyleDeclaration();
   _global.styles.myStyle = new_style; 
   

   新しいスタイル宣言を _global スタイルシートに割り当てた後、個別のスタイル設定を new_style スタイル宣言に関連付けることができます。単一のインスタンスにスタイル定義を設定するのではなく、コンポーネントグループ用にスタイルシートを作成する方法の詳細については、コンポーネントのグループに対するカスタムスタイルの設定を参照してください。

3. スタイル設定を new_style スタイル宣言に関連付けます。次のスタイル設定には、ComboBox コンポーネントで利用可能なスタイル定義 (詳細な一覧については、『ActionScript 2.0 コンポーネントリファレンスガイド』のComboBox コンポーネントでのスタイルの使用を参照) が含まれています。さらに、ComboBox コンポーネントは RectBorder クラスを使用するので、このスタイル設定には RectBorder クラスのスタイルも含まれています。

   new_style.setStyle("textAlign", "right");
   new_style.setStyle("selectionColor", "white");
   new_style.setStyle("useRollOver", false);
   // RectBorder クラスの borderStyle
   new_style.setStyle("borderStyle", "none");
   

コンボボックスへのスタイル定義の割り当て

この時点で、さまざまなスタイルを含むスタイル宣言が用意されました。しかし、明示的にスタイル名をコンポーネントインスタンスに割り当てる必要があります。この新しいスタイル宣言を、ドキュメント内の任意のコンポーネントインスタンスに次の方法で割り当てることができます。my_cb の addItem() ステートメントの後に次の行を追加します (コーディング規則として、すべてのコンボボックス作成ステートメントは 1 か所にまとめる必要があります)。

my_cb.setStyle("styleName", "myStyle");

メインタイムラインの最初のフレームに関連付けられた ActionScript コードは次のようになります。

import mx.styles.CSSStyleDeclaration;

var new_style:Object = new CSSStyleDeclaration();
_global.styles.myStyle = new_style; 

new_style.setStyle("textAlign", "right");
new_style.setStyle("selectionColor", "white");
new_style.setStyle("useRollOver", false);
// RectBorder クラスの borderStyle
new_style.setStyle("borderStyle", "none");

my_cb.addItem({data:1, label:"One"});
my_cb.addItem({data:2, label:"Two"});
my_cb.setStyle("styleName", "myStyle");

[制御]-[ムービープレビュー] を選択して、スタイルが設定されたコンボボックスを表示します。

コンボボックスのテーマの変更

すべてのユーザーインターフェイスコンポーネントには、そのコンポーネントで設定可能なスタイルプロパティの一覧が存在します (たとえば、ComboBox コンポーネントに設定可能なすべてのスタイルプロパティは『ActionScript 2.0 コンポーネントリファレンスガイド』のComboBox コンポーネントのカスタマイズに一覧表示されています)。スタイルプロパティの表の "テーマ" という名前が付いた列に、イストール済みのテーマが各スタイルプロパティをサポートしているかどうかが示されます。すべてのスタイルプロパティが、インストール済みの全テーマでサポートされるわけではありません。すべてのユーザーインターフェイスコンポーネントのデフォルトのテーマは Halo です。Halo テーマを Sample テーマに変更する場合、異なるスタイルプロパティセットを使用できます (プロパティが Halo にのみ示されている場合、そのプロパティは Sample テーマでは使用できません)。

スタイルが設定されたコンポーネントのテーマを変更するには :

1. [ファイル]-[読み込み]-[外部ライブラリを開く] を選択し、"SampleTheme.fla" を選択して、サンプルテーマライブラリを Flash で開きます。

   このファイルは、アプリケーションレベル設定フォルダにあります。

   • Windows : C:¥Program Files¥Adobe¥Adobe Flash CS3¥<言語>¥Configuration¥ComponentFLA¥
   • Macintosh : HD/アプリケーション/Adobe Flash CS3/Configuration/ComponentFLA/
2. メイン SampleTheme (Flash UI Components 2/SampleTheme) ムービークリップを SampleTheme ライブラリからドキュメントのライブラリにドラッグします。

   ComboBox コンポーネントは、いくつかのコンポーネントとクラスが組み合わさって構成されており、Border アセットや ScrollBar アセットなどのコンポーネントおよびアセットを必要とします。必要とするテーマのすべてのアセットを読み込んでいることを確認する最も簡単な方法は、テーマのすべてのアセットをライブラリにドラッグすることです。

3. [制御]-[ムービープレビュー] を選択して、スタイルが設定されたコンボボックスを表示します。

   
   
   

コンボボックスのスキンアセットの編集

コンポーネントの外観を編集するには、コンポーネントを構成するスキンを編集します。スキンを編集するには、現在のテーマ内からコンポーネントのグラフィックアセットを開き、そのコンポーネントのシンボルを編集します。コンポーネントの外観を編集する場合は、この方法を実行するようにしてください。これは、他のコンポーネントで必要とされる可能性があるシンボルを、この方法では削除または追加する必要がないためです。この方法により、既存のコンポーネントスキンシンボルの外観を編集します。

コンポーネントのスキンシンボルを編集した場合、次の説明が適用されます。

• 編集対象のコンポーネントのすべてのインスタンスは、新しいスキンを使用します (ただし、インスタンスにスタイルを明示的に関連付けない限り、カスタムスタイルは使用されません)。さらに、このコンポーネントに依存しているコンポーネントも新しいスキンを使用します。
• コンポーネントスキンの編集後に新しいテーマを割り当てた場合、既存の "編集済み" スキンを上書きしないようにします (スキンを上書きするかどうか確認するダイアログボックスが表示されます。このダイアログボックスを使って、Flash がスキンを上書きしないよう設定できます)。

このセクションでは、前述のセクションのコンボボックスを引き続き使用します (コンボボックスのテーマの変更を参照)。次に示す手順を実行すると、コンボボックスを開く下矢印の外観が、矢印から円に変更されます。

コンボボックスの下矢印シンボルを編集するには :

1. ドキュメントのライブラリで ComboBox アセットを開き、実行時にコンボボックスインスタンスの開閉に使用するボタンのスキンであるムービークリップを表示します。具体的には、"Themes/MMDefault/ComboBox Assets/States" フォルダをドキュメントのライブラリで開きます。

   "States" フォルダには、ComboDownArrowDisabled、ComboDownArrowDown、ComboDownArrowOver、および ComboDownArrowUp の各ムービークリップが存在します。この 4 つのシンボルはすべて他のシンボルで構成されます。さらにこの 4 つのシンボルは、SymDownArrow と呼ばれる下矢印 (三角形) について同じシンボルを使用しています。

2. ComboDownArrowDown シンボルをダブルクリックして編集します。

   ボタンの詳細を表示するには、拡大が必要になる場合があります (最大 800% の拡大が可能)。

3. 下矢印 (黒色の三角形) をダブルクリックして編集します。

   メモ

   シンボル SymDownArrow が選択されていることを確認します。つまり、ムービークリップ自体ではなく、ムービークリップ内のシェイプのみを削除するようにします。

   
   
   

4. ステージ上の選択した下矢印 (ムービークリップ全体ではなく黒色の三角形シェイプ) を削除します。
5. SymDownArrow の編集中、下矢印が配置されていた場所に円を描画します。

   変更をわかりやすくするため、青などの明るい色で円を描画し、およそ 4 x 4 ピクセルの大きさの円を、x 座標が 0、y座標が -1 で中心に配置するようにしてください。

   
   
   

6. [制御]-[ムービープレビュー] を選択して、スキンが設定されたコンボボックスを表示します。

   
   
   

   ドキュメントのライブラリで、ComboDownArrowOver と ComboDownArrowUp を選択した場合も、黒色の三角形の代わりに青色の円が表示されます。これは、これらのシンボルも SymDownArrow と同じ下矢印シンボルを使用しているためです。

このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート

現在のページ: http://livedocs.adobe.com/flash/9.0_jp/main/00002480.html

コメントの追加