「スキニング」とは、コンポーネントのビジュアルエレメントを修正または置換することで外観を変更する処理です。これらのエレメントを構成するのは、ビットマップイメージ、SWF ファイルまたは描画メソッドを含むベクターイメージを定義するクラスファイルなどです。

スキンでは、様々な状態のコンポーネント全体またはその一部を定義できます。例えば、次の例に示すように、Button コントロールでは、8 つの状態と 8 つの関連付けられたスキンプロパティを使用できます。

up、over および down 状態のデフォルトスキンは、次のように表示されます。

その他のコントロールには、関連付けられたスキンを備える類似の状態があります。例えば、Button コントロールのサブクラスである RadioButton コントロールにも、up、down および over スキンが用意されています。ComboBox コントロールには、disabled、down および over 状態に設定されたときにコントロールの外観を定義するスキンが用意されています。

スキンを作成するには、ActionScript または MXML で定義されたビットマップイメージ、SWF ファイルまたはクラスを使用します。すべての Flex コンポーネントに、コンポーネントの複数の状態を表現できるデフォルトスキンクラスが用意されています。前の表で確認できるように、Button コントロールの 8 つの状態は、同じデフォルトスキンクラスである mx.skins.halo.ButtonSkin を使用してスキンを描画します。クラス内のロジックは、その現在の状態に基づいて Button コントロールの外観を決定します。

コンポーネントにスキンを割り当てるには、スタイルプロパティを使用します。スタイルプロパティを設定するには、MXML タグプロパティ、StyleManager クラス、<mx:Style> ブロックまたはスタイルシートを使用できます。大部分の Flex アプリケーションは、スタイルシートを使用してスキンを分類し、適用します。スタイルシートは、コンパイル時にロードするか、実行時にロードします。実行時におけるスタイルシートのロードの詳細については、実行時のスタイルシートのロードを参照してください。

スキンの種類

通常は、ビットマップグラフィックまたはベクターグラフィックとしてスキンを定義します。ビットマップグラフィックは、Flex では「グラフィカルスキン」と呼ばれ、イメージを形成するピクセルで構成されます。ビットマップグラフィックは、通常特定の解像度で定義され、イメージを拡大 / 縮小したり変換したりするとイメージ品質が低下する可能性があるという短所があります。

ベクターグラフィックは、Flex では「プログラムスキン」と呼ばれ、線の開始位置と終了位置、線の太さ、色および線を描画するために Adobe® Flash® Player で必要になるその他の情報を指定する一連の線の定義で構成されます。ベクターグラフィックが拡大 / 縮小、回転またはその他の方法で変更されると、Flash Player は線の定義を変換することにより、比較的簡単にベクターグラフィックの新しいレイアウトを計算します。このため、ベクターグラフィックでは、品質低下の警告を受けることなく、様々な種類の変更を行うことができます。

プログラムスキンの利点の 1 つは、スキン上で自在にプログラムによる制御を行うことができるベクターグラフィックを作成できることです。例えば、プログラムスキンを使用して Button コントロールの隅の半径を制御できます。この操作はグラフィカルスキンではできません。Adobe Flash などのグラフィックツールを使用しなくても、Flex オーサリング環境や任意のテキストエディタで、プログラムスキンを直接開発することができます。プログラムスキンには外部のイメージファイルが組み込まれていないので、メモリの消費量が少ないという利点もあります。

次の表では、各タイプのスキンについて説明します。

グラフィカルスキンの作成

グラフィカルスキンを使用する場合は、スキンのイメージファイルをアプリケーションに埋め込む必要があります。スキンを指定するには、次の例に示すように、setStyle() メソッドを使用して、スキンをインラインに設定するか、カスケーディングスタイルシート（CSS）を使用します。

<?xml version="1.0"?>
<!-- skins/SimpleButtonGraphicSkin.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Style>
        Button {
            upSkin: Embed("../assets/orb_up_skin.gif");
        }
  </mx:Style>

    <mx:Button id="b1" label="Click Me"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

setStyle() メソッドの使用またはスキンのインライン設定によりスキンを設定する場合の詳細については、スキンの適用を参照してください。

