フレックス-画像制御

前書き

Imageコントロールを使用すると、実行時にJPEG、PNG、およびGIFファイルをインポートできます。 @Embed（source = 'filename'）を使用して、コンパイル時にこれらのファイルを埋め込むこともできます。

埋め込み画像はFlex SWFファイルでコンパイルされるため、すぐに読み込まれます。ただし、アプリケーションのサイズが増加し、アプリケーションの初期化プロセスが遅くなります。また、埋め込み画像では、画像ファイルが変更されるたびにアプリケーションを再コンパイルする必要があります。

SWFファイルが実行されるローカルファイルシステムからイメージをロードするか、通常はネットワーク経由のHTTPリクエストを介してリモートイメージにアクセスできます。これらのイメージはFlexアプリケーションから独立しているため、変更されたイメージの名前が同じである限り、再コンパイル操作を行わずに変更できます。参照されたイメージは、アプリケーションの初期ロード時間に追加のオーバーヘッドを追加しません。

クラス宣言

以下は spark.components.Image クラスの宣言です-

public class Image
   extends SkinnableComponent

パブリックプロパティ

Sr.No	Property & Description
1	bitmapData : BitmapData [read-only] Returns a copy of the BitmapData object representing the currently loaded image content (unscaled).
2	bytesLoaded : Number [read-only] The number of bytes of the image already loaded.
3	bytesTotal : Number [read-only] The total image data in bytes loaded or pending load.
4	clearOnLoad : Boolean 新しいコンテンツをロードする前に、以前の画像コンテンツをクリアするかどうかを示します。
5	contentLoader : IContentLoader オプションのカスタム画像ローダー
6	contentLoaderGrouping : String 関連付けられたIContentLoaderインスタンスのload（）メソッドに渡すオプションのコンテンツグルーピング識別子。
7	fillMode : String ビットマップが寸法をどのように塗りつぶすかを決定します。
8	horizontalAlign : String コンテンツの縦横比が1対1でなく、scaleModeがmx.graphics.BitmapScaleMode.LETTERBOXに設定されている場合のコンテンツの水平方向の配置。
9	preliminaryHeight : Number 画像の「測定された」境界がレイアウトによって要求されているが、画像データの読み込みがまだ完了していない場合に、高さに使用する推定値を提供します。
10	preliminaryWidth : Number 画像の「測定された」境界がレイアウトによって要求されているが、画像データの読み込みがまだ完了していない場合に、幅に使用する推定値を提供します。
11	scaleMode : String fillModeがmx.graphics.BitmapFillMode.SCALEに設定されている場合の画像のスケーリング方法を決定します。
12	smooth : Boolean ビットマップイメージにスムージングアルゴリズムを適用するかどうかを指定します。
13	source : Object ビットマップ塗りつぶしに使用されるソース。
14	sourceHeight : Number [read-only] Provides the unscaled height of the original image data.
15	sourceWidth : Number [read-only] Provides the unscaled width of the original image data.
16	trustedSource : Boolean [read-only] A read-only flag denoting whether the currently loaded content is considered loaded form a source whose security policy allows for cross domain image access.
17	verticalAlign : String コンテンツの縦横比が1対1でなく、scaleModeがmx.graphics.BitmapScaleMode.LETTERBOXに設定されている場合のコンテンツの垂直方向の配置。

パブリックメソッド

Sr.No	Method & Description
1	Image() コンストラクタ。

イベント

Sr.No	Events & Description
1	complete コンテンツのロードが完了すると送出されます。
2	httpStatus ネットワーク要求がHTTP経由で行われ、Flash PlayerがHTTPステータスコードを検出できる場合に送出されます。
3	ioError 入力または出力エラーが発生したときに送出されます。
4	progress コンテンツのロード時に送出されます。
5	ready コンテンツのロードが完了すると送出されます。
6	securityError セキュリティエラーが発生したときに送出されます。

継承されるメソッド

このクラスは、次のクラスからメソッドを継承します-

spark.components.supportClasses.SkinnableComponent
mx.core.UIComponent
mx.core.FlexSprite
flash.display.Sprite
flash.display.DisplayObjectContainer
flash.display.InteractiveObject
flash.display.DisplayObject
flash.events.EventDispatcher
対象

Flex Imageコントロールの例

次の手順に従って、テストアプリケーションを作成して、Flexアプリケーションでのイメージコントロールの使用を確認します。

Step	Description
1	Create a project with a name HelloWorld under a packagecom.finddevguides.client as explained in the Flex - Create Application chapter.
2	Create a foler assets in HelloWorld application root folder HelloWorld.
3	Download a sample image flex-mini.png to a folder assets under HelloWorld folder.
4	Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged.
5	Compile and run the application to make sure business logic is working as per the requirements.

以下は、変更されたmxmlファイル src/com.finddevguides/HelloWorld.mxml の内容です。

<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
   xmlns:s = "library://ns.adobe.com/flex/spark"
   xmlns:mx = "library://ns.adobe.com/flex/mx"
   width = "100%" height = "100%" minWidth = "500" minHeight = "500"
   applicationComplete = "init(event)" >

   <fx:Style source = "/com/finddevguides/client/Style.css"/>
   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;

         [Bindable]
         [Embed(source = "assets/flex-mini.jpg")]
         private var flexImage:Class;
         protected function init(event:FlexEvent):void {
            dynamicImage.source =
               "http://www.finddevguides.com/images/flex-mini.png";
         }

      ]]>
   </fx:Script>

   <s:BorderContainer width = "550" height = "600" id = "mainContainer"
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
         verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Basic Controls Demonstration"
            fontSize = "40" color = "0x777777" styleName = "heading"/>

         <s:Panel title = "Using Embeded Image" width = "420" height = "200" >
            <s:Image source = "{flexImage}"/>
         </s:Panel>
         <s:Panel title = "Using Image from URL" width = "420" height = "200" >
            <s:Image id = "dynamicImage"/>
         </s:Panel>
      </s:VGroup>
   </s:BorderContainer>
</s:Application>

すべての変更が完了したら、link：/flex/flex_create_application [Flex-アプリケーションの作成]の章で行ったように、アプリケーションを通常モードでコンパイルして実行します。アプリケーションに問題がなければ、次の結果が生成されます。[link：/flex/samples/BasicControlsApplicationl [Try it online]]

Flex Image Control

Flex-image-control

目次