アクセシビリティ
デベロッパーリソース

Flash記事

 

Flash 8 のイメージ API の概要


目次

イメージの表示

BitmapData クラスのインスタンスはメモリ上に格納されており、表示のための操作を実行するまでは目に見えることはありません。表示する際には、レンダリング可能にするためにビットマップをステージにアタッチする必要があります。BitmapData オブジェクトのインスタンスは、新しい MovieClip.attachBitmap メソッドを次のように使用することで、任意のムービークリップ内に表示できます。

import flash.display.BitmapData

myBitmap = new BitmapData(100,100,false,0xFFFFCC00);
this.createEmptyMovieClip("holder_mc",1)
holder_mc.attachBitmap(myBitmap,1);

ムービークリップにアタッチしたビットマップを削除する方法はないので、ビットマップの表示だけを目的とした空のムービークリップを専用に作成しておくとよいでしょう。専用のムービークリップにアタッチしたビットマップは、次のように後でムービークリップを削除することにより削除できます。

holder_mc.removeMovieClip()

ビットマップをムービークリップにアタッチした後は、そのムービークリップに変更を加えると自動的に表示が更新されます。変更のたびにビットマップをアタッチし直す必要はありません。

スナップショット

BitmapData クラスの非常に便利な点の 1 つに、インスタンス名を持つあらゆるオブジェクト (ムービークリップ、ビデオオブジェクト、テキストフィールドなど) の表示状態のスナップショットからビットマップを作成する機能があります。これを使用して、ストリーミングビデオ、Web カメラ、ムービークリップなどのフレームの静止イメージを作成することもできます。

ステージ上にあるムービークリップなどのインスタンスからビットマップを作成するには、BitmapData.draw() メソッドを使用します。これはオブジェクトの現在の表示状態をビットマップ表現で描画するメソッドで、デフォルトではビットマップオブジェクトに何の変換も適用されません。つまり、たとえば Web カメラからのビデオフィードを表示中のビデオオブジェクトのスナップショットを作成する場合、そのビデオオブジェクトが回転されていたとしても、作成されるビットマップ表現は回転されていない状態になります。これについては、後のセクション「変換を伴うスナップショット」で説明します。

今のところは、ひとまず BitmapData.draw() メソッドの本質的な便利さだけに注目して話を進めましょう。このメソッドを最も単純な方法で使用した場合、指定したオブジェクトのビットマップ表現がベクターレンダラーによって描画されます。また、ビットマップのブレンドモードを適用することや、ColorTransform クラスによってビットマップに含まれるカラー値を算術変換することもできます。たとえば、ステージ上に animation_mc というムービークリップインスタンスがあり、その中にベクターアニメーションが配置されているとします。アニメーション再生中の何らかの時点で、そのときの表示状態のスナップショットからビットマップを作成するには、次のようにします。

import flash.display.BitmapData

myBitmap = new BitmapData(animation_mc._width,animation_mc._height,true,0x00FFFFFF)
myBitmap.draw(animation_mc)

変換マトリックス

Flash Player 8 で新たに用意された Matrix ActionScript クラスを使用すると、変換マトリックスを作成する際の面倒な処理が不要になります。変換マトリックスとは、ある座標空間から別の座標空間へとポイントをマッピングするために使用される、3 × 3 の数値から成るグリッドです。変換マトリックスを 1 つ使用するだけで、ビットマップまたはムービークリップに対する傾斜、回転、伸縮、移動の操作を一度に実行できます。Matrix クラスの詳細についてはこの記事で取り上げませんが、その代わり、よく使用することになる Matrix クラスのメソッドをいくつか紹介します。特に、BitmapData.draw() メソッドの第 2 パラメータを扱う場合はそれらのメソッドがしばしば必要となります。

変換マトリックスを作成する際には、まず、何度も完全修飾クラスパスを記述しなくてよいようにクラスを読み込んでおきます。Matrix クラスは flash.geom パッケージに属するので、次のようにして読み込みます。

import flash.geom.Matrix

それから、次のコードで Matrix クラスのインスタンスを作成します。

m = new Matrix()

これにより、デフォルトの単位マトリックスが作成されます。単位マトリックスは、オブジェクトに適用しても伸縮、回転、傾斜、移動が発生しないマトリックスです。

単位マトリックスを作成した後は、Matrix クラスの各種メソッドを使用してマトリックスの内部プロパティを変更することにより、オブジェクトに対してさまざまな変換を適用できます。

マトリックスを変更して、オブジェクトに適用すると拡大 / 縮小が発生するようにするには、Matrix.scale() メソッドを使用します。たとえば次のコードでは、オブジェクトのサイズを 2 倍にする変換マトリックスが作成されます。