次の例に示すように、同じグラフィカルスキンまたはプログラムスキンを複数のスキンに割り当て、スキンが同じイメージを表示するようにできます。

<?xml version="1.0"?>
<!-- skins/SimpleButtonGraphicSkinTwoSkins.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Style>
        Button {
            upSkin: Embed("../assets/orb_up_skin.gif");
            overSkin: Embed("../assets/orb_up_skin.gif");
        }
  </mx:Style>

    <mx:Button id="b1" label="Click Me"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

詳細については、グラフィカルスキンの作成を参照してください。

プログラムスキンの作成

MXML または ActionScript のいずれかでプログラムスキンを定義できます。プログラムスキンを使用するときは、コンポーネントの状態ごとにクラスを定義するか、複数のスキンに対して 1 つのクラスを定義できます。次の例では、カスタム ActionScript スキンを作成し、Button コントロールの up 状態のスキンを定義します。

package { 
  // skins\ButtonUpSkinAS.as

  import mx.skins.ProgrammaticSkin;

  public class ButtonUpSkinAS extends ProgrammaticSkin {

    // Constructor.
    public function ButtonUpSkinAS() {
      super();
    }

    override protected function updateDisplayList(unscaledWidth:Number, 
      unscaledHeight:Number):void 
    {
      graphics.lineStyle(1, 0x0066FF);
      graphics.beginFill(0x00FF00, 0.50);
      graphics.drawRoundRect(0, 0, unscaledWidth, unscaledHeight, 10, 10);
    }
  }
}

ActionScript では、通常スキンの基本クラスとして ProgrammaticSkin クラスを使用します。スキンクラスでは、updateDisplayList() メソッドをオーバーライドしてスキンを描画します。その後、スタイルシートを使用して、Button コントロールの該当するスキンプロパティにスキンコンポーネントを割り当てます。次に例を示します。

<?xml version="1.0"?>
<!-- skins/ApplySimpleButtonSkinAS.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Style>
        Button {
            upSkin: ClassReference("ButtonUpSkinAS");
        }
  </mx:Style>

    <mx:Button id="b1" label="Click Me"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

スキンの適用の詳細については、スキンの適用を参照してください。

次の例では、カスタム MXML コンポーネントを作成し、Button コントロールの up 状態のスキンを定義します。MXML では、スキンの基本クラスとして ProgrammaticSkin を使用します。これは、前述の ActionScript で定義したスキンと同じです。

<?xml version="1.0"?>
<!-- skins\ButtonUpMXMLSkin.mxml -->
<skins:ProgrammaticSkin xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:skins="mx.skins.*">

  <mx:Script>
    <![CDATA[       
      override protected function updateDisplayList(unscaledWidth:Number, 
        unscaledHeight:Number):void 
      {
        graphics.lineStyle(1, 0x0066FF);
        graphics.beginFill(0x00FF00, 0.50);
        graphics.drawRoundRect(0, 0, unscaledWidth, unscaledHeight, 10, 10);
      }
    ]]>
  </mx:Script>

</skins:ProgrammaticSkin>

MXML に xmlns:skins="mx.skins.*" 名前空間宣言を含める必要があることに注意してください。これは、デフォルトでは、ProgrammaticSkin クラスを MXML コンポーネントの基本クラスとして使用できないためです。

次の例では、複数の Button の状態に対してスキンを定義するコンポーネントを作成します。この例では、case ステートメントを使用して、スキンの name プロパティに基づく Button コントロールの現在の状態を決定します。ここでは、name プロパティにはスキンの現在の名前が含まれています。例えば、Button コントロール用のプログラムスキンを定義する場合、name プロパティはスキン状態を示す任意の値、つまり downSkin、upSkin、overSkin、disabledSkin、selectedDisabledSkin、selectedDownSkin、selectedOverSkin、selectedUpSkin のいずれかになります。

package { 
  // skins\ButtonUpAndOverSkinAS.as

  import mx.skins.ProgrammaticSkin;

  public class ButtonUpAndOverSkinAS extends ProgrammaticSkin {

    // Constructor.
    public function ButtonUpAndOverSkinAS() {
      super();
    }

    override protected function updateDisplayList(unscaledWidth:Number, 
      unscaledHeight:Number):void 
    {      
      switch (name)
      {            
       case "upSkin": {
        graphics.lineStyle(1, 0x0066FF);
        graphics.beginFill(0x00FF00, 0.50);
        graphics.drawRoundRect(0, 0, unscaledWidth, unscaledHeight, 10, 10);
       }

       case "overSkin": {
        graphics.lineStyle(1, 0x0066FF);
        graphics.beginFill(0x00CCFF, 0.50);
        graphics.drawRoundRect(0, 0, unscaledWidth, unscaledHeight, 10, 10);
       }       
      }
    }
  }
}

次に、ActionScript クラスを該当するスキンプロパティに割り当てます。

<?xml version="1.0"?>
<!-- skins/ApplyButtonUpOverSkinAS.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Style>
        Button {
            upSkin: ClassReference("ButtonUpAndOverSkinAS");
            overSkin: ClassReference("ButtonUpAndOverSkinAS");
        }
  </mx:Style>

    <mx:Button id="b1" label="Click Me"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

プログラムスキンの作成の詳細については、プログラムスキンの作成を参照してください。

ステートフルスキンの作成

ステートフルスキンを使用する場合は、コンポーネントの状態ごとにビューステートを定義するスキンを定義します。次の例では、Button コントロールの up および over 状態に対するビューステートを定義します。

<?xml version="1.0"?>
<!-- skins\ButtonUpStatefulSkin.mxml -->
<mx:UIComponent xmlns:mx="http://www.adobe.com/2006/mxml">

  <mx:Script>
    <![CDATA[       
            
      private var _rectFill:uint = 0x00FF00;
            
      public function get rectFill():uint {
          return _rectFill;
      }
            
      public function set rectFill(value:uint):void {
          _rectFill = value;
          invalidateDisplayList();
      }

      override protected function  updateDisplayList(unscaledWidth:Number, 
        unscaledHeight:Number):void
      {
        graphics.lineStyle(1, 0x0066FF);
        graphics.beginFill(rectFill, 0.50);
        graphics.drawRoundRect(0, 0, unscaledWidth, unscaledHeight, 10, 10);
       }
    ]]>
  </mx:Script>
    
  <mx:states>
      <mx:State name="up"/>
      <mx:State name="over">
          <mx:SetProperty target="{this}" 
              name="rectFill" value="0x00CCFF"/>
      </mx:State>
  </mx:states>
</mx:UIComponent>

ビューステートメカニズムは UIComponent クラスに組み込まれるので、通常はステートフルスキンを ActionScript または MXML の UIComponent のサブクラスとして定義します。詳細については、ステートフルスキンの作成を参照してください。

ActionScript または MXML のいずれかで、ステートフルスキンを作成できます。この例では、少ないコード行でビューステートを定義できるので MXML を使用します。その後、MXML コンポーネントを Button コントロールの skin プロパティに割り当てます。次に例を示します。

<?xml version="1.0"?>
<!-- skins/SimpleButtonStatefulSkin.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Style>
        Button {
          skin: ClassReference("ButtonUpStatefulSkin");
          downSkin: ClassReference("mx.skins.halo.ButtonSkin");
          disabledSkin: ClassReference("mx.skins.halo.ButtonSkin");
          selectedUpSkin: ClassReference("mx.skins.halo.ButtonSkin");
          selectedOverSkin: ClassReference("mx.skins.halo.ButtonSkin");
          selectedDownSkin: ClassReference("mx.skins.halo.ButtonSkin");
          selectedDisabledSkin: ClassReference("mx.skins.halo.ButtonSkin");
        }
  </mx:Style>

    <mx:Button id="b1" label="Click Me"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

ステートフルスキンを使用する場合、ステートフルスキンのコンポーネントで定義されないすべての状態に対するデフォルトスキンを明示的に指定する必要があります。

スキンのサイズ設定

コンポーネントがスキンを適用する前に、まずスキンなしのサイズを決定します。次に、コンポーネントはスキンを調べて、スキンに特定のサイズが定義されているかどうかを確認します。スキンに特定のサイズが定義されていない場合、コンポーネントはスキンを拡大または縮小してサイズに合わせます。スキンにサイズが定義されている場合、コンポーネント自体がスキンのサイズに合わせます。

