casualplay.net blog

スクリプトの内容は前回のエントリー（紙が燃えていくようなトランジッション）とほぼ同様ですが、今後も使い回せると思うのでClassファイルにしておきました。数値なども少しだけ変更を加えています。

前回はperlinNoiseでしきい値を計るソースイメージを生成していましたが、今回はあらかじめ用意した画像を読み込む形にしています。これで画像を入れ替えるだけでまったく違った効果ができてしまうわけです。

今回はPhotoshopで作った下の画像を使用。

黒い部分から白い部分にかけて消えていきます。この場合、中心から外側にかけて白を強くしているので、中心からイメージが切り替わるようになります。

ちなみに今回は1回目と2回目でマスク用のソース画像を反転させているため、逆再生になっています。

Transition.as

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

class Transition {
	
	private var W:Number;
	private var H:Number;
	
	private var blur:BlurFilter;
	private var glow:GlowFilter;

	private var src_bmp:BitmapData;
	private var mask1_bmp:BitmapData;
	private var mask2_bmp:BitmapData;
	
	private var image1:MovieClip;
	private var image2:MovieClip;
	private var mc1:MovieClip;
	private var mc2:MovieClip;
	private var gmc:MovieClip;
	private var disp:MovieClip;
	
	function Transition (p:MovieClip, m1:MovieClip, m2:MovieClip, id:String) {
		
		W = m1._width;
		H = m1._height;
		image1 = m1;
		image2 = m2;

		blur = new BlurFilter(1.5, 1.5, 2);
		glow = new GlowFilter(0xFFFFFF, 100, 8, 8, 3, 2, false, true);
		
		src_bmp = BitmapData.loadBitmap(id);
		mask1_bmp = new BitmapData(W, H, true, 0xFFFFFFFF);
		mask2_bmp = new BitmapData(W, H, true, 0xFFFFFFFF);
		
		mc1 = p.createEmptyMovieClip("mc1", 0);
		mc2 = p.createEmptyMovieClip("mc2", 1);
		gmc = p.createEmptyMovieClip("g_mc", 2);
		disp = p.createEmptyMovieClip("d_mc", 3);
		
		mc1.attachBitmap(mask1_bmp, 0);
		mc2.attachBitmap(mask2_bmp, 0);
		gmc.attachBitmap(mask1_bmp, 0);
		
		gmc.blendMode = "overlay";
		gmc.filters = [glow];
		mc1.filters = [blur];
		mc2.filters = [blur];
		
		p.onLoad = function ():Void {
			mc1.cacheAsBitmap = true;
			mc2.cacheAsBitmap = true;
			image1.cacheAsBitmap = true;
			image2.cacheAsBitmap = true;
			image1.setMask(mc1);
			image2.setMask(mc2);
		}
		p.onLoad();
	}
	
	public function changeImage(m:MovieClip):Void {
		
		var mask:BitmapData;
		var m2:MovieClip;
		var thr:Number = 0;
		var b:BitmapData = src_bmp;
		var clr:ColorTransform = new ColorTransform(-1, -1, -1, 1, 255, 255, 255, 0);

		if (m == image1) { 
			mask = mask1_bmp;
			m2 = image2; 
		} else {
			mask = mask2_bmp;
			m2 = image1; 
		}
		gmc.attachBitmap(mask, 0);
		
		m.onEnterFrame = function():Void {
			if (thr > 0xCFFFFF) {
				mask.fillRect(mask.rectangle, 0xFFFFFFFF);
				m.attachBitmap(mask);
				thr = 0x000000;
				m.swapDepths(m2);
				b.colorTransform(b.rectangle, clr);
				delete m.onEnterFrame;
			} else {
				thr += (0xFFFFFF-thr)*0.03;
				mask.threshold(b, b.rectangle, new Point(0, 0), "<=", thr, 0, 0x00FFFFFF , false);
			}
		}
	}
	
}

1フレーム目

// -- ステージ上にMC image1, image2を配置。
// -- 現在のパス、画像MC1、画像MC２、マスク用画像のid （リンケージ設定で書き出しておく）

var ts:Transition = new Transition(this, image1, image2, "imageID");

image1.onRelease = function():Void{
	ts.changeImage(image1);
}

image2.onRelease = function():Void{
	ts.changeImage(image2);
}