第42回　Flashムービー上で画像を移動させてみよう

吉岡梅

2007.04.06

　今回と次回の2回は，Flashムービー上で画像を移動させたり，変形させたりする方法について説明します。お絵描きツールや各種ゲームなどを作るときのほか，いろいろな幾何学的な模様の作成をするときに使えそうですね。

　ActionScriptでビットマップ画像に対して移動や変形といった処理を行う場合には，「Matrixクラス」を利用できます。マトリクスを使って変換した結果のデータは，「drawメソッド」を使うことにより，用意しておいたビットマップにそのまま書き込めます。また，drawメソッドは，すでにステージ上にあるムービーの絵を，ビットマップ・ベースのスクリーン・ショットとして取得することもできます。

ビットマップ画像を変形する

　図1のムービーは，左上に表示されているムービークリップ・インスタンスの画像をブラシとして扱い，右側のキャンパス上でマウスをドラッグすると，そのブラシの画像を使って絵を描くものです。いわゆる「飾り罫線」や「カスタムブラシ」のようなコラージュ画像も簡単に作成できますね。

図1：元の画像をブラシとして使用するムービー（クリックするとムービーを表示します）

　このようなムービーを作成するには，

既存のムービーの画像を任意のビットマップへと書き込む（キャプチャする）機能
元となる画像を移動・変形させる機能

の二つの処理手法がわかればOKです。

　一つ目の処理は，BitmapDataクラスの「drawメソッド」を使うことで実現できます。二つ目の処理は，平行移動，回転，拡大・縮小，傾斜の変換関係全般を一括管理する「Matrixクラス」を使います。変換結果のビットマップへの書き込みは，これまた「drawメソッド」を使うことで実現できます。

ステージ上のインスタンスの絵をビットマップとしてキャプチャする

　まず，ステージ上に配置したムービークリップのインスタンスの絵を，ビットマップ・データとしてキャプチャしてみましょう。新規Flashドキュメントを作成し，名前を付けて保存します。さらに適当な絵をステージ上に描き，[F8]キーを押してシンボル化し，作成したインスタンスに「stampMC」と名前を付けましょう（図2）。

図2：ステージ上にインスタンス「stampMC」を配置

　このインスタンスの絵をビットマップに書き込むには，BitmapDataクラスの「drawメソッド」を使用します。

BitmapData.draw(キャプチャしたいインスタンス名);

　今回は，メインのタイムライン(_root)上に配置した「stampMC」をビットマップとしてキャプチャしてみます（図3）。スクリプト用のフレームを用意し，次のようにコードを記述してみましょう。

図3：「stampMC」の画像をキャプチャする（クリックするとムービーを表示します）

import flash.display.BitmapData;

//インスタンス「stampMC」と同じ大きさの透明なビットマップを生成
var stamp:BitmapData 
  = new BitmapData(stampMC._width,stampMC._height,true,0x00000000);
//生成したビットマップに「stampMC」の絵を書き込む
stamp.draw(stampMC);


//ビットマップを表示するムービークリップ・インスタンスを生成
var canvasMC:MovieClip = _root.createEmptyMovieClip("canvasMC",0);
//位置を設定
canvasMC._x = stampMC._x + stampMC._width + 50;
canvasMC._y = stampMC._y;
//ビットマップを表示する
canvasMC.attachBitmap(stamp,0);

　ムービークリップ・インスタンスをビットマップとしてキャプチャするには，まず，インスタンスと同じ大きさの透明なビットマップを準備します＊1。今回は「stamp」という名前で作成してみました。

var stamp:BitmapData
  = new BitmapData(stampMC._width,stampMC._height,true,0x00000000);

　このビットマップに対し，キャプチャしたいインスタンスを引数として「drawメソッド」を実行します。

stamp.draw(stampMC);

　これだけです＊2。drawメソッドは，画像のARGBの値までビットマップに書き込みます。つまり，透明な場所はきちんと透明なまま書き込まれるというわけです＊3

　図3のムービーを見ても，元々のインスタンスとは見分けがつかないくらい完璧にコピーされていますね。ここで，ムービーを右クリックして表示されるメニューから[拡大]を選んで少し拡大してみてください。すると，左側のベクター情報で管理されているムービークリップ・インスタンスは滑らかなままであるのに対し，右側のビットマップとしてキャプチャした画像は，ギザギザのシャギができてしまいます（図4）。この結果をみると，ベクター情報としてコピーしたのではなく，きちんとビットマップとしてあらためて書き込まれていることが確認できますね。

図4：拡大してビットマップとして管理されていることを確認