import flash.geom.Matrix
m = new Matrix()
m.scale(2,2)

さらに変換マトリックスを変更して、オブジェクトに適用すると回転も同時に発生するようにするには、Matrix.rotate() メソッドを使用します。このメソッドのパラメータには、オブジェクトを回転させる角度をラジアン単位で指定します。度数からラジアンへの換算は、次の簡単な数式を使用して実行できます。

radians=(degrees/180)*Math.PI

次に示すコードでは、変換マトリックスを変更して、オブジェクトに適用すると 45 度の回転が発生するようにします。

m.rotate((45/180) Math.PI) // 45 度をラジアンに換算

オブジェクトに適用すると移動が発生するようにするには、Matrix.translate() メソッドに移動量のオフセットを指定して変換マトリックスを変更します。

m.translate(100,100) // オブジェクトを x 軸、y 軸それぞれ 100 ピクセル分移動

以上により作成した変換マトリックスをオブジェクトに適用すると、そのオブジェクトは 2 倍のサイズになり、45 度回転し、さらに x 軸、y 軸それぞれ 100 ピクセル分移動します。

変換を伴うスナップショット

前述のとおり、BitmapData.draw() メソッドには第 2 パラメータとして変換マトリックスを指定できます。それにより、ステージ上のオブジェクトのスナップショットをビットマップ表現として描画するときに変換を適用できます。

ムービークリップのスナップショットを作成するとき、デフォルトでは何の変換も適用されないため、たとえばステージ上のムービークリップに伸縮や回転が適用されていても、スナップショットは伸縮や回転を適用していない状態のイメージとなります。ただし、draw() メソッドの第 2 パラメータに変換マトリックスを指定してスナップショットを作成すれば、元のムービークリップと同じ変換を適用したビットマップを作成できます。

ActionScript またはオーサリング環境から、ステージ上のムービークリップを伸縮、回転、または移動すると、Flash Player の内部では、ムービークリップに正しい変換を適用して表示するために変換マトリックスが使用されます。Flash Player 8 の場合、この内部レベルの変換マトリックスには Movieclip.transform.matrix プロパティでアクセスできます。このプロパティからは、正しい変換の値があらかじめ設定されている Matrix クラスのインスタンスが返されるので、それまでにどのような変換がムービークリップに適用されているかを調べることができます。また、次のようなコードを記述すれば、あるムービークリップとまったく同じ変換を別のムービークリップに適用できます。

Movieclip1.transform.matrix=movieclip2.transform.matrix

次に示すコードでは、正方形を含んだムービークリップを作成し、これを ActionScript から伸縮および回転します。

import flash.display.BitmapData

this.createEmptyMovieClip("square_mc",1)

// ムービークリップ内に、描画 API で黄色の正方形を描画
with(square_mc)
{
beginFill(0xFFCC00)
lineStyle(1,0x000000)
lineTo(0,100)
lineTo(100,100)
lineTo(100.0)
lineTo(0.0)
endFill();
}

// 正方形を回転
square_mc._rotation=45

// 正方形を 2 倍のサイズに拡大
square_mc._xscale=square_mc._yscale=200

上で作成したムービークリップのスナップショットを作成する際には、変換マトリックスを指定しない限り、回転と伸縮を適用済みの正方形のイメージを得ることはできません。ステージ上に表示されているムービークリップそのままの正確なイメージをビットマップオブジェクトにするには、次のように、このムービークリップの変換マトリックスを draw() メソッドの第 2 パラメータとして指定します。

// ムービークリップと同じサイズで透明なビットマップを作成
myBitmap =new BitmapData(square_mc._width,square_mc._height,true,0x00FFFFFF)

// ステージ上に表示されたままのイメージで描画
myBitmap.draw(square_mc,square_mc.transform.matrix)

ステージ上の表示とは異なる形でムービークリップのスナップショットを取得する (たとえば、表示の半分のサイズにする) 場合は、次のように、ムービークリップの変換マトリックスを取得してから変更を加え、意図したとおりの変換が適用時に発生するようにします。

// ムービークリップの半分のサイズで透明なビットマップを作成
myBitmap = new BitmapData(square_mc._width/2,square_mc._height/2,true,0x00FFFFFF)
// ムービークリップの変換マトリックスを取得
m=square_mc.transform.matrix
/*

ムービークリップの変換マトリックスに変更を加え、
ビットマップへの適用時には
描画サイズが半分になるようにする

*/
m.scale(0.5,0.5)
// 半分のサイズでムービークリップのスナップショットを作成
myBitmap.draw(square_mc,m)