ゆらゆら線

2008 年 5月 8 日
kosuke

Flower Rockで使ったゆらゆらする線についての備忘録です。
この「ゆらゆら」した表現、ゆるい感じの手書き風アニメーション等でも見かけますが、正確にはなんて言うのだろう。

とりあえず、線をゆらゆらさせるなら、普通にlineToやcurveToで描いていって出来ると思いますし、Illustratorの効果で歪ませてタイムラインに並べてもいんじゃない？位に思います…。いや切羽詰まってたら絶対そうするな。僕なら。

話を戻して、ゆらゆら線ですがDisplacementMapFilterを使いました。
これを使うと、変形の元になるイメージ（置き換えマップイメージというらしい。）の色の値に沿って変形させることが出来る訳です。下がサンプルです。

サンプル

This movie requires Flash Player 10.0.0

はじめに、置き換えマップイメージを作ります。後でDisplacementMapFilterでR、G、Bの色の値を使って変形します。サンプルは緑の部分を変形させるようグラデーションを作りました。置き換えマップイメージは普通にFlashのアプリケーションで描いても、グラフィックソフトで作っても大丈夫です。

var shape:Shape = new Shape();
var yScale:Number = 5;
var rect:Rectangle = line.getBounds(line);
 
var matrix:Matrix = new Matrix(1,0,0,1,0,0);
	matrix.createGradientBox(10,10);
shape.graphics.beginGradientFill(
	GradientType.LINEAR,
	[ 0x0000ff, 0x00ff00 ],
	[ 1, 1 ],
	[ 0, 255 ],
	matrix,
	SpreadMethod.REFLECT
);
shape.graphics.drawRect( 0, 0, rect.width, (yScale * 2 + rect.height) );

で、DisplacementMapFilterにこの置き換えマップイメージを使います。

var bitmapdata:BitmapData = new BitmapData( rect.width, (yScale * 2 + rect.height) );
	bitmapdata.draw(shape);
 
var filter:DisplacementMapFilter = new DisplacementMapFilter(
	bitmapdata,
	new Point( 0,-(yScale + rect.height/2 + rect.y)  ),
	BitmapDataChannel.GREEN,
	BitmapDataChannel.GREEN,
	0,
	yScale,
	DisplacementMapFilterMode.COLOR
)
line.filters = [ filter ];

BitmapDataの左上起点と、ゆがませる対象の起点をうまく一致させてあげないと期待通りに変形しなかったりするので、場合によっては調整が必要です。
2PXトップページの動く胸（…）とか、雑誌風コンテンツも基本これを使いました。

Design, Flash

2BLOG