casualplay.net blog

perlinNoiseで生成した雲模様ビットマップをアルファチャンネルマスクのしきい値を計るソースイメージとして使用し、thresholdメソッドを使ってしきい値の値を黒(0x000000)から白(0xFFFFFF)に近づけ、しきい値以下をアルファ(0x00000000)に置き換えていくことで、こんな感じに。しきい値の数値が一定に達したところで処理を停止し、画像の深度を入れ替えています。

今回、焦点がずれるので2つの画像は外部から読み込まずにステージ上にMCを配置しました。画像を外部から読み込む形にする場合、loadClipを使って読み込み処理を終えたことを確認してからsetMaskでマスク処理、という手順が必要なのでご注意を。

import flash.display.*;
import flash.filters.*;
import flash.geom.*;

var w:Number = 360;
var h:Number = 240;
var thr:Number = 0x000000;
var rdm:Number = Math.floor(Math.random()*10000);

// -- image1, image2 はステージ上に配置。 ( image1を上に配置)

var image1:MovieClip;
var image2:MovieClip;

var blur:BlurFilter = new BlurFilter(1.2, 1.2, 2);
var glow:GlowFilter = new GlowFilter(0x4C2E00, 100, 8, 8, 4, 2, true, true);

var bmp:BitmapData = new BitmapData(w+20, h+20, false, 0);
var mask_bmp:BitmapData = new BitmapData(w+20, h+20, true, 0xFFFFFFFF);
var mask2_bmp:BitmapData = new BitmapData(w+20, h+20, true, 0xFFFFFFFF);

var mc:MovieClip = this.createEmptyMovieClip("mc", 0);
var mc2:MovieClip = this.createEmptyMovieClip("mc2", 1);
var gmc:MovieClip = this.createEmptyMovieClip("g_mc", 3);

mc._x = mc._y = -10;
mc2._x = mc2._y = -10;
gmc._x = gmc._y = -10;

mc.attachBitmap(mask_bmp, 0);
mc2.attachBitmap(mask2_bmp, 0);
gmc.attachBitmap(mask_bmp, 0);

gmc.blendMode = "multiply";
gmc.filters = [glow];
mc.filters = [blur];
mc2.filters = [blur];

// -- アルファチャンネルマスクとして使用するため、cacheAsBitmapを有効に。

mc.cacheAsBitmap = true;
mc2.cacheAsBitmap = true;
image1.cacheAsBitmap = true;
image2.cacheAsBitmap = true;

image1.setMask(mc);
image2.setMask(mc2);

// -- トランジッション処理 

function burnImage(mask:BitmapData, m:MovieClip):Function {
	gmc.attachBitmap(mask, 0);
	return function():Void {
		if (thr > 0xCFFFFF) {
			mask.fillRect(mask.rectangle, 0xFFFFFFFF);
			m.attachBitmap(mask);
			thr = 0x000000;
			if (m == image1) { m2 = image2; }
			else { m2 = image1; }
			m.swapDepths(m2);
			delete this.onEnterFrame;
		} else {
			thr += (0xFFFFFF-thr)*0.03;
			mask.threshold(bmp, bmp.rectangle, new Point(0, 0), "<=", thr, 0, 0x00FFFFFF , false);
		}
	}
}

// -- 雲模様画像生成 

function createPerlinNoise():Void {
	rdm = Math.floor(Math.random()*10000);
	bmp.perlinNoise(100, 100, 5, rdm, false, true, 1, true);
}

// -- ボタン処理 

image1.onRelease = function():Void{
	createPerlinNoise();
	this.onEnterFrame = burnImage(mask_bmp, image1);
}

image2.onRelease = function():Void{
	createPerlinNoise();
	this.onEnterFrame = burnImage(mask2_bmp, image2);
}