Flex 2 開発ガイド > Flex アプリケーションのユーザーインターフェイスの作成 > コントロールの使用 > Image コントロール

Image コントロール

Adobe Flex は、GIF、JPEG、PNG、SVG、SWF ファイルなど、複数のイメージ形式をサポートしています。Image コントロールを使用すると、これらのイメージをアプリケーションに読み込むことができます。

メモ

Flex には、Flex 2 アプリケーションをロードする SWFLoader コントロールもあります。静止グラフィックファイルと SWF ファイルのロードには、通常 Image コントロールを使用し、Flex 2 アプリケーションのロードには、SWFLoader コントロールを使用します。Image コントロールは、カスタムアイテムレンダラーとアイテムエディタでも使用できるように設計されています。SWFLoader コントロールの詳細については、SWFLoader コントロールを参照してください。

サブトピック

イメージの読み込みについて

SVG 描画の制限

Image コントロールを使用したイメージ読み込みの制御

Image コントロールの使用テクニック

イメージの読み込みについて

Flex ではイメージの読み込みについて、実行時に GIF、JPEG、PNG、および SWF ファイルを読み込む方法、およびコンパイル時に GIF、JPEG、PNG、SVG、および SWF ファイルを埋め込む方法をサポートしています。どちらの方法を選択するかは、イメージのファイルタイプとアプリケーションの特性によって異なります。

イメージを埋め込んだ場合、埋め込まれたイメージは Flex SWF ファイルの一部となるため、ロードは直接的に行われます。ただし、アプリケーションのサイズが増えるので、アプリケーションの初期化プロセスは遅くなります。また、埋め込みイメージは、イメージファイルに変更を加えるたびにアプリケーションを再コンパイルする必要があります。リソース埋め込みの概要については、アセットの埋め込みを参照してください。

リソースを埋め込まない場合は、実行時にリソースをロードします。SWF ファイルが実行されるローカルなファイルシステムからリソースをロードすることもできますし、ネットワーク上の HTTP 要求を通じて (通常の方法)、リモートリソースにアクセスすることもできます。イメージは、Flex アプリケーションとは独立しているため、イメージの名前さえ同じであれば、修正を加えたとしても再コンパイルの必要はありません。イメージの参照により、アプリケーションの初期ロード時間に余分なオーバーヘッドが生じることはありません。ただし、イメージを Adobe Flash Player にロードするときに遅延が生じる場合があります。

SWF ファイルは、ローカルまたはネットワーク上の両方の外部リソースにアクセスすることができません。アクセスできるのは、いずれか一方だけです。SWF ファイルがどちらにアクセスできるようにするかは、アプリケーションのコンパイル時に use-network フラグを使用して決定します。use-network を false に設定すると、ローカルファイルシステムのリソースにアクセスできますが、ネットワーク上のリソースにはアクセスできません。デフォルトの true に設定すると、ネットワーク上のリソースにアクセスできますが、ローカルファイルシステムのリソースにはアクセスできません。

use-network フラグの詳細については、『Flex 2 アプリケーションの構築および展開ガイド』のFlex コンパイラの使用を参照してください。

実行時にイメージをロードする場合は、Flash Player のセキュリティ制限に注意する必要があります。たとえば、URL を使用してイメージを参照できますが、デフォルトのセキュリティ設定により、Flex アプリケーションは、対象アプリケーションと同じドメインに保存されたリソースにしかアクセスできません。他のサーバー上のイメージにアクセスするには、"crossdomain.xml" ファイルを使用する必要があります。

アプリケーションのセキュリティの詳細については、『Flex 2 アプリケーションの構築および展開ガイド』のFlex セキュリティの適用を参照してください。

SVG 描画の制限

Flex で SVG ファイルを操作する場合は、次の制限に注意する必要があります。

SVG ファイルはアプリケーションに埋め込むことができるだけで、実行時にロードすることはできません。
SMIL とアニメーションはサポートされていません。
マスキングとフィルタはサポートされていません。
パターン塗りつぶしと一部の高度なグラデーションはサポートされていません。
ユーザー操作とスクリプトはサポートされていません。
SVG テキストは、検索および選択不可能な SWF シェイプアウトラインとしてレンダリングされます。つまり、Flash Player のネイティブテキストとしてはレンダリングされません。

Image コントロールを使用したイメージ読み込みの制御

Image コントロールは、イメージの読み込みに関して、次のアクションをサポートしています。

イメージパスの指定

Image コントロールの source プロパティの値には、読み込むイメージファイルへの相対パスか絶対パス、または URL を指定します。相対パスを指定する場合、そのタグが使われているファイルのディレクトリが起点となります。詳細については、イメージパスの指定を参照してください。

source プロパティには次の形式があります。

source="@Embed(source='relativeOrAbsolutePath')"
参照されたイメージは、Flex がアプリケーション用 SWF ファイルを生成するコンパイル時に、生成済み SWF ファイルにパッケージ化されます。埋め込むことができるのは、GIF、JPEG、PNG、SVG、SWF のファイルです。イメージを埋め込む場合、source プロパティの値は、ローカルファイルシステム上のファイルへの相対パスまたは絶対パスである必要があります。URL を指定することはできません。

