Adobe Flex 3 ヘルプ

Image コントロール

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

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

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

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

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

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

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

use-network フラグについて詳しくは、Flex コンパイラの使用を参照してください。

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

アプリケーションのセキュリティについて詳しくは、Flex へのセキュリティの適用を参照してください。

SVG 描画の制限

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

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

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

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

イメージパスの指定

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

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

  1. source="@Embed(source='relativeOrAbsolutePath')"

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

    次の例は、JPEG イメージを Flex アプリケーションに読み込んでいます。

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

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

    この例では、イメージのサイズは、イメージファイルのデフォルトサイズになります。

  2. source="relativeOrAbsolutePathOrURL"

    参照されたイメージファイルは、生成済み SWF ファイルの一部としてパッケージ化されるのではなく、実行時に Flex によってロードされます。参照できるのは、GIF、JPEG、PNG および SWF のファイルだけです。use-network フラグを false に設定すると、ローカルファイルシステムのリソースにアクセスできますが、ネットワーク上のリソースにはアクセスできません。デフォルトの true に設定すると、ネットワーク上のリソースにアクセスできますが、ローカルファイルシステムのリソースにはアクセスできません。

    次の例は、実行時に JPEG イメージにアクセスしています。

    <?xml version="1.0"?>
<!-- controls\image\ImageSimple.mxml -->
<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>

前の例で実行する SWF ファイルは以下のとおりです。

次の例では、相対パスを使用して、アプリケーションのルートディレクトリと同じレベルの「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>

前の例で実行する SWF ファイルは以下のとおりです。

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 × 100 ピクセルです。高さと幅を 20 × 20 ピクセルに指定することにより、イメージのサムネールを作成できます。

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

    <mx:Image id="image1" 
        source="@Embed(source='logo.jpg')" 
        width="20" height="20"/>
    <mx:Image id="image2" 
        source="@Embed(source='logo.jpg')"/>
</mx:Application>

前の例で実行する SWF ファイルは以下のとおりです。

サイズ設定時の縦横比の維持

イメージの縦横比とは、イメージの高さと幅の比率のことです。例えば、標準の NTSC テレビでは 4 ： 3 の縦横比が使用されるのに対し、HDTV では 16 ： 9 が使用されます。640 × 480 ピクセルの解像度に設定されたコンピュータのモニタでも、4 ： 3 の縦横比が使用されています。正方形の縦横比は 1 ： 1 です。

すべてのイメージは、本来の縦横比を持っています。Image コントロールの height プロパティや width プロパティを使ってイメージのサイズを変更した場合、イメージが歪んで表示されないように、デフォルトで縦横比が維持されます。

イメージの縦横比を維持するため、<mx:Image> タグで指定された高さと幅で完全に描画することができない場合もあります。例えば、元のイメージが 100 × 100 ピクセル、縦横比 1 ： 1 の正方形のとき、次のステートメントでイメージをロードしたとします。

<mx:Image source="myImage.jpg" height="200" width="200"/>

イメージは、元のサイズの 4 倍に拡大され、200 × 200 ピクセル領域全体に描画されます。

次の例では、同じイメージの高さと幅を 150 × 200 ピクセル、縦横比 3 ： 4 に設定しています。

<mx:Image source="myImage.jpg" height="150" width="200"/>

この例では、サイズ変更されたイメージに対して正方形の領域が指定されていません。デフォルトでは、Flex によりイメージの縦横比が維持されるので、イメージのサイズはサイズ上の制約に従いながら縦横比を維持できる最大の大きさ、つまり 150 × 150 ピクセルに変更されます。残りの 50 × 150 ピクセルの領域は空白のままになります。ただし、この空白の領域も <mx:Image> タグで確保されているので、他のコントロールやレイアウトエレメントが利用することはできません。

Resize エフェクトを使用することにより、トリガに反応してイメージの幅と高さを変更できます。Resize エフェクトを構成するときに、イメージの新しい高さと幅を指定します。デフォルトでイメージの縦横比が維持されるため、イメージは縦横比を維持しつつ、可能な限り新しいサイズに合うようにサイズ変更されます。次の例では、イメージの内側にマウスポインタを重ねるとイメージが拡大され、イメージの外側にマウスポインタを移動すると元のサイズに戻ります。

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

    <mx:Resize id="resizeBig" widthFrom="120" widthTo="200"/>
    <mx:Resize id="resizeSmall" widthFrom="200" widthTo="120"/>

    <mx:Image width="120" 
        source="@Embed('logo.jpg')" 
        rollOverEffect="{resizeBig}" 
        rollOutEffect="{resizeSmall}"/>
</mx:Application>

前の例で実行する SWF ファイルは以下のとおりです。

Resize エフェクトについて詳しくは、ビヘイビアの使用を参照してください。

