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

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

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

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

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

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

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

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

この例では、サイズ変更されたイメージに対して正方形の領域が指定されていません。デフォルトでは、Flex によりイメージの縦横比が維持されるため、イメージのサイズは、サイズ上の制約に従いながら縦横比を維持できる最大の大きさ、つまり、150 x 150 ピクセルに変更されます。残りの 50 x 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>

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>

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

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

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

可視性 (表示 / 非表示) の設定

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>

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

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

visible プロパティは、特定のイメージだけを表示して、それ以外を非表示にするような場合に利用します。たとえば、アプリケーションの領域に対し、3 つのイメージのうち、ユーザーの操作に基づいて、いずれか 1 つだけを表示したい場合があります。3 つあるイメージのうち、1 つだけ visible プロパティを true に設定し、それ以外のすべてのイメージは 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>

次の例は、ユーザーがボタンをクリックする前後の状態を示しています。

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

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

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

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

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

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

次の例は、ユーザーがボタンをクリックしたときに、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" のような名前がイメージに付けられています。

// グリッド内で選択されたアイテムに対応するイメージを取得します。
private function getImage():void {
    var cartGrid = 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 2 リファレンスガイド』を参照してください。