第47回　いろいろなトランジション効果を作成してみよう

吉岡梅

2007.06.15

　前回に引き続いて，二つの画像を転換する際の「トランジション効果」の作り方を説明します。今回は，thresholdメソッドをつかったしきい値による色の判定方法と，その仕組みをマスクに使ったトランジション効果を作成します。

いろいろな場面転換の効果を作成する

　図1のムービーは，ボタンをクリックするたびに，トランジション効果を使って14枚の画像の表示を切り替えます。PowerPointのスライド切り替えや，ノベルゲームの場面転換などでおなじみの「トランジション効果」の動きです。淡白な1枚絵でも，それなりに動きを付けて見せることができますね。

図1：場面転換の効果を付帯したムービー（クリックするとムービーを表示します）

　これらのトランジション効果は，すべて「thresholdメソッド」を利用して実行されています。

thresholdメソッドで色の境界を判定

　thresholdメソッドとは，どんな処理を行うメソッドなのでしょうか。「threshold」は，日本語で言うと「しきい値」「境界となる値」という意味です。このメソッドは，ビットマップ全体を，指定した色を「しきい値」として，二つに区分することができます。

　例えば，図2のようなビットマップがあるとします。このビットマップの色を「0xFF808080」（＊1）をしきい値にして二つの部分に分けてみると，図3のようになります（＊2）。

図2：判定を行うビットマップ

図3：色を塗り分けたところ

　では，実際にコードを記述してみましょう。まず，新規Flashドキュメントを作成し，任意の名前で保存します。次に，判定を行いたい画像を1枚用意し，Flashに読み込んでライブラリに登録しておきましょう（図4）。画像には，スクリプトから呼び出して使用できるようにおなじみの識別子を付けておきます。

図4：ライブラリに画像を用意する

　この画像を任意のしきい値で判定し，その結果をビットマップへと書き出してみましょう。

//必要なクラスのインポート
import flash.display.BitmapData;
import flash.geom.Rectangle;
import flash.geom.Point;
　
//入力用ビットマップを読み込む
var srcBitmap:BitmapData = BitmapData.loadBitmap("tea.jpg");
//結果を書き込むための出力用ビットマップを準備し，黒で塗りつぶしておく
var dstBitmap:BitmapData =
 new BitmapData(srcBitmap.width,srcBitmap.height,true,0xFF000000);
//判定の範囲(今回は全体)と開始ポイント(今回は左上)を準備
var _rect:Rectangle = dstBitmap.rectangle;
var _point:Point = new Point(0,0);
　
//しきい値の判定結果を出力用のビットマップに書き込む
dstBitmap.threshold(srcBitmap,   //判定したいビットマップ
       _rect,    //判定する範囲
       _point,   //判定を開始する座標
       ">",    //比較演算子
       0xFF808080,   //しきい値となる色
       0xFFFFFFFF); //判定をクリアしたピクセルの色
//出力用ビットマップを表示
_root.attachBitmap(dstBitmap,0);

　まずは必要なクラス（BitmapDataクラス，Rectangleクラス，Pointクラス）をインポートします。そして，しきい値を判定したいビットマップである「入力用ビットマップ」と，判定結果を書き込むためのビットマップである「出力用ビットマップ」を準備します（＊3）。

　今回は，入力用ビットマップ全体に対してしきい値をテストしたいので，出力用のビットマップの大きさも，入力用ビットマップと同じ大きさにしておきます。

//入力用ビットマップを読み込む
var srcBitmap:BitmapData = BitmapData.loadBitmap("tea.jpg");
//結果を書き込むための出力用ビットマップを準備し，黒で塗りつぶしておく
var dstBitmap:BitmapData =
 new BitmapData(srcBitmap.width,srcBitmap.height,true,0xFF000000);

　次に，判定したい範囲と，その結果を書き込む位置を指定します。今回は同じ大きさのビットマップに対して判定と書き込みを行いますので，範囲はビットマップと同じ大きさ，描き込み位置は(0,0)を指定しておきます。

var _rect:Rectangle = dstBitmap.rectangle;
var _point:Point = new Point(0,0);

　これで判定の準備は完了です。書き込み用ビットマップに対してthresholdメソッドを使用し，その結果を書き込みます。

dstBitmap.threshold(srcBitmap,   //入力用ビットマップ
       _rect,     //判定する範囲
       _point,    //判定を開始する座標
       ">",    //比較演算子
       0xFF808080,   //しきい値となる色
       0xFFFFFFFF);  //判定をクリアしたピクセルの色

　thresholdメソッドでは，1番目の引数として指定したビットマップのピクセルごとの「色」を，5番目の引数に指定したしきい値の「色」と比較して，しきい値より大きいのか，小さいのかを判定します。判定の際には，4番目の引数に指定した演算子が使用されます。そして，判定をクリアしたピクセルに対しては，6番目の引数で指定した色で書き込みを行います。

　結果として，出力用ビットマップに対して，指定した色をしきい値とした個所が，指定した色で塗りつぶされたビットマップが作成されます（図3のような結果となります）。