これまで「Adobe Flash CS4」を用いて初心者でも作れるオブジェクトベースアニメーションの作り方について、その1その2と2回に分けてお送りしてきた。今回注目したいのは、2D画像に3D効果を付加して、3D風に見せる機能だ。厳密には3DCGソフトのように扱うインタフェースではないが、その3D効果を実際に使ってみよう。オリジナルのFlashファイルをダウンロードできるようにしたのでFlash CS4ユーザは参考にして欲しい。

ふたつの3Dツール

Flashのオーサリングツールに追加された3D機能は大きく分けて「3D変換ツール」、「3D回転ツール」のふたつがある(3D空間では移動を変換、回転を変形と呼ぶ)。まず3D変換ツールは、3D空間におけるオブジェクトの移動ツール。2Dのイメージに、3Dオブジェクトとしての奥行きを示す座標(Z軸)を持たせる機能だ。オブジェクトそのものには奥行きがないが、配置されている空間には、3D座標が当てはまることになる。そして3D回転ツールは、2Dのイメージを立体的に回転させる機能。これも、3D変換ツールに倣うなら3D変形ツールが正しいかもしれない。従来から使用可能だったツールパレットの変形を使った回転機能は、平面的な回転のため、横回転したりする程度だったが、この3D回転ツールを使うことにより、イメージを手前に回転することができる。

ここで気をつけることは、これらふたつの3D効果を適用できるのは、「ムービークリップインスタンス」だけだということと、あくまでも3Dツールで変形するのは、ビットマップであるということだ。ムービークリップシンボルがベクターであっても、ビットマップに変換してから変形しているので、ピントが甘くなったように見えることがある。これらを承知の上で利用しよう。

今回は3Dツールの基本的な使用方法を紹介する。なお、2Dの画面を3D空間のように見せるためには消失点が重要な役割を果たす。Flashでは、消失点をステージのどこに置くか、設定できるようになっているのでその方法と効果についても紹介しよう。

3D回転ツール

3D回転ツールを使って、サンプルアニメーションを作ってみよう。

サンプル動画

まずツールパレットを使用して、円を描く。 サンプルでは、回転がわかりやすいように字を書いた。

ステップ1

ドローツールで円を描く

次に、描いた図形をムービークリップとしてシンボルに変換する。

ステップ2

シンボルに変換する

ここから、3D回転ツールを使っていくが、ここで説明するのは、基礎的な操作方法だ。ツールパレットの上から4つ目にある3D回転ツールに切り替えてから、ステージにあるオブジェクトをクリックする。

ステップ3

3D回転ツール

クリックしたステージ上のオブジェクトには図のようなオーバーレイがあらわれる。 これらは、そのムービークリップの3D空間における位置を表すとともに、ドラッグして変形を行うために使用する。

ステップ4

3D回転ツールによるオーバーレイ

真ん中の十字の横の軸(緑色)付近でカーソルの右下にYが出たら、ドラッグするとオブジェクトがY軸を中心に回転し始める。

ステップ5

Y軸の周りを回転

また、十字の縦の軸(赤色)付近では、カーソルの右下にXが出て、ドラッグするとX軸を中心に回転する。

ステップ6

X軸の周りを回転

これらふたつの回転を軸単位ではなく、自由に回転できるようにしているのが、一番外側のオレンジ色の円だ。これは、X軸とY軸を同時に回転させることができる。

ステップ7

XY軸の周りを回転

最後に十字と交差している内側の円(青色)をドラッグすると、Z軸を中心に回転できる。カーソルの右下にはZが表示される。

ステップ8

Z軸の周りを回転

また、デフォルトでは回転の中心はオブジェクトの中心点(白丸)だが、それも白丸をドラッグすれば中心を変更できる。変形しすぎて、元にもどしたくなったらメニュバーの「修正」→「変形」→「変形の解除」で一番最初の状態に戻すことができる。では、実際に先ほど紹介した「亀」エンブレムが手前に一回転するアニメーションを作成しよう。