サイズの制約は、ほとんどのスキンに対して定義されることはないので、コンポーネントは必要に応じてスキンを拡大または縮小できます。サイズ情報を含むスキンの書き込みに関する詳細については、measuredWidth および measuredHeight の getter の実装を参照してください。

サブコンポーネントのスキニング

場合によっては、サブコンポーネントのスキンを交換することもできます。次の例では、List コントロール内に表示される垂直 ScrollBar コントロールのスキンを交換します。

<?xml version="1.0"?>
<!-- skins/SubComponentSkins.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
     [Bindable] 
     private var theText:String = "Lorem ipsum dolor sit amet, consectetur " +
        "adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore " +
        "magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco " +
        "laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor " +
        "in reprehenderit in voluptate velit esse cillum dolore eu fugiat " +
        "nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt " +
        "in culpa qui officia deserunt mollit anim id est laborum.";     
  ]]></mx:Script>

  <mx:Style>
     .myScrollStyle {
        upArrowUpSkin: Embed("../assets/uparrow_up_skin.gif");                  
        downArrowUpSkin: Embed("../assets/downarrow_up_skin.gif");                  
     }
  </mx:Style>

  <mx:TextArea id="ta1" 
     width="400" 
     height="50" 
     verticalScrollPolicy="on" 
     verticalScrollBarStyleName="myScrollStyle" 
     text="{theText}"
  />

</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

List タイプセレクタで verticalScrollBarStyleName プロパティの値を設定すると、List コンポーネントのすべての垂直 ScrollBar コントロールに 1 つのカスタムスキンが適用されます。アプリケーションの他の部分の ScrollBar コントロールには、カスタムスキンは追加されません。

すべてのスタイルシートの場合と同様、独立した CSS ファイルでスキンを定義して、<mx:Style> タグの source プロパティで目的のファイルを指定できます。次に例を示します。

<mx:Style source="../stylesheets/MySkins.css"/>

テーマの作成

「テーマ」とは、Flex アプリケーションの外観と操作性を定義するスタイル定義とスキンのコレクションです。テーマファイルでは、スタイルシートと同様に、グラフィカルスキンとプログラムスキンの両方を扱うことができます。

テーマは、Flex アプリケーションに適用できる SWC ファイルの形式をとります。SWC ファイルをコンパイルするには、compc コマンド行コンパイラユーティリティを使用します。

SWC ファイルをコンパイルしておき、その SWC ファイルをアプリケーションでテーマとして使用すれば、アプリケーション本体をコンパイルするときにすべてのスキンファイルをコンパイルする手間を省くことができます。その結果、コンパイル時間を短縮でき、アプリケーションのコードに存在する問題も容易にデバッグできます。さらに、クラスとイメージファイルの組み合わせによる運用に比べ、SWC ファイルは他のアプリケーションへの移植が容易です。

Flex に付属するデフォルトのテーマセットである Halo は、静止グラフィックエレメントがいくらか含まれているものの、大半がプログラムスキンで構成されています。Flex には、Halo の外観と操作性を使用するプログラムスキンとグラフィカルスキンがあります。Halo コンポーネントのスキンを交換するためのプログラム手法またはグラフィック手法を使用して、スキンを編集することができます。

テーマの作成および適用の詳細については、テーマについてを参照してください。

スキンのリソース

Flex には、次に示すスキン用のグラフィックソースファイルおよびプログラムソースファイルがあります。

mx.skins パッケージの基本スキンクラス 

これらの抽象スキンクラスでは、Flex におけるスキンクラスの基本的な機能を定義します。詳細については、プログラムスキンの作成を参照してください。

mx.skins.halo パッケージの Halo プログラムスキン 

これらの具象スキンクラスは、mx.skins パッケージの基本スキンクラスを拡張したものです。これらのスキンを拡張または編集し、Flex のデフォルトの外観と操作性に基づいて、新規のプログラムスキンを作成できます。詳細については、プログラムスキンの作成を参照してください。

HaloClassic スキン 

これらのスキンは Flex 1.x で使用されていたものです。これらのスキンを使用すると、Flex 1.x アプリケーションの外観を維持できます。HaloClassic.swc ファイルは、framework/themes ディレクトリ内にあります。詳細については、テーマについてを参照してください。

