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版を公開されてます。こちらも勉強になります。

自分用のメモ。サウンドの音量をトゥイーンさせるには、SoundShortcutsクラスをインポートしてinit()で初期化してから使う。Tweenerの対象オブジェクトはSoundChannel型の変数にする。音量を変化させたいときは_sound_volumeプロパティ、音量をパンさせたい時は_sound_panプロパティをそれぞれ弄くる。

import caurina.transitions.Tweener;
import caurina.transitions.properties.SoundShortcuts;

SoundShortcuts.init();

var bgm:Sound = new soundBgm();
var channel:SoundChannel = bgm.play(0);

Tweener.addTween(channel, {_sound_volume:0, time:1, transition:"linear"});

Tweenerを使ってみる。

import caurina.transitions.Tweener;
Tweener.addTween(mc, {alpha:0, time:1, transition:"easeOutExpo", delay:0, onComplete:hoge, onCompleteParams:["hello"]});

hoge = function(s:String)
{
    trace(s);    //hello
}

こうする事で1秒でアルファを0にイージングして、完了後にコンプリートハンドラーよりhoge()がコールバックされて”hello”がトレースされる。基本Fuseと使い方は一緒だな。

その他のイベントパラメータはこちら。
・onStart
・onStartParams
・onUpdate
・onUpdateParams
・onComplete
・onCompleteParams
・onOverwrite
・onOverwriteParams