PR
 まずは図1のムービーをご覧ください。クリックするたびに,二つの画像と一つのムービークリップ・インスタンス,そして一つのビデオ・コンテンツを順番に表示するものです。

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

 よく見かける効果ですが,いざこれを自分で作成しようと思うと,どんな仕組みで作成していいのかわからないかもしれません。でもご安心を。ActionScriptには,このようなトランジション(*1)を作成するための便利なメソッドが用意されているのです。

 BitmapDataクラスに用意されている「pixelDissolveメソッド」や「thresholdメソッド」を使用すると,二つの画像を転換する際の効果-いわゆる「トランジション」効果を作成することができます。

ピクセル単位のディゾルブ効果を作成する「pixelDissolveメソッド」

 では,実際にトランジションを作成してみましょう。二つの画像を用意し,この二つの画像の表示にトランジション効果を付けてみることにします。

 まずはBitmapDataクラスに用意されている「pixelDissolveメソッド」です。pixelDissolveメソッドはその名の通り,ピクセル単位の「ディゾルブ」とよばれる効果を実行するものです。これは説明するよりも見てもらったほうが早いですね。図2のような効果のことです。

図2:二つの画像をディゾルブで切りかえる(クリックするとムービーを表示します)

 ピクセル単位で二つの画像の表示を切り替えます。このような動きをする処理は,pixelDissolveメソッドで実行することができます。pixelDissolveメソッドの基本構文は次のようになります。

変化させたいビットマップ.pixelDissolve(変化後のビットマップ,
          変化の対象となる範囲(Rectangle),
          変化の基準点(Point),
          変化の基準となる数値,
          変化させたいピクセル数
          );

 同じ大きさの画像をディゾルブしたい場合には,「変化の対象となる範囲」は画像と同じサイズ,「変化の基準点」は(0,0)の位置になります。また,「変化の基準となる数値」は,置き替えるピクセルに変化をつけるための乱数の種(*2)です。これはMath.randomメソッドを使って適当な値を当ててあげればOKです。「変化させたいピクセル数」は,その名の通り変化させたいピクセルの数です。

 例えば,[ライブラリ]内に2枚の画像があるとします。それぞれに「pic1」「pic2」と識別子が付けられています。

図3:識別子のついた二つの画像をディゾルブで切り替える

 このとき,pic1を表示している状態から,ピクセル・ディゾルブを使ってpic2を表示させるには,次のようにコードを記述します。

import flash.display.BitmapData;
import flash.geom.Point;
import flash.geom.Rectangle
 
//2枚の画像をビットマップとして読み込む 
var _picture1:BitmapData = BitmapData.loadBitmap("pic1");
var _picture2:BitmapData = BitmapData.loadBitmap("pic2");
//画像表示用のムービークリップ作成・表示位置の調整
var _mc:MovieClip = this.createEmptyMovieClip("canvas", 0);
_mc._x = (Stage.width - _picture1.width)/2
_mc._y = 20
//1枚目の画像を表示
_mc.attachBitmap(_picture1, 0);
 
//ディゾルブ処理に必要な変数を用意
var _rect:Rectangle = _picture1.rectangle;
var _point:Point = new Point(0,0);
var _seed:Number = Math.floor(Math.random() * 10);
var _pixCount:Number = (_picture1.width * _picture1.height)/2;
 
//半分のピクセルをディゾルブ
_picture1.pixelDissolve(_picture2,  //picture2へとディゾルブ
                        _rect, //適用範囲
                        _point,  //適用位置
                        _seed, //ランダムシード
                        _pixCount);  //変化させるピクセル数

 これで,1枚目の画像の半分のピクセルを,2枚目の画像へと置きかえます。結果は図4のようになりますね。

図4:半分だけ置きかえたところ

 これだけではただのうっすらと猫の怨念を感じる怖い画像ですね。残りの半分も置きかえてみましょう。でも,「残りの半分」といっても,前回のディゾルブの結果の「続きから」置きかえるにはどうすればいいのでしょうか?

 実はpixelDissolveメソッドは,その戻り値として「今回の続きから変化させたい場合には,この値をランダムシードとして使ってください」という値を返してくれます。つまり,先ほどのピクセル・ディゾルブを行うコードの一部を,

//半分のピクセルをディゾルブし,結果のランダムシードを取得
_seed = _picture1.pixelDissolve(_picture2,  //picture2へとディゾルブ
                                _rect,  //適用範囲
                                _point, //適用位置
                                _seed,  //ランダムシード
                                _pixCount); //変化させるピクセル数

とすれば,変数「_seed」に続きからディゾルブできるような値が入るわけですね。この値を使ってさらに残りの半分のピクセルのディゾルブを行えば,完全に画像を置きかえることができます。