画像のロードと 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>
|
