2007/06/01
吉岡 梅

連載目次へ >>

　Flashが備える「DisplacementMapFilter」クラスの仕組みを使うと，「置き換えマップ」と呼ばれる色の情報を使ってFlashムービーに変形効果を加えられます。手作業では作成するのが大変な映像表現も，比較的簡単に作成できます。

ムービーに変更効果を加える

　図1のムービーは，既存のムービークリップ・インスタンスを，スクリプトによってゆらゆらと揺れるように変形するものです。昭和テイスト溢れる表現を，1枚の絵とスクリプトだけで実現できますね。

図1●ゆらゆらと歪みをおこすムービー（クリックするとムービーを表示します）

　このような「DisplacementMapFilter」クラスを使った仕組みを用意すれば，あらかじめ用意しておいたムービークリップや画像だけでなく，ユーザーの描いた絵や，用意した画像なども，スクリプトによって変形することができます。

置き換えマップは「レンズ」の役割を果たす

　では，DisplacementMapFilterの仕組みを見てみましょう。このクラスは「置き換えマップ」と呼ばれるビットマップの色の情報に基づいて，任意のムービークリップ・インスタンスの見た目を変化させる処理を行います。

　「置き換えマップ」は，ちょうど「レンズ」や「虫眼鏡」のような役目をします。任意のムービークリップ・インスタンスを，このレンズを通して見ることにより，一部を拡大しているような形で見えたり，ゆがんで見えたりするわけですね。

　では，このレンズのような働きをする「置き換えマップ」は，どのような仕組みでムービークリップの見せ方を変化させているのでしょうか。

　実は，対象となるムービークリップ・インスタンスの画像の色を，ピクセル単位で細かく移動し，変形しているのです。「え，それってものすごく大変なんじゃない？」と思うかもしれません。でもご安心を。そのあたりの変形情報を「こんな感じかなあ？」と，我々にとってはアバウトに指定できるように，ビットマップの「色」の情報を使って変形を行う仕組みになっています（図2）。

図2●置き換えマップの例

　コンピュータで色を管理するための代表的な仕組みである「RGB値」は，赤（R）・緑（G）・青（B）の光の三原色の割合を表します。この3色の強さの割合を変えることによって，いろいろな色を表現しているというわけですね。それぞれのライトの光の強さを変えていくと，いろいろな色の組み合わせができるのです。多くの場合，このRGB値は，R・G・Bの3色の色の強さを0〜255の256諧調で管理しています。

　私たちは普通，「じゃあ，赤のライトの出力を30％，青を50％，で，緑は100％でお願い」というように，出力の度合いをパーセント(百分率)で表すことが多いかと思います。これと同じような感覚で，RGB値では，「じゃあ，赤のライトの出力を76，青を128，緑は255でお願い」と，0％〜100％の代わりに0〜255という数値で管理しているわけです。

　「置き換えマップ」では，この「0〜255」の値を「128」を中間として，「0〜127」と「129〜255」の二つの区間にわけて考えます（＊1）。128より小さければ「マイナス方向」，127より大きければ「プラス方向」といった具合です。RGBのB（青）の色のみで表すと，図3のようになりますね。

図3●RGB値を使ってプラス・マイナスを判断する

　結果として，「色の黒い部分はマイナス，色の白い(原色に近い)部分はプラス」というようなアバウトなイメージで，視覚的に変形の情報をとらえることができます（＊2）。

　DisplacementMapFilterでは，この情報を対象となるムービークリップに割り当てて変形を行います。例えば，図4のような格子状の絵が描かれたインスタンスがあるとします。このインスタンスに図4の下方にあるような三つの置き換えマップを適用してみましょう。

　このとき，変形の方向は横方向のみ，基準となる乗数（＊3）は「100」とします。

図4●インスタンスと置き換えマップ（クリックするとムービーを表示します）

　各置き換えマップ下の[適用]ボタンを押すと，置き換えマップを適用します。

いちばん左の置き換えマップは，三色で塗り分けられています。上から順に「青の値255」「青の値128」「青の値0」つまり，「プラス方向の最大値」「中間値」「マイナス方向の最大値」の3色です。この置き換えマップの適用結果は，それぞれの色に対応した3ブロックに別れて格子状の模様が移動しますね（＊4）。

　次に，真ん中の置き換えマップの適用結果を見てみましょう。この置き換えマップは，青の値を255〜0までだんだんとグラデーションさせています。その結果，格子状の模様もだんだんと左右にずれ，ちょうど平行四辺形のように変形します。

　最後に，いちばん右の置き換えマップの適用結果を見てみましょう。この置き換えマップは，青の値255〜0のグラデーションと青の値0〜255のグラデーションを連続させたものです。結果はグラデーションに沿って格子状の画像がジグザグに変形します。

　また，置き換えマップ上部の[変化の乗数]の値を，スライダを使って変更してから置き換えマップを適用してみると，その大きさに応じて各置き換えマップによる座標の移動の度合いも変化することが確認できます。

　つまり，置き換えマップというのは，

1. 元の画像の任意のピクセルに対応した置き換えマップの色情報を取得して
2. 取得した個所の色を「128」を元に判定し，
3. 乗数を掛け合わせた値(オフセット値)を算出して
4. オフセット値の位置に元の画像のピクセルを移動させる

という手順を踏んで画像を変形させているわけです。

実際のDisplacementMapFilterのコード

　では，実際にDisplacementMapFilterを使ったコードを作成してみましょう。DisplacementMapFilterは，その名の通りインスタンスに適用する「フィルタ」です。そのため，グローやベベルといったフィルタ効果と同じように，MovieClipクラスのfilterプロパティへと設定を行います。

次ページ以降はITpro会員(無料)の方のみお読みいただけます。
会員の方は、 ログインしてご覧ください。
まだ会員でない方は、ぜひ登録（無料）していただき、ITproの豊富なコンテンツをご覧ください。