Lesson6では「Fuse Kit」に続いて、オープンソースの「Sandy」を取り上げる。SandyはFlashで3Dを表現することができるActionScript2.0ベースのクラスパッケージライブラリーだ。3Dに関してかなり広範囲のことができるが、筆者自身も勉強中の段階である。全容を解説とまでいかないが、簡単で効果の高いものをピックアップしながら進めていきたい。

今回はSandyの3Dライブラリに含まれる「DistortImgクラス」を使って画像を変形してみよう。このクラスは3Dオブジェクトにビットマップ画像をマッピングするためのものだが、単独でもいろいろ使い途がある（ちなみに“distort”は“ゆがめる”、“曲げる”という意味だ）。

主な特徴は、画像のコーナーに対応する4つの座標を指定することによって、その4つの座標に囲まれたエリアにフィットする形で画像を自由に変形できる点だ。つまり、四角形であれば、どのような形にでも対応できる。

中でも特記に値するのが、台形のようなパースのかかった形への変形だろう。ひと口に画像を変形させるといっても、平行四辺形やひし形への変形とちがい、「台形」への変形は通常、一筋縄ではいかない。アプローチの手法はいろいろあるが、DistortImageクラスでは、三角形に細分化して変形を行う手法を採っている。まずは三角形に分割して変形するとはどういうことか、簡単にみていこう【サンプル1】。

【サンプル1】は画像を台形に変形するイメージ図だ。実際に角度、回転を計算しているわけではないが、実際にActionScriptで計算させようとすると、かなり難解な作業になる。また、【サンプル1】では画像を三角形2つに分割しているだけだから、“ひずみ”が大きく、画像によってはそれがかなり目立ってしまう。ひずみを目立たなくするには、三角形をさらに分割して細分化すればよいが、構造はさらに複雑になるだろう。

このように台形への変形は工程が複雑で大変なことを理解した上で、Distortイメージクラスを利用させてもらおう。

【サンプル2】を作成していこう。まず、ライブラリに画像を読み込み、リンケージを設定する【図1】。今回、使用している猫の画像は横300px、縦200pxのpng画像で、リンケージ識別子は「cats.png」としている。

次に、ドラッグできるポイントを作成しよう。まず土台となる円を描画し、その上のレイヤーにダイナミックテキストフィールドを置いたムービークリップを作成する。その後、そのインスタンスを4つ、ステージに配置しよう【図2】。

このムービークリップの座標が画像の四隅の座標に対応する寸法だ。それでは、メインとなるActionScriptを_rootのフレーム1に記述しよう【図3】。

画像を台形に変形することは通常は手間の掛かる作業なのだが、SandyのDistortImageクラスを使えば、【図3】のようにたった数行で実現できてしまう。

まず、【図3】の黄色のマーキングの部分で、DistortImageクラスのインスタンスを作成する。このとき、行末のパラメータに「4」が2つ並んでいるが、これは三角形の分割の数を表している。Sandyを試してみて推測するに、次の【図4】のようになっているのだと思う。

この分割の数値は2つを同じ値にする必要がある。また、数が多ければよりスムーズになるが、それだけ処理が重くなるため、画像によってひずみの目立たない数値で、かつできるだけ小さい数値を指定する方が効率がいい。

次に、【図3】のオレンジ色の背景部分だが、ここで画像を変形している。パラメータに8つの値が指定されているが、それぞれ左上のx座標、y座標、右上のx座標、y座標、右下のx座標、y座標、左下のx座標、y座標に対応している。左上を始点に時計回りになっていると覚えればよいだろう。

分割数と4つのコーナーポイントを指定するだけで、いとも簡単に台形など自由に画像を変形できる優れもののDistortImageクラス。いろいろな場面で活躍することだろう。