グラフィカル Aeon テーマ 

Aeon テーマは、AeonGraphical.css ファイルおよびスキンシンボルを定義する AeonGraphical.swf ファイルで構成されます。これらのファイルは、framework/themes ディレクトリにあります。さらに、Flex は、AeonGraphical.swf ファイルの FLA ソースファイルも備えています。詳細については、テーマについてを参照してください。

これらのファイルを使用して、Flex の外観と操作性に基づいたスキンを作成するか、独自のスキンを作成します。

Adobe ツールを使用したスキンの作成

Adobe Flex アプリケーションのグラフィカルスキン、プログラムスキン、およびステートフルスキンを作成する際に、Adobe® Flash® CS3、Adobe Illustrator CS3、Adobe Photoshop CS3、および Adobe® Fireworks® CS3 を使用できます。これらのツールを使用してスキンを作成するには、まずスキン処理を簡単にする拡張をダウンロードしてインストールします。これらの拡張には、すべての Flex コンポーネント用のスキンテンプレートが含まれています。これらのツールを使用してスキンを作成する方法と、必要な拡張をダウンロードする方法の詳細については、http://www.adobe.com/go/flex3_cs3_skinning_extensions を参照してください。

Adobe Flash CS3 でのスキンの作成

Flex スキン拡張には Flash CS3 で簡単にスキンを作成するためのツール（すべての Flex スキンのテンプレートなど）が含まれていますが、Flash CS3 でスキンを作成する際に必ずしもそれらを使用する必要はありません。[Embed] メタデータタグを使用して、Flash CS3 で作成した SWC ファイルから Flex アプリケーションにスキンクラスを読み込むこともできます。

Flash CS3 でのスキンクラスの作成

1. Flash CS3 で、ファイル／新規を選択して、新規ドキュメントダイアログボックスを開きます。
2. ファイル形式として Flash ファイル（ActionScript 3.0）を選択します。
3. スキン用のムービークリップシンボルを作成します。シンボル名（例：Button_upSkin）がスキンのクラス名になります。

   ムービークリップシンボルのプロパティを以下のように設定します。

   • 「タイプ」を「ムービークリップ」に設定します。
   • 「基本クラス」を「flash.display.MovieClip」に設定します。
   • 「ActionScript に書き出し」オプションを設定します。
   • 「最初のフレームに書き出し」オプションを設定します。
   • クラス名とシンボル名が同じになるように設定します。
   • 必要に応じて、「9 スライスの拡大/縮小のためのガイドを有効にする」を設定します。
4. .fla ファイルを保存します。
5. 設定／パブリッシュ設定を選択して、パブリッシュ設定ダイアログボックスを開きます。
6. パブリッシュ設定ダイアログボックスの「Flash」タブで、「SWC 書き出し」を選択します。
7. ファイル／パブリッシュを選択し、.fla ファイルと同じディレクトリ内の SWC ファイルとしてスキンをパブリッシュします。

Flex アプリケーションでのスキンクラスの埋め込み

1. SWC ファイルをアプリケーションのライブラリパスに追加するには：
   • Flex Builder で、プロジェクト／プロパティを選択して SWC ファイルの場所を指定するか、SWC ファイルを Flex Builder プロジェクトの libs ディレクトリにコピーします。
   • mxmlc コマンドラインコンパイラの場合は、library-path オプションを使用して SWC ファイルの場所を指定します。
2. [Embed] メタデータタグを使用して、Flex アプリケーションにスキンを埋め込みます。[Embed] タグは、MXML ファイルの <mx:Style> ブロックの中、または CSS ファイルに記述します。

   Flash CS3 で作成したスキンクラスの [Embed] メタデータタグのシンタックスは次のとおりです。

   [Embed(skinClass="className")] 
   
   

   例えば、Flex Button コントロールのアップ状態のスキンとして Button_upSkin という名前のスキンを作成した場合は、次のようにスキンを埋め込みます。

   <mx:Style>
       Button
       {
           upSkin: [Embed(skinClass="Button_upSkin")] 
       }
   </mx:Style>
   
   

3. Flex アプリケーションをコンパイルして実行します。