ちょうど波紋エフェクトなどを作成したときに、ひとコマずつBitmapDataにして加工するのをやったので「磨りガラスもこれでイケるな」と思い、早速作成してみました。

ソースはこんな感じ

使い方は

addChild(obj);
var gg:GroundGlass = new GroundGlass(obj,width,height,blurStrength,quority,color,alha);
gg.x =10;
gg.y = 50;
addChild(gg);

といった感じです。引数は（磨りガラス効果をかけるオブジェクト、巾、高さ、ぼかしの強さ、ぼかしのクオリティ、ガラスの色、ガラスの透明度（アルファ））。与えるオブジェクトは(0,0)の位置にあるのが前提です。

値段の高さから購入を躊躇していたのですが、遅まきながら先日意を決して手に入れました。

内容は、AS3.0の基本をすこしと、簡単な数学（三角関数がメイン）から始まって初歩の物理とその応用を利用してAS3.0アニメーションを作成するものです。

いままでなんとなく作ってきたものが、物理を利用して理論的に組み立てて作成できるようになります。この点が応用を考えると非常に大きいと思います。（まぁなんとなくやっているのがイケナイのですが(^^; ）

全体的に図とサンプルとなるスクリプトを示して、わかりやすく解説してくれていますので「物理とか数学はよくわからない」と言う人にもとっつきやすいと思います。

触れられている項目は、速度・加速度・摩擦・跳ね返りなどの初歩の物理からインバースキネマティクス、三次元まで豊富にあります。ビット演算や行列の演算にも触れているところが非常に参考になりました。

不満な点を上げるとすれば、跳ね返りなど物理の部分で「円」の場合でしか紹介されていないこと。長方形が斜めにぶつかったときにどういった計算になるのかということは教えてくれません。およそここから本格的な物理になってくるからだとは思いますが...。

すこし誤植が多いですが、理論的に再構築したい人にはオススメの1冊です。

ActionScript3.0 アニメーション（株式会社 ボーンデジタル：Keith Peters）7,350円

先のエントリーでやった「水面のようなエフェクト」はその習作だったのですが、クライアントがやっぱり波紋でやりたいということだったので作成することに。

「DisplacementMapFilter」を利用することは変わらないので、いかに置き換えマップを作成するのかがカギなのですが、計算をなるべく省きたい。そこで、検索で見つけた鮭さんのブログのやり方を参考にして、円形グラデーションでマップを作成することにしました。

※枠内クリックで実行

そこで、グラデーション定義ではひとつの波紋だけを表現し、それを複数枚作成して重ねてしまおうと思い立ちました。これなら簡単に出来そうです。

ソースはこんな感じ

package jp.norisuke {

	import flash.display.*;
	import flash.events.Event;
	import flash.events.TimerEvent;
	import flash.filters.DisplacementMapFilter;
	import flash.filters.DisplacementMapFilterMode;
	import flash.geom.Matrix;
	import flash.geom.Point;
	import flash.utils.Timer;

	public class Ripple extends MovieClip {
		//ソースイメージ、ノイズイメージ、ビットマップ
		public var sourceImage:BitmapData;
		private var ripplesImage:BitmapData;
		private var softLightBitmap:Bitmap;
		private var bitmap:Bitmap;
		//波紋を保持する配列
		private var ripples:Array;
		//波紋の回数
		public var times:uint;
		//波紋の間隔
		public var interval:Number;
		//フェードするか否か？
		public var fadeFlag:Boolean;
		//置き換えマップの移動強度
		public var filterScale:uint;
		//全ての波紋を生成したか否かのブール
		private var timerCompleteFlag:Boolean = false;

		//コンストラクタ
		public function Ripple(g:BitmapData, _fs:uint = 20, _t:uint = 8 , _interval:Number = 200 , _fade:Boolean = true, _softlightFlag:Boolean = true ) 
		{
			sourceImage = g;
			filterScale = _fs;
			times = _t;
			interval = _interval;
			fadeFlag = _fade;
			//
			ripples = new Array();
			bitmap = new Bitmap(sourceImage);
			addChild(bitmap);
			softLightBitmap = new Bitmap();
			if(_softlightFlag) {
				softLightBitmap.blendMode = BlendMode.HARDLIGHT;
				softLightBitmap.alpha = 0.5;
				addChild(softLightBitmap);
			}
		}
		
		//実行
		public function start():void
		{
			if(!timerCompleteFlag){
				//タイマーを設定。引数で与えられた間隔と回数をそのまま定義
				var timer:Timer = new Timer(interval, times);
				timer.addEventListener(TimerEvent.TIMER, timerCountHandler)
				timer.addEventListener(TimerEvent.TIMER_COMPLETE, timerCompleteHandler)
				timer.start()
				//波紋の進行はENTER_FRAMEでおこなう
				addEventListener(Event.ENTER_FRAME, enterFrameHandler);
			}
		}
		//指定された回数が終われば、フラグをたてる。
		private function timerCompleteHandler(e:TimerEvent):void 
		{
			timerCompleteFlag = true;
		}
		//タイマーがカウントされたらObjectに波紋の中心点と現在のカウントを記録して、波紋管理用の配列へpush。
		private function timerCountHandler(e:TimerEvent):void 
		{
			var r:Object = new Object;
			r.tx = Math.floor(Math.random() * sourceImage.width - sourceImage.width/2);
			r.ty = Math.floor(Math.random() * sourceImage.height - sourceImage.height / 2);
			r.r = 0;
			r.count = e.target.currentCount;
			ripples.push(r);
		}
		//波紋を更新する。
		private function enterFrameHandler(e:Event):void
		{
			updateRipplesArray()
			updateRipples();
			updateBitmap();
		}
		//波紋管理用の配列の更新（規定値を超えたら配列から削除）
		private function updateRipplesArray():void
		{
			var i:uint = 0;
			for each(var r:Object in ripples) {
				if (r.r > 255) {
					ripples.splice(i, 1);
				}
				i++
			}
		}
		//波紋管理用の配列からオブジェクトを取り出し、波紋をグラデーションで生成
		private function updateRipples():void
		{
			var sprite:Sprite = new Sprite();
			if (ripples.length == 0 && timerCompleteFlag) {
				removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
				timerCompleteFlag = false;
				return;
			}
			for (var i:uint = 0; i < ripples.length; i++) {
				var r:Object = ripples[i];
				var shape:Shape = new Shape();
				var g:Graphics = shape.graphics;
				var matrix:Matrix = new Matrix()
				matrix.createGradientBox(sourceImage.width, sourceImage.height, 0, r.tx, r.ty); 
				var _alpha:Number;
				if(fadeFlag) {
					_alpha = 0.5 * ((255 - r.r) / 255) * ((times - (r.count - 1))/times);
				} else {
					_alpha = 0.5 * ((255 - r.r) / 255) ;
				}
				g.beginGradientFill(GradientType.RADIAL, [0xffffff, 0xffffff, 0xffffff], [0,_alpha,0], [r.r, r.r+20, r.r+40], matrix, SpreadMethod.PAD);
				g.drawRect(0,0,sourceImage.width,sourceImage.height)
				//生成した波紋をスプライトに加えていく。
				sprite.addChild(shape);
				//半径
				r.r += 8;
				ripples[i] = r;
			}
			ripplesImage =  new BitmapData(sourceImage.width,sourceImage.height,true,0xff7f7f7f)
			//スプライトをBitmapDataにして、置き換えマップの完成。
			ripplesImage.draw(sprite);
			softLightBitmap.bitmapData = ripplesImage;
		}
		//ソースイメージにフィルタをかける
		private function updateBitmap():void
		{
			var filter:DisplacementMapFilter = getBitmapFilter();
			bitmap.filters = [filter]
		}
		//置き換えフィルタを得る
		private function getBitmapFilter():DisplacementMapFilter {
			var mapPoint:Point       = new Point(0, 0);
			var channels:uint        = 2
			var componentX:uint      = channels;
			var componentY:uint      = channels;
			var scaleX:Number        = filterScale;
			var scaleY:Number        = filterScale;
			var mode:String          = DisplacementMapFilterMode.CLAMP;
			var color:uint           = 0;
			var alpha:Number         = 0;
			return new DisplacementMapFilter(ripplesImage,
									mapPoint,
									componentX,
									componentY,
									scaleX,
									scaleY,
									mode,
									color,
									alpha);
		}
	}
}

使い方は

obj:WaterSurface = new Ripple(BitmapData, FilterScale, Times, Interval(ms));
addChild(obj);
obj.start()

といった感じ。引数は（ビットマップデータ、エフェクトの強さ、波紋の数、波紋の間隔(ms)、フェードの有無(bool)、水面のテカリの有無(bool)）

※枠内クリックで実行

ソースはこんな感じ

使い方は

obj:WaterSurface = new WaterSurface(BitmapData, FilterScale, DelayTime, DecayTime,SoftlightFlag);
addChild(obj);
obj.start()

といった感じ。引数は（ビットマップデータ、エフェクトの強さ、減衰するまでの時間（ms）、減衰時間(ms)、水面のテカリの有無(bool)）

プログラムの流れは

1. PerlinNoiseを発生させる（発生ごとにオフセットで位置をずらしてアニメーション。）
2. それを元に置き換えフィルタを作成し、ソースの画像にかける。
3. 1.へ戻る
4. filterScaleが0になれば終了

Flash標準のTweenとは順序が違うけど、だいたい概念は一緒なので、あてはめれば簡単です。

var tw:TweenMax = new TweenMax(Object, sec, { x:x, ease:EasingFunction ,runBackwards:Boolean});

基本的にはこんな感じ。第1引数はObject、第2引数secは秒数、第3引数はTweenの内容を指示するオブジェクトで、{}で囲って適宜示せばOK。上の例では、x座標をxまで動かす様になっています。y座標を動かすときは「y:y」を挿入します。x,y同時に動かすことも出来ます。

TweenMaxは基本的に、現在位置から指示した位置へ動かします。標準のTweenのようにStartValueは不要です。

指示オブジェクトの「runBackwards」は現在位置から指示位置へ動かすか、その逆かのブール値で、trueなら指示した位置から現在位置へ動きます。デフォルトはfalseです。

TweenMaxでもカスタムイージング関数が使えます。適宜関数を定義して「ease:EasingFunction」で指示するだけです。先のエントリーでも、砂の飛ばし方のy座標でカスタムイージング関数を使っています。このサイトでカスタムイージング関数を作成できるので、TweenMaxでバリエーションが足りないと思うひとはお試しください。

]]> tag:www.norisuke.jp,2008:/blog//1.5 2008-09-18T04:32:23Z 2008-09-25T08:29:16Z

obj1 = new ReconstructionImage(DisplayObject,x,y,n);
addChild(obj1);
obj1.start()

ただ繋ぎ換えただけだと、レイアウトは日本語のまま。
IMEの設定からUSレイアウトを追加しても、IME起動時には日本語レイアウトにもどってしまうし、レイアウトを切り替えなければならないのも不便。

そこでいろいろ調べてみると、レジストリをいじることで解決するみたい。

HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\i8042prt\Parameters\
の「LayerDriver JPN」と「OverrideKeyboardIdentifier」の値をそれぞれ、「KBD101.DLL」とPCAT_101KEY」に書き換えればよいみたいです。

ただコレだけではダメで、同じトコロにある「OverrideKeyboardSubtype」の値を「2」->「0」に変更すればOK♪

HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Ketboard Layouts\E0010411
の「Layout File」の値を「kbdusx.dll」に書き換えるという情報もありますが、これをするとIMEを通常のキーバインドでは起動することが出来なくなってしまうので要注意です。