Flex の画像の扱い

画像のロードと Bitmap オブジェクト

Flex で画像を扱いたい場合、埋め込むか外部からロードするかですが、
処理の仕方は違いますが、取り込まれた画像の基本的な扱いは Bitmap オブジェクトです

[Bindable]   
[Embed("smile.png")]   
private var imgSmile:Class;

まず、上記定義で imgSmile は、クラスとして定義されていますが、
これは、Bitmap クラスのサブクラスで、インスタンスを作成
すると、bitmapData プロパティに smile.png のデータがセットされます。

つまり、img:Bitmap = new imgSmile(); です。

また、loader:Loader = new Loader(); で作成された loader オブジェクトは
content プロパティを持ちますが、これは Bitmap オブジェクトです。

つまり、以下の実行が可能です

Bitmap(img.content).bitmapData = Bitmap(loader.content).bitmapData;

Bitmap オブジェクトは、実体としての BitmapData オブジェクトの容器であり、
別のBitmap オブジェクトが、同じ BitmapData オブジェクトを参照する事もできます。

imgSmile の 新しいインスタンスはそれぞれ別々の BitmapData オブジェクト
を持ちます。BitmapData.clone() で複製も可能で、廃棄は BitmapData で
dispose します。

Image オブジェクトの プロパティである source プロパティや、
WindowedApplication の titleIcon プロパティは特殊なプロパティで、
Flex の仕様の元、変換可能な記述を自動的に Bitmap オブジェクトに変換
してくれます

    // *********************************************************   
    // 単純な Image Class の処理   
    // *********************************************************   
    public function Action2():void {   
   
//      img2.addChild( smile );   
//      img2.source = "http://localhost/php/smile.png";   
//      img2.source = "c:\\tmp\\smile.png";   
//      img2.source = "smile.png";   
//      img2.source = smile;   
//      img2.source = imgSmile;   
        Bitmap(img2.content).bitmapData = smile.bitmapData;   
   
    }   

上記の 7 つの処理は同じ結果になります。
( addChild は、見た目に関して同じ )


また、Sprite オブジェクトより継承された表示オブジェクトには、
graphics プロパティがあり、これを使用して、BitmapData オブジェクトを
描画する事も可能です。

※ 複数の別々の画像を重ねるのには向いていません、
※ そのような場合は、別々のオブジェクトを作成してコンテナに追加します

// Image オブジェクトに対する描画
// ( 対象が大きければ繰り返し描画されます )
img.graphics.beginBitmapFill( smile.bitmapData );   
img.graphics.drawRect(0, 0, smile.width, smile.height);
img.graphics.endFill();

特殊な描画としては、Flash としてのルートとなる描画エリアである
stage に対しては、Bitmap オブジェクトを直接追加可能です。

この場合はこのページの先頭の画像のように、タイトルエリアを無視した
表示が可能になります。また、逆に言えば、 stage に対しては、
mx.* コントロールを追加しても表示される事はありません。
( Bitmap オブジェクトを追加する必要があります )

テスト用のソースコード

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication
    xmlns:mx="http://www.adobe.com/2006/mxml"
    initialize="initData();"
 
    usePreloader="true"
 
    headerHeight="80"
    cornerRadius="20"
    titleTextStyleName="titleStyle"
    layout="absolute"
>
 
<mx:Style>
WindowedApplication {
    backgroundGradientColors: 0,9044009;
}
.titleStyle {
    fontSize: 12;
}
</mx:Style>
 
<mx:Script>
<![CDATA[
 
    [Bindable]
    [Embed("smile.png")]
    private var imgSmile:Class;
 
    private var loader:Loader = new Loader();
    private var smile:Bitmap = new imgSmile();
 
    // *********************************************************
    // アプリケーションの初期化
    // *********************************************************
    public function initData():void {
 
        img.source = new Bitmap();
        img2.source = new Bitmap();
 
    }
 
    // *********************************************************
    // Loader による画像取得
    // *********************************************************
    public function Action1():void {
 
        // 読み込み完了イベントを登録
        loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);
 
        // 読み込み
        loader.load(new URLRequest("http://localhost/php/smile.png"));
//      loader.load(new URLRequest("smile.png"));
//      loader.load(new URLRequest("c:\\tmp\\smile.png"));
 
    }
 
    // *********************************************************
    // 読み込み完了イベント
    // *********************************************************
    private function loadComplete(e:Event):void {
 
        // target は、LoaderInfo
 
//      img.addChild( e.target.loader );
//      img.addChild( loader.content );
//      img.addChild( loader );
//      img.source = e.target.content;
//      img.source = loader.content;
//      img.source = loader;
//      Bitmap(img.content).bitmapData = e.target.content.bitmapData;
        Bitmap(img.content).bitmapData = Bitmap(loader.content).bitmapData;
 
    }
 
    // *********************************************************
    // 単純な Image Class の処理
    // *********************************************************
    public function Action2():void {
 
//      img2.addChild( smile );
//      img2.source = "http://localhost/php/smile.png";
//      img2.source = "c:\\tmp\\smile.png";
//      img2.source = "smile.png";
//      img2.source = smile;
//      img2.source = imgSmile;
        Bitmap(img2.content).bitmapData = smile.bitmapData;
 
    }
 
 
    // *********************************************************
    // 少し特殊な画像描画
    // *********************************************************
    public function Action3():void {
 
        // mx を無視した flash 全体への描画
        stage.addChild( smile );
 
        // Image Class の source プロパティと同じ
        titleIcon = imgSmile;
 
        // mx ルートコンテナへの追加
//      var mxImg:Image = new Image();
//      mxImg.source = "smile.png";
//      addChild(mxImg);
 
        // Image オブジェクトに対する描画
        // ( 対象が大きければ繰り返し描画されます )
        img.graphics.beginBitmapFill( smile.bitmapData );   
        img.graphics.drawRect(0, 0, smile.width, smile.height);
        img.graphics.endFill();
 
 
    }
 
]]>
</mx:Script>
 
<mx:Image 
    id="img"
    x="0"
    y="0"
/>
<mx:Image 
    id="img2"
    x="100"
    y="0"
/>
 
    <mx:Button
        x="150"
        y="150"
        label="画像テスト1"
        click="Action1();"
    />
     
    <mx:Button
        x="150"
        y="200"
        label="画像テスト2"
        click="Action2();"
    />
 
    <mx:Button
        x="150"
        y="250"
        label="画像テスト3"
        click="Action3();"
    />
 
</mx:WindowedApplication>