イメージのサイズ変更時に縦横比を維持したくない場合は、maintainAspectRatio プロパティを false に設定します。デフォルトでは、maintainAspectRatio が true に設定され、縦横比の維持が有効になっています。

次の例は、縦横比に無関係に Flex のロゴの高さと幅のプロパティに明示的に値を指定してサイズを変更しています。

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

    <mx:Image id="image1" 
        source="@Embed('logo.jpg')" 
        width="250" height="100" 
        maintainAspectRatio="false"/> 
</mx:Application>

前の例で実行する SWF ファイルは以下のとおりです。

縦横比を維持しない設定を選択することにより、イメージにあえて歪みを適用することもできます。例えば、Adobe のロゴはデフォルトでは 136 × 47 ピクセルです。次の例では、イメージのサイズ変更で縦横比が維持されないため、イメージが歪んでいます。

ÉCÉÅÅ[ÉWÇÃÉTÉCÉYïœçXÇÝècâ°î‰Ç™à¤éùÇŠÇÍǻǢǾÇflÅAÉCÉÅÅ[ÉWÇ™òcÇÒÇÝǢNjDzÅB

Canvas コンテナへのイメージの配置

Canvas コンテナ、および layout プロパティが absolute に設定された Panel コンテナおよび Application コンテナを使用すると、コンテナ内でその子の位置を指定できます。イメージの絶対位置を指定するには、Image コントロールの x プロパティと y プロパティを使用します。

注意: その他のすべてのコンテナでは、子の位置がコンテナによって制御され、x と y のプロパティは無視されます。

x プロパティと y プロパティは、Canvas コンテナのイメージの左上隅の位置を指定します。次の例では、イメージの位置を（40,40）、つまり、Canvas コンテナの左上隅から 40 ピクセル下、40 ピクセル右に設定しています。

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

    <mx:Canvas id="canvas0" 
        borderStyle="solid"
        width="200"
        height="200">
        <mx:Image id="img0" 
            source="@Embed('logo.jpg')" 
            x="40" y="40"/>
    </mx:Canvas>
</mx:Application>

前の例で実行する SWF ファイルは以下のとおりです。

可視性（表示／非表示）の設定

Image コントロールの visible プロパティを使用すると、ロードしたイメージを非表示の状態にすることができます。デフォルトでは、イメージは表示状態になります。イメージを非表示の状態にするには、visible プロパティを false に設定します。次の例は、イメージをロードし、そのイメージを非表示の状態にしています。

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

    <mx:VBox id="vbox0" 
        borderStyle="solid">
        <mx:Image id="img0" 
            visible="false" 
            source="@Embed(source='logo.jpg')"/>
    </mx:VBox>
</mx:Application>

前の例で実行する SWF ファイルは以下のとおりです。

イメージを非表示の状態に設定したとしても、VBox コンテナは、子をレイアウトするときに、イメージ用の領域を確保します。したがって、VBox はイメージファイルと同じサイズとなり、このアプリケーションで、<mx:Image> タグの後に Button コントロールを追加しても、イメージを表示状態にした場合と同じ位置にボタンが表示されます。

イメージを非表示にし、他の子のサイズと位置の設定時に親のコンテナでイメージを無視させる場合は、Image コントロールの includeInLayout プロパティを false に設定します。デフォルトでは、includeInLayout プロパティは true に設定されているので、イメージが非表示になっていても、表示されているかのようにサイズと位置がコンテナによって設定されます。

visible プロパティは、特定のイメージだけを表示して、それ以外を非表示にするような場合に利用します。例えば、アプリケーションの領域に対し、3 つのイメージのうち、ユーザーの操作に基づいて、いずれか 1 つだけを表示したい場合があります。3 つあるイメージのうち、1 つだけ visible プロパティを true for に設定し、それ以外のすべてのイメージは visible プロパティを false に設定して不可視状態にすることができます。

イメージのプロパティは ActionScript を使用して設定できます。次の例では、ユーザーがボタンをクリックすると、イメージの visible プロパティが true に設定されて、このイメージが表示されます。

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

    <mx:Script>
        <![CDATA[
            private function showImage():void {
                image1.visible=true;
            }
        ]]>
    </mx:Script>
    <mx:VBox id="vbox0" 
        width="80" 
        height="80">
        <mx:Image id="image1" 
            visible="false" 
            source="@Embed(source='logo.jpg')"/> 
        <mx:Button id="myButton" 
            label="Show" click="showImage();"/>
    </mx:VBox>
</mx:Application>

前の例で実行する SWF ファイルは以下のとおりです。

visible プロパティを設定すると、イメージをロードするタイミングを制御できます。ページがロードされるときに、イメージを不可視状態にしたまま領域のみを割り当てることにより、パフォーマンスの低下を初期化段階に集中させることができます。アプリケーションが初期化された後のインターフェイスでは既にイメージがロードされているため、ユーザーはイメージを使った操作を快適に実行することができます。また、アプリケーションのサイズ変更や再レイアウトに伴う外観の乱れも、visible プロパティを設定することにより防ぐことができます。

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

製品カタログでは、ユーザーが商品をクリックすると、その商品のイメージが表示される、という手法がよく使われています。カタログ作成のテクニックの 1 つとして、カタログのイメージをすべて非表示状態にした上でアプリケーションにロードする方法があります。ユーザーが商品を選択すると該当するイメージが表示される、というものです。

ただし、この方法では、カタログに掲載するすべてのイメージについて Image コントロールを追加し、アプリケーションの起動時に非表示のものを含めてイメージをロードする必要があります。すべてのイメージを取り込まなければならないので、SWF ファイルのサイズが不必要に大きくなってしまうばかりか、非表示のイメージをロードすることにより、起動時間に悪影響が及ぶ可能性があります。

もっと効率のよい方法は、イメージを必要に応じてサーバーからダイナミックにロードすることです。非表示のイメージを格納する必要がないため SWF ファイルのサイズを抑えることができ、起動時間も短縮されます。

この方法を実装するためには、<mx:Image> タグを定義する ActionScript クラスが、SWFLoader クラスのサブクラスになっていることが前提です。イメージを作成した後で、イメージファイルを動的にロードする load() メソッドなど、SWFLoader コントロールのプロパティとメソッドを使用してイメージを操作できます。

注意: SWFLoader コントロールの load() メソッドは、GIF、JPEG、PNG および SWF のファイルに対してのみ機能します。このメソッドで SVG ファイルをロードすることはできません。

次の例は、ユーザーがボタンをクリックしたときに、load() メソッドで、logo.jpg のイメージを logowithtext.gif に置き換えています。

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

  <mx:Script>
    <![CDATA[
      private function afterImage():void {
        image1.load('http://localhost:8100/flex/assets/logowithtext.jpg');
      }
    ]]>
  </mx:Script>

  <mx:VBox id="vbox0" 
      width="150" height="100">
      <mx:Image id="image1" source="logo.jpg"/> 
      <mx:Button id="myButton" 
          label="Show Second Image" 
          click="afterImage();"/>
  </mx:VBox>
</mx:Application>

この例では、アプリケーションがローカルファイルシステムのイメージにアクセスしています。イメージは URL によって埋め込みまたはアクセスされていません。したがって、このアプリケーションは、use-network フラグを false に設定してコンパイルする必要があります。

load() メソッドを呼び出しても、イメージを保持するコンテナは子のレイアウトを調整しません。そのため、置き換えるイメージは同じサイズにするのが普通です。新しいイメージが元のイメージと比べあまりに大きい場合、コンテナの他のコンポーネントが覆い隠されてしまいます。

置き換えるイメージは、アプリケーションでユーザーが行ったアクションに基づいて選択します。例えば、ユーザーがリストボックスやデータグリッド内で選択した内容に基づいてイメージをロードすることができます。

次の例では、データグリッド内で選択されたアイテムのインデックス番号を使用して、ロードするイメージを決定しています。この例では、グリッド内のアイテムに対応する「1.jpg」、「2.jpg」、「3.jpg」のような名前がイメージに付けられています。

// Retrieve the image associated with the item selected in the grid
private function getImage():void {
    var cartGrid:DataGrid = dgrid;
    var imageSource:String = 'images/' + cartGrid.getSelectedIndex() + '.jpg';
    image1.load(imageSource);
}

この例では、イメージが「images」ディレクトリに格納されています。イメージのパスは、ディレクトリ名、インデックス番号およびファイル拡張子（.jpg）になります。

この関数を、次に示すように、change イベントのイベントリスナーとしてデータグリッドに登録する必要があります。

<mx:DataGrid id="dgrid" height="200" width="350" change="getImage();"/>

ユーザーがデータグリッド内で別のアイテムを選択すると、Flex によって getImage() 関数が呼び出され、表示されるイメージが更新されます。

この例では、選択されたアイテムのインデックスを使用してロードするイメージを決めていますが、選択されたアイテムの情報を使用してロードするイメージが決定されるように変更することも可能です。例えば、グリッドに一連のオブジェクトがあり、各オブジェクトには対応するイメージ名を持つプロパティがあるとします。

load() メソッドの他にも、percentLoaded などの、SWFLoader コントロールの他のプロパティにアクセスすることもできます。特に有用なのは percentLoaded プロパティです。このプロパティを利用してプログレスバーを表示することにより、アプリケーションが単に処理を行っているだけで、フリーズしたわけではないことをユーザーに伝えることができます。SWFLoader のプロパティとメソッドの完全なリストについては、『Adobe Flex リファレンスガイド』を参照してください。

 

このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート