タイムライン派のお手軽スクリプト第１弾。
「DisplacementMapFilterで自由に画像を変形させる（マップを描く編）」です。

前回のエントリーでDisplacementMapFilterの概要と使い方を
ざっくり書かせてもらいましたが、今回はマップの描き方について。

-----------------------------------------------------

通常マップ画像は、正確な変形やインタラクティブな変形をさせる場合
1ドットずつスクリプトで計算をして色を決めて、スクリプトで描くことが多いです。

でもマップ画像は所詮画像！
ざっくりとした変形であればお絵かきソフトで書いたほうが
（僕の場合は）多少早かったりします。


とりあえず、前回のエントリーでサンプルとして出してた台形変形用のマップを書いてみます。
 

ツール

今回はFireWorksを使って作っていきますが
RGBのチャンネルを、それぞれ独立して編集できるお絵かきソフトであれば
PhotoShopでもなんでもよいかと思います。
 

準備

 まず、フィルターをかける表示オブジェクトと同じ大きさの画像を新規作成します。
（ちなみに元画像より出力画像を大きくするような変形の場合はマップも大きめに用意します）

次にベースとなるレイヤーを作ります。
前回のエントリーで書いたように、DisplacementMapFilterは
色の強さ(0～255)で変位量を決めるフィルターで
ちょうど中間の色の強さ 128 ( = #80 ) のときに変位0となるので、
まず一番下に#808080のべた塗りレイヤーを敷きます。

ちなみに、この画像をそのままマップとして使うと変位0のため、
フィルターをかけても元画像と出力画像は全く同じものになります。
 

Y座標に注目

まずY座標の変形について考えると、中心線に向かって縮めるような変形になるので
上の方のピクセルほど下に移動、逆に下のピクセルほど上に移動する形になります。

今回Y座標に緑のチャンネルを割り当てるとすると、
上の方ほど緑チャンネルは弱く、下のほうほど緑チャンネルは強く、
真ん中は中間値128になります。

緑チャンネルをモノクロであらわすと下記のような画像になります。

FireWorksではレイヤーモード（ブレンドモード）を「緑（もしくは青、赤）」にすると
そのチャンネルのみ合成することが可能なので、
ベースとなるグレーレイヤーに上の白黒グラデをレイヤーモードを「緑」で乗っけると
下記のような画像になるかと思います。

さらに今回は台形変形なので左側ほど緑チャンネルの値は中間値128に近づくことになります。
ですので下記のような#808080でアルファ値100%→0%のグラデーションをつくり

さらに上に重ねます。

これでY座標（緑チャンネル）は終わりです。
 

X座標に注目

台形変形のみであればX座標の変形は必要でないですが
今回は擬似３D的に画像を少し傾けるような表現のために
X座標も中心に向けて若干縮小するような変形をかけてます。

今度は横向きの黒→白のグラデーションをレイヤーモード「赤」で乗っけます。
今回は（右側の移動量）＞（左側の移動量）とするために
灰→白のグラデーションを重ねています。

 

完成 

今回作ったマップは上と違う手順でも作れます。
多分もっと早い手順もあるかと思います。
 
マップ画像の作り方は変形の種類によって多種多様ですが、
手書きで書く場合は上記のように赤緑青チャンネルを独立させて制作し、
 チャンネルごとに重ねていくのが一番作りやすいかと思います。
 

書き出しについて

余談になりますが、せっかく作ったマップ画像も
FLASHに持っていく際にJPEGとかにしてしまうと
変形後の画像に意図しないドット飛びなど出てしまいます。

PNG32などの可逆圧縮で、FLASH内のプロパティも「ロスレス」にしましょう。



次回は、変形＋アニメーションについて書きたいと思います。
このあたりから徐々にFLASHっぽくなります。
静止画を作るのであれば、わざわざマップ画像を作って「DisplacemenｔMapFilter」を使うより
お絵かきソフトで変形させちゃった方が早いですしね。。。