アセット埋め込みのシンタックス
アセットを埋め込む際に使用するシンタックスは、アプリケーションのどこにアセットを埋め込むかによって異なります。Flex では次のシンタックスをサポートします。
- [Embed(parameter1, paramater2, ...)] メタデータ タグ
ActionScript ファイル内または MXML ファイルの <mx:Script> ブロック内にアセットを埋め込む場合に使用します。詳細については、[Embed] メタデータタグの使用を参照してください。
- @Embed(parameter1, paramater2, ...) ディレクティブ
MXML タグ定義で使用して、アセットを埋め込みます。詳細については、MXML での @Embed() ディレクティブの使用を参照してください。
- Embed(parameter1, paramater2, ...) ディレクティブ
MXML ファイルの <mx:Style> ブロック内で使用して、アセットを埋め込みます。詳細については、スタイルシートでのアセットの埋め込みを参照してください。
この 3 つの埋め込みシンタックスは、すべて同じアセットにアクセスします。アプリケーション内でシンタックスを使う場所が異なるだけです。
@ 文字のエスケープ
リテラル文字の @ を使用する場合は、円記号（\）を使用してアットマーク（@）をエスケープします。例えば、「\@Embed(foo)」と表現されるストリングは、リテラルストリングの「@Embed(foo)」です。1 つの \ 文字をエスケープするには、円記号を 2 つ使用します（\\）。例えば、リテラルストリングの「\@」を指定するには、「\\@」と表現します。
埋め込みパラメータ
埋め込みシンタックスのすべてのフォームで、オプションのパラメータを 1 つ以上使用します。アセットの埋め込みに使用するシンタックスそのものは、埋め込む場所によって異なります。パラメータの中には、埋め込むアセットのタイプに関係なく使用できるものと、特定のタイプのメディアにだけ使用できるものがあります。例えば、source パラメータと mimeType パラメータは、あらゆるタイプのメディアに対して使用できますが、scaleGridRight パラメータはイメージにのみ適用されます。
次の表は、あらゆるタイプの埋め込みアセットに対して使用できるパラメータを示します。詳細については、source パラメータについておよびMIME タイプについてを参照してください。
|
パラメータ |
説明 |
|---|---|
| source |
埋め込むアセットの名前とパスを指定します。このパスは、絶対パスでも、埋め込みステートメントを含むファイルへの相対パスでもかまいません。埋め込むアセットは、ローカルに格納されているアセットでなければなりません。したがって、埋め込むアセットの URL を指定することはできません。 パスの設定の詳細については、埋め込みアセットへのパスの指定についてを参照してください。 |
| mimeType |
アセットの MIME タイプを指定します。 |
次の表は、イメージおよび Sprite オブジェクトにのみ使用できるパラメータを示します。詳細については、埋め込みイメージでの 9 つのスライスの拡大 / 縮小の使用を参照してください。
|
パラメータ |
説明 |
|---|---|
| scaleGridTop |
9 つのスライスの拡大 / 縮小フォーマットシステムを使用するイメージの上端から上グリッドまでの距離を、ピクセル単位で指定します。拡大 / 縮小されない元のイメージのサイズに対する相対値で距離を指定します。 |
| scaleGridBottom |
9 つのスライスの拡大 / 縮小を行うフォーマットシステムを使用するイメージの上端から下グリッドまでの距離を、ピクセル単位で指定します。拡大 / 縮小されない元のイメージのサイズに対する相対値で距離を指定します。 |
| scaleGridLeft |
9 つのスライスの拡大 / 縮小を行うフォーマットシステムを使用するイメージの左端から左グリッドまでの距離を、ピクセル単位で指定します。拡大 / 縮小されない元のイメージのサイズに対する相対値で距離を指定します。 |
| scaleGridRight |
9 つのスライスの拡大 / 縮小を行うフォーマットシステムを使用するイメージの左端から右グリッドまでの距離を、ピクセル単位で指定します。拡大 / 縮小されない元のイメージのサイズに対する相対値で距離を指定します。 |
次の表は、SWF ファイル固有のパラメータを示します。詳細については、SWF ファイルの埋め込みを参照してください。
|
パラメータ |
説明 |
|---|---|
| symbol |
埋め込む SWF ファイル内のシンボルを指定します。Adobe Flash Player 8 以前でのみ使用できます。 |
source パラメータについて
ほとんどの場合、source パラメータを指定しなければ、何も埋め込むことはできません。
source パラメータは [Embed] メタデータタグのデフォルトパラメータなので、このパラメータ以外に指定するパラメータがない場合は、次の例のように、source パラメータ名を明示的に記述しなくても、値を指定することができます。
<mx:Style>
.myCustomButton {
overSkin:Embed("overIconImage.gif");
upSkin:Embed(source="upIconImage.gif");
downSkin:Embed(source="downIconImage.gif");
}
</mx:Style>
埋め込みアセットへのパスの指定について
次の例のように、イメージまたは URL への完全修飾パスを指定できます。
<mx:Button label="Icon Button"
icon="@Embed(source='c:/myapp/assets/logo.gif')"/>
<mx:Button label="Icon Button"
icon="@Embed(source='http://host.com/myapp/assets/logo.gif')"/>
パスが円記号で始まっていない場合は、最初に、[Embed] メタデータタグが含まれたファイルを基準としてファイルが検索されます。例えば、MXML ファイル testEmbed.mxml に次のコードが含まれているとします。
<mx:Button label="Icon Button" icon="@Embed(source='assets/logo.gif')"/>
この例では、testEmbed.mxml ファイルのあるディレクトリ内で、assets という名前のサブディレクトリが検索されます。イメージが見つからない場合は、アプリケーションに関連付けられた SWC ファイル内のイメージが検索されます。
パスが円記号で始まる場合は、MXML ファイルのディレクトリ内でアセットが検索され、次にソースパスが検索されます。Flex コンパイラにソースパスを指定するには、source-path コンパイラオプションを使用します。例えば、source-path オプションを次のように使用します。
-source-path=a1,a2,a3
次に MXML ファイル a1/testEmbed.mxml が次のコードを使用します。
<mx:Button label="Icon Button" icon="@Embed(source='/assets/logo.gif')"/>
a1/assets、a2/assets、a3/assets の順にこのファイルが検索されます。イメージが見つからない場合は、アプリケーションに関連付けられた SWC ファイル内のイメージが検索されます。
MXML ファイルが a2/testEmbed.mxml のように a2 ディレクトリに存在する場合は、最初に a2 ディレクトリが検索され、次に source-path オプションで指定されたディレクトリが検索されます。
MIME タイプについて
オプションで mimeType パラメータを使用すると、読み込むアセットの MIME タイプを指定できます。mimeType パラメータを指定しなかった場合、Flex は、ファイルの拡張子に基づいて、読み込むファイルのタイプを推測します。mimeType パラメータを指定した場合、このパラメータはデフォルトで推測されるアセットの種類をオーバーライドします。
Flex では、次の MIME タイプがサポートされます。
- application/octet-stream
- application/x-font
- application/x-font-truetype
- application/x-shockwave-flash
- audio/mpeg
- image/gif
- image/jpeg
- image/png
- image/svg
- image/svg-xml
[Embed] メタデータタグの使用
[Embed] メタデータタグを使用して、JPEG、GIF、PNG、SVG、SWF、TTF および MP3 ファイルを読み込むことができます。
[Embed] メタデータタグは、必ず変数定義の前に挿入します。変数のタイプは Class 型です。次の例では、イメージファイルをロードし、それに imgCls 変数を割り当て、その変数を使用して Image コントロールの source プロパティに値を設定しています。
<?xml version="1.0"?>
<!-- embed\ImageClass.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
width="100" height="80" borderStyle="solid">
<mx:Script>
<![CDATA[
[Embed(source="logo.gif")]
[Bindable]
public var imgCls:Class;
]]>
</mx:Script>
<mx:Image source="{imgCls}"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
Flex では、source プロパティに imgCls 変数を設定する際にデータバインディングを使用します。imgCls 変数定義の前に [Bindable] メタデータタグを記述しない場合は、アプリケーションの起動時に一度だけデータバインディングが実行されます。[Bindable] メタデータタグを記述した場合は、imgCls 変数へのすべての変更が認識され、変数の変更時に、この変数を使用するすべてのコンポーネントが更新されます。
一般に、アセットを埋め込むことは、それ以外の方法と比較すると、柔軟性に富むやり方です。その理由には、一度読み込んだアセットをアプリケーション内で何度も使用できることや、アセットを更新したときにはデータバインディングによって更新をアプリケーション全体へ反映できることなどが挙げられます。
MXML での @Embed() ディレクティブの使用
Button や TabNavigator など、Flex コンポーネントの多くは、icon プロパティなど、コントロールにイメージを指定するためのプロパティを備えています。MXML で @Embed() ディレクティブを使用してプロパティ値を指定することによって、イメージアセットを埋め込むことができます。SWF ファイルや SWF ファイル内のアセットなど、サポートされていればどのようなグラフィックファイルでも、@Embed() ディレクティブを使用して埋め込むことができます。
@Embed() ディレクティブを使用して、MXML タグプロパティを設定するか、または、子タグを使用してプロパティ値を設定できます。@Embed() ディレクティブは Class 型または String 型の値を返します。コンポーネントのプロパティが String 型の場合、@Embed() ディレクティブはストリングを返します。コンポーネントのプロパティが Class 型の場合、@Embed() ディレクティブはクラスを返します。他のデータ型の値を取るプロパティと共に @Embed() ディレクティブを使用するとエラーが発生します。
次の例では、Button コントロールを作成し、@Embed() ディレクティブを使用してこのコントロールの icon プロパティを設定します。
<?xml version="1.0"?>
<!-- embed\ButtonAtEmbed.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Button label="Icon Button" icon="@Embed(source='logo.gif')"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
スタイルシートでのアセットの埋め込み
Flex コンポーネントの多くのスタイルプロパティでは、読み込まれたアセットをサポートします。スタイルプロパティを使用してコンポーネントにスキンを設定することは頻繁に行われます。「スキニング」とは、コンポーネントのビジュアルエレメントを修正または置換することで外観を変更する処理です。これらのエレメントを構成するのは、イメージ、SWF ファイル、または描画 API メソッドが含まれるクラスファイルなどです。
スキニングと、スタイルシートを使用したアセットの埋め込みの詳細については、スキンの作成を参照してください。
このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート