グラフィカルスキンを使用するには、Flex アプリケーションにイメージファイルを埋め込みます。これらのイメージとして JPEG ファイル、GIF ファイル、PNG ファイルを使用できるほか、SWF ファイルに埋め込んだシンボルを使用することもできます。

SWF ファイルをスキンに使用する場合、シンボルの定義を含んでいるが ActionScript 3.0 コードを一切含まない静的アセットを使用するか、動的アセットを使用することができます。動的アセットは、Flex コンポーネントに対応し、ActionScript 3.0 コードを含みます。これらのコンポーネントは、ビューステートやトランジションなどの Flex 機能を操作するように設計されています。Flex アプリケーションで動的アセットを使用するには、SWF ファイル内のシンボルを SWC ファイルに書き出して、この SWC ファイルを Flex アプリケーションにリンクします。

アセットを Flex アプリケーションに埋め込む方法の詳細については、アセットの埋め込みを参照してください。

JPEG、GIF および PNG ファイルのスキンとしての使用

JPEG、GIF または PNG ファイルをスキンとして使用するには、該当するファイルを Flex アプリケーションに埋め込む必要があります。例えば、Button コントロールの外観を変更するために、orb_up_skin.gif、orb_down_skin.gif、orb_over_skin.gif という 3 つのイメージファイルを作成するとします。

次の例では、Button コントロールの up、over および down 状態のグラフィカルスキンを使用します。

<?xml version="1.0"?>
<!-- skins/EmbedImagesTypeSelector.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
     Button {
        overSkin: Embed("../assets/orb_over_skin.gif");
        upSkin: Embed("../assets/orb_up_skin.gif");
        downSkin: Embed("../assets/orb_down_skin.gif");
     }
  </mx:Style>
  <mx:Button id="b1" label="Click Me"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

ファイルを埋め込む理由は、コンポーネントの最小サイズと最適サイズを決定するために、コンポーネントが作成される時点でスキンアセットが存在している必要があるためです。実行時に外部アセットを参照する場合、Flex にはサイズを決定するための情報がないので、スキンを正しくレンタリングできません。

スキンが埋め込まれているため、1 つまたは複数のスキンを構成するグラフィックファイルを変更した場合は、Flex アプリケーションを再コンパイルして変更を有効にする必要があります。アセットを埋め込む方法の詳細については、アセットの埋め込みを参照してください。

イメージをスキンとして埋め込むことの欠点は、スキンを持つコンポーネントのサイズを変更するときに、イメージが変形する可能性があるという点です。9 つのスライスの拡大 / 縮小と呼ばれる手法を使用して、コンポーネントのサイズを変更しても変形しないスキンを作成できます。9 つのスライスの拡大 / 縮小手法の詳細については、埋め込みイメージでの 9 つのスライスの拡大 / 縮小の使用を参照してください。

静的 SWF アセットのスキンとしての使用

Flash 8 または Flash 9 で作成された静的 SWF ファイルには、アートワークまたはスキンが含まれていますが、ActionScript 3.0 コードは一切含まれていません。SWF ファイル全体を単一のスキンとして使用できるほか、SWF ファイル内の 1 つまたは複数のシンボルを 1 つのスキンとして使用することもできます。SWF ファイル全体を埋め込むには、次のように Embed ステートメントの source プロパティで SWF ファイルの場所を指定します。

<?xml version="1.0"?>
<!-- skins/EmbedSWFSource.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
     Button {
        upSkin: Embed(source="../assets/SubmitButtonUpSkin.swf");
     }
  </mx:Style>
  <mx:Button id="b1"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

シンボルを SWF ファイルから読み込むには、symbol プロパティで SWF ファイルの場所を指定した上で、使用するシンボル名を source プロパティで指定します。Embed ステートメントの各プロパティは、カンマで区切る必要があります。次の例では、Button コントロールの up、over および down スキンを SWF ファイルの個々のシンボルに置き換えます。

<?xml version="1.0"?>
<!-- skins/EmbedSymbolsCSS.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
    Button {
        upSkin: Embed(source='../assets/SubmitButtonSkins.swf', 
            symbol='MyUpSkin');
        overSkin: Embed(source='../assets/SubmitButtonSkins.swf', 
            symbol='MyOverSkin');
        downSkin: Embed(source='../assets/SubmitButtonSkins.swf', 
            symbol='MyDownSkin');
    }
 </mx:Style>
  
  <mx:Button id="b1"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

インラインでスキンシンボルを埋め込むときは、次に示すように同じシンタックスを使用します。

<?xml version="1.0"?>
<!-- skins/EmbedSymbolsInline.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Button id="b1" 
     overSkin="@Embed(source='../assets/SubmitButtonSkins.swf', 
        symbol='MyOverSkin')"
     upSkin="@Embed(source='../assets/SubmitButtonSkins.swf', 
        symbol='MyUpSkin')"
     downSkin="@Embed(source='../assets/SubmitButtonSkins.swf', 
        symbol='MyDownSkin')"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

使用するすべてのシンボルは、ソース FLA ファイルの中で次の条件を満たしている必要があります。

• シンボルはステージ上に置かれている必要があります。イメージファイルを作成して、それをシンボルに変換した後、そのシンボルをライブラリからステージにドラッグする必要があります。Flash は、ステージ上にないシンボルは書き出しません。別の方法として、リンケージプロパティダイアログボックスの「最初のフレームに書き出し」オプションを選択することもできます。
• シンボルは、リンケージ名を指定して ActionScript 用に書き出されている必要があります。Flash で、シンボルのリンケージプロパティダイアログボックスの「ActionScript に書き出し」オプションを選択します。次に例を示します。

  

  リンケージ名は、Flex で使用される名前です。シンボル名は無視されます。

• FLA ファイルには、いずれの ActionScript も含めることはできません。
• シンボルの左上には、シンボルに変換ダイアログボックスで基準点を設定しておく必要があります。次の例は、左上の基準点を示しています。

  

1. イメージファイル（9 つの領域を持つグリッド）で 9 つのスライスの拡大 / 縮小を使用すると、コンポーネントのサイズを変更しても、それに応じてスキンが正常に拡大または縮小されます。イメージの 9 つのスライスの拡大 / 縮小プロパティは、次の例で示すように、CSS でスキンを適用するときに定義します。

   Button {
       overSkin: Embed(
           "../assets/orb_over_skin.gif", 
           scaleGridTop=6, 
           scaleGridLeft=12, 
           scaleGridBottom=44, 
           scaleGridRight=49
       );
   }
   
   

   9 つのスライスの拡大 / 縮小と呼ばれる手法を使用するアセットの埋め込みの詳細については、埋め込みイメージでの 9 つのスライスの拡大 / 縮小の使用を参照してください。

動的 SWF アセットのスキンとしての使用

動的 SWF アセットとは、Flash CS3 で作成して Flex アプリケーションに読み込む Flex コンポーネントです。これらのアセットは Flex コンポーネントなので、Flex に付属のコンポーネント、または MXML ファイルや ActionScript クラスとして作成したカスタムコンポーネントと同じように使用できます。

Flash コンポーネントを作成するには、FLA ファイルでシンボルを定義し、シンボルの基本クラスを mx.flash.UIMovieClip として指定します。Flash CS3 で作成した動的 SWF アセットからコンポーネントを統合するには、FLA ファイルを SWC ファイルとしてパブリッシュします。

動的な SWF アセットを作成する方法と、それらをスキンとして使用する方法の詳細については、http://www.adobe.com/go/flex3_cs3_skinning_extensions および http://www.adobe.com/go/flex3_cs3_swfkit を参照してください。