スキンについて

コンポーネントのスキンを編集する場合、デフォルトではドキュメント内のそのコンポーネントのすべてのインスタンスの外観が変更されます。同じコンポーネントに対して異なる外観を作成する場合は、変更するスキンを複製し、別の名前を付けて編集し、適切なスタイルを設定して適用する必要があります。 詳しくは、 一部のインスタンスのスキンの作成 を参照してください。

この章では、各 UI コンポーネントのスキンを変更する方法について説明します。 これらのいずれかの手順に従って UI コンポーネントのスキンを変更すると、ドキュメント内のすべてのインスタンスのスキンが変更されます。

次の一般的な手順を使用すると、コンポーネントの一部のインスタンスにスキンを作成できます。

• ライブラリパネルのコンポーネントの Assets フォルダーでスキンを選択します。

• スキンを複製し、一意のクラス名を割り当てます。

• スキンを編集して目的の外観を設定します。

• コンポーネントインスタンスに対して setStyle() メソッドを呼び出し、新しいスキンをスキンスタイルに割り当てます。

次の手順では、2 つの Button インスタンスのいずれかに対して、新しい selectedDownSkin を作成します。

1. 新しい Flash ファイル（ActionScript 3.0）ドキュメントを作成します。

2. コンポーネントパネルから 2 つの Button をステージまでドラッグし、インスタンス名を aButton および bButton にします。

3. ライブラリパネルを開きます。次に、このパネル内の Component Assets フォルダーと ButtonSkins フォルダーを順に開きます。

4. selectedDownSkin スキンをクリックして選択します。

5. 右クリックしてショートカットメニューを表示し、「複製」を選択します。

6. シンボルの複製ダイアログボックスで、新しいスキンに Button_mySelectedDownSkin などの一意の名前を付けます。次に「OK」をクリックします。

7. ライブラリパネルの Component Assets - ButtonSkins フォルダーで Button_mySelectedDownSkin をクリックし、右クリックしてコンテキストメニューを開きます。「リンケージ」を選択して、リンケージプロパティダイアログボックスを開きます。

8. 「ActionScript に書き出し」チェックボックスをオンにします。 「最初のフレームに書き出し」チェックボックスをオンのままにし、クラス名が一意であることを確認します。 「OK」をクリックします。次に、クラス定義が見つからなかったので作成することを示す警告に対して、もう一度「OK」をクリックします。

9. ライブラリパネルで Button_mySelectedDownSkin スキンをダブルクリックし、シンボル編集モードで開きます。

10. プロパティインスペクターの塗りカラーピッカーにカラーが表示されるまで、スキンの中央の青い塗りをクリックします。 カラーピッカーをクリックし、スキンの塗りのカラー #00CC00 を選択します。

11. ステージの上の編集バーの左側にある「戻る」ボタンをクリックし、ドキュメント編集モードに戻ります。

12. プロパティインスペクターで、各ボタンの「パラメーター」タブをクリックし、toggle パラメーターを true に設定します。

13. タイムラインのフレーム 1 のアクションパネルに次のコードを追加します。

    bButton.setStyle("selectedDownSkin", Button_mySelectedDownSkin); 
    bButton.setStyle("downSkin", Button_mySelectedDownSkin);

14. 制御／ムービープレビューを選択します。

15. 各ボタンをクリックします。 bButton オブジェクトのダウン状態のスキン（選択および非選択）では、新しいスキンシンボルが使用されます。