5ive™.blog

技術的なエントリーは久しぶりだなー。CBCNETで連載されているtrick7のteraさんの記事が面白かったので、自分なりにやってみる。この表現って素敵ですよね。記事にもあるようにPhotoshopでの参考サイトがあるので、これに忠実にActionScript3で再現してみる。元画像はこちら。

まずは画像をムービークリップに内包してステージにインスタンス名を「photo」にして配置。Tweenerでコントラストと彩度と明度を調整する。次にこのmcをBitmapDataでキャプチャしてコピー。コピーにも色を同じように調整して、ブラーをかける。新たにに円形グラデーション用のmcを作ってscaleYを半分にして楕円型にする。マスクするmcとマスクされるmcの両方にcacheAsBitmapをtrueに設定。最後にマスクをかけて完成と。

package
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Graphics;
	import flash.display.Sprite;
	import flash.display.MovieClip;
	import flash.display.GradientType;
	import flash.geom.Matrix;

	import caurina.transitions.Tweener;
	import caurina.transitions.properties.ColorShortcuts;
	import caurina.transitions.properties.FilterShortcuts;

	public class Main extends Sprite
	{

		public function Main():void
		{
			ColorShortcuts.init();
			FilterShortcuts.init();

			setToyFilter();
		}

		private function setToyFilter():void
		{
			//-----[色調整　ボケなし]
			Tweener.addTween(photo, { _contrast:0.6, _saturation:1.6, _brightness:0.2 } );

			//-----[キャプチャしてコピー]
			var bmd:BitmapData = new BitmapData(photo.width, photo.height);
			bmd.draw(photo);

			var bm:Bitmap = new Bitmap(bmd);
			var sp:Sprite = new Sprite();
			sp.addChild(bm);
			addChild(sp);
			sp.x = photo.x;
			sp.y = photo.y;
			swapChildren(photo, sp);

			//-----[色調整　ボケあり]
			Tweener.addTween(sp, { _contrast:0.6, _saturation:1.6, _brightness:0.2, _Blur_blurX:5, _Blur_blurY:5, _Blur_quality:2 } );

			//-----[グラデーションマスクの設定]
			var gmask:Sprite = new Sprite();
			var radius:uint = photo.width / 1.5;
			var scale:Number = 1.0 / 1638.4 * radius * 2;
			var m:Matrix = new Matrix();

			m.identity();
			m.scale(scale , scale);

			addChild(gmask);
			gmask.x = photo.x + photo.width / 2;
			gmask.y = photo.y + photo.height / 2;
			gmask.scaleY = 0.5;

			gmask.graphics.lineStyle();
			gmask.graphics.beginGradientFill(
				GradientType.RADIAL,
				[0x000000, 0x818181, 0xFFFFFF],
				[1.0, 0.4, 0],
				[120, 200, 255],
				m
			);
			gmask.graphics.drawCircle(0, 0 , radius);
			gmask.cacheAsBitmap = true;
			photo.cacheAsBitmap = true;
			photo.mask = gmask;
		}
	}
}

参考サイトでは被写体をパスで切り抜いて輪郭を強調してるけどFlashではそこまで出来ないのでピンのゆるさはご愛敬。写真素材をそれっぽいの使えば、擬似的に似せることは出来そうだなー。

追記
northprintさんがwonderflでPixel Bender版を公開されてます。こちらも勉強になります。