Mag8Flash：シン
BitmapDataクラスのpixelDissolveの使用
今回は新しく追加されたActionScriptについて説明します。
実は僕も今自分で試しながら勉強中なんで間違っていたりしたらぜひ指摘ください。
MAGAZINE 8ではティザー用と本番用に2つのFlashを作りました。
本番用はFlash Communication Serverを使ったメンバーの生活を垣間見ようというのを作り（僕も含めてみんなあんまりログインしてないけど）、ティザー用ではせっかく新しいStudio 8の紹介コンテンツなんでFlash 8の新しいActionScriptを試そうと思い作りました。
このTipsではそこで使用したActionScriptを紹介します。
Flash 8で新しくなったActionScriptといえばやはりBitmapDataクラスが追加されたことかなと思います。
今まではFlashでビットマップを扱うというと.jpgや.gif、.pngファイルを取り込んでそれをただ配置するだけでした。影をつけるにも画像を歪ませるにもまずはFlash以外の画像加工ソフトを使って、それをFlashに取り込んでから使っていました。
しかし今回のFlash 8からはFlash上で画像にさまざまはエフェクトをかけることができます。
もちろんFlash上にフィルタ操作パネルというのがあってそこでも影をつけたり、イメージをぼかしたりできるのですが、ActionScriptはそれではできない効果も作れます。
ということで今回はビットマップイメージを扱うクラス、BitmapDataクラスの中のひとつpixelDissolveを紹介します。
dissolve（ディゾルブ）とは画面の切り替え技法のひとつで、画面が次の画面に溶け込む感じで消えていく方法です。こんな感じでさわやかなクリタくんも間抜けな銅像みたいな感じになります。
これがActionScriptで操作できるというわけです。
では早速ソースコードを見ていきましょう。
まずはFlash 8から追加された新しいクラスをインポートします。
BitmapDataは今回のpixelDissolveを使用するときのクラスで、PointはそのpixelDissolveの引数のひとつに使用します。
import flash.display.BitmapData;
import flash.geom.Point;
次にBitmapDataクラスをインスタンス化します。
1番目と2番目の引数がこのビットマップの大きさの指定、3番目の引数が透明にするかどうかです。
3番目の引数をtrueにしておかないと画面が真っ黒になるので注意してください。
var mcWidth = kurita._width + 1;
var mcHeight = kurita._height + 1;
var myBitmapData = new BitmapData(mcWidth, mcHeight, true);
上で作成したBitmapDataのインスタンスをMovieClipに割り当てます。
今回はクリタくんの写真をMovieClipの中に配置してそれにBitamapDataを割り当てました。
kurita.attachBitmap(myBitmapData, this.getNextHighestDepth());
最後にpixelDissolveメソッドで写真を表示させていきます。
1番目の引数 使用するBitmapDataソース
2番目の引数 ソースの領域
3番目の引数 ソース矩形の左上のポイント
4番目の引数 ランダムシードの値
5番目の引数 ディゾルブの領域
4番目の引数で戻り値であるnewNumを再び渡しているのは正直あまり意味分かってないです。すみません。
「この関数の戻り値は後続の呼び出しに渡して、終了するまでピクセルディゾルブを続ける必要があります。」とヘルプにあるのでとりあえず戻り値を渡しています。
newNum = myBitmapData.pixelDissolve(myBitmapData, myBitmapData.rectangle, new Point(0, 0), newNum, interval);
上記のコードをMovieClipのピクセル分onEnterFrameで繰り返します。
サンプルではどの大きさのMovieClipでも50回ループすれば写真が現れるように、全体のピクセル数を50で割った分だけ一度にディゾルブが行われるようにしています。
最後にすべてのコードを書いておきます。
kuritaというインスタンス名を他のMovieClipインスタンス名に変えればどんなMovieClipでも動くはずです。
コードをコピペして試してみてください。
// 使用するクラスをインポート
import flash.display.BitmapData;
import flash.geom.Point;
// 写真と同じ大きさのBitmapDataインスタンスを作成し、写真のMovieClipにattachする
var totalDissolved = 0;
var mcWidth = kurita._width + 1;
var mcHeight = kurita._height + 1;
var interval = (mcWidth * mcHeight) / 50;
var totalPixels = (mcWidth) * (mcHeight);
var myBitmapData = new BitmapData(mcWidth, mcHeight, true);
kurita.attachBitmap(myBitmapData, this.getNextHighestDepth());
// MovieClipをクリックするとonEnterFrameで徐々に写真を表示させる
kurita.onRelease = function() {
onEnterFrame = function(){
newNum = myBitmapData.pixelDissolve(myBitmapData, myBitmapData.rectangle, new Point(0, 0), newNum, interval);
if(totalDissolved > totalPixels) {
trace("stop")
delete onEnterFrame;
}
totalDissolved += interval;
}
}
できあがりはこちら。
ということで今回はBitmapDataクラスのほんの一握りの機能pixelDissolveを紹介しました。
このほかにもBitmapDataクラスを使うと今までになかったFlashの表現が可能です。
ただちょっとCGの知識もいるようなので新しく勉強することがたくさんありそうです。ちなみに僕も悪戦苦闘中です。だれか教えてー。
では何か間違いや意見などありましたらどしどしコメントください。
BACK TO MAGAZINE8 TOP : 2005年11月10日 11:51