次の例は、JPEG イメージを Flex アプリケーションに読み込んでいます。
```
<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Image id="loader1" source="@Embed(source='logo.jpg')"/> 
</mx:Application>
```
この例では、イメージのサイズは、イメージファイルのデフォルトサイズになります。
source="relativeOrAbsolutePathOrURL"
参照されたイメージファイルは、生成済み SWF ファイルの一部としてパッケージ化されるのではなく、実行時に Flex によってロードされます。参照できるのは、GIF、JPEG、PNG、および SWF のファイルだけです。use-network を false に設定すると、ローカルファイルシステムのリソースにアクセスできますが、ネットワーク上のリソースにはアクセスできません。デフォルトの true に設定すると、ネットワーク上のリソースにアクセスできますが、ローカルファイルシステムのリソースにはアクセスできません。

次の例は、実行時に JPEG イメージにアクセスしています。
```
<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Image id="loader1" source="logo.jpg"/> 
</mx:Application>
```
source プロパティに @Embed が指定されていないため、イメージは実行時にロードされます。

多くのアプリケーションでは、イメージを格納するための専用のディレクトリが作成されます。通常、このようなディレクトリは、アプリケーションのメインディレクトリのサブディレクトリになります。source プロパティは、イメージへの相対パスをサポートしているため、アプリケーションディレクトリに対する相対位置でイメージファイルを指定できます。

次の例では、すべてのイメージを、アプリケーションディレクトリの "assets" サブディレクトリに格納しています。

<?xml version="1.0"?>
<!-- controls\image\ImageSimpleAssetsDir.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Image id="loader1" source="@Embed(source='assets/logo.jpg')"/> 
</mx:Application>

次の例では、相対パスを使用して、アプリケーションのルートディレクトリと同じレベルの "assets" ディレクトリにあるイメージを参照しています。

<?xml version="1.0"?>
<!-- controls\image\ImageSimpleAssetsDirTop.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Image id="loader1" source="@Embed(source='../assets/logo.jpg')"/> 
</mx:Application>

URL を使用してイメージを参照することもできますが、デフォルトのセキュリティ設定により、Flex アプリケーションは、対象アプリケーションと同じドメインに保存されたリソースにしかアクセスできません。他のサーバー上のイメージにアクセスするには、"crossdomain.xml" ファイルを使用する必要があります。

次の例では、URL を使用してイメージを参照する方法を示します。

<?xml version="1.0"?>
<!-- controls\image\ImageSimpleAssetsURL.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Image id="image1" 
        source="http://localhost:8100/flex/assets/logo.jpg"/> 
</mx:Application>

メモ

Flex アプリケーションと同じ Web サーバーにホストされたイメージを相対 URL で指定できます。ただし、その場合、ローカルでイメージにアクセスするのではなく、インターネットを介してロードする必要があります。

イメージの再利用

正しいイメージ読み込みシンタックスを使用することで、アプリケーション内で同じイメージを何度も使用できます。Flex はイメージを一度しかロードしませんが、ロードしたイメージを必要な回数だけ何度でも参照します。

イメージのサイズ設定

読み込んだイメージの高さと幅には、イメージファイルの設定が使われます。デフォルトでは、イメージのサイズ変更は行われません。

読み込むイメージの高さまたは幅を明示的に設定するには、Image コントロールの height プロパティと width プロパティを設定します。height プロパティまたは width プロパティを使用すると、親コントロールに依存しないサイズを設定できます。デフォルトで scaleContent プロパティが true に設定されているため、指定された高さと幅に合わせてイメージが拡大 / 縮小されます。デフォルトではイメージの縦横比が維持されるため、指定された領域全体を使用してイメージが表示されることはありません。イメージのサイズを明示的に設定する場合は、scaleContent プロパティを false に設定して、拡大 / 縮小を無効にしてください。イメージのサイズに無関係に、使用できる領域全体を使用してイメージを表示するには、maintainAspectRatio プロパティを false に設定します。イメージの縦横比の詳細については、サイズ設定時の縦横比の維持を参照してください。

イメージのサイズがアプリケーションのレイアウトの一部として変更されるようにするには、height プロパティまたは width プロパティに、親コンテナに対する倍率 (%) を指定します。コンポーネントは、Flex により、指定されたプロパティに基づいてサイズ変更されます。maxHeight/maxWidth や minHeight/minWidth といったプロパティを使用して、サイズ変更の上限と下限を指定することもできます。サイズ変更の詳細については、コンテナについてを参照してください。

イメージのサイズ変更の一般的な用途に、イメージサムネールの作成があります。次の例に使用されているイメージの元々の高さと幅は 100 x 100 ピクセルです。高さと幅を 20 x 20 ピクセルに指定することにより、イメージのサムネールを作成できます。

<?xml version="1.0"?>
<!-- controls\image\ImageSimpleThumbnail.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Image id="image1" 
        source="logo.jpg" 
        width="20" height="20"/>
    <mx:Image id="image2" 
        source="logo.jpg"/>
</mx:Application>

Flex 2.01