《#20》 3D変換（3）

Digicon Magazine読者のみなさんこんにちは、ななきちです。

今回は、3D空間内での移動しているように表現できる［3D変換］ツールを使って、3D効果を使ったアニメーションを作成します。

まず最初に3D変換ツールの動きを紹介します。続いて、サンプルを一緒に仕上げましょう。

目次

• 3D変換ツールの概要
• 3D変換の解除
• 3D変換ツールを使ったアニメーション

3D変換ツールの概要

今回の完成図は次のようになります。

 

まず、ダウンロードサンプルから、サンプルファイル「3Dtrance_sample.fla」を開いて下さい。用意されているシンボルインスタンス「Hello,」を選択し、ツールパネルから［3D変換］ツールを選択します。

 

ツールパネルで［3D変換］ツールを選択

 

［3D変換］ツールを選択すると、図のようなガイド線が表示されます。

緑ラインはY軸（縦）方向に、赤ラインはX軸（横）方向に、XY軸の中心の点はZ軸（奥行き）方向に移動します。XY方向は、［選択］ツールでオブジェクトを縦横に移動したのと同じですが、Z軸を移動したときのオブジェクトの変換に注目してください。

ドラッグに合わせて奥行を表現するため、オブジェクトのサイズが変化します。

 

上へドラッグすると奥へ、下へドラッグすると前へ移動しているように変化します。

まずは、自由にドラッグしてみて、［3D変換］ツールの動作を試してみて下さい。

3D変換の解除

移動の設定を解除して元のオブジェクトの形状に戻したい場合は、オブジェクトを選択したまま、メニューバーから［修正メニュー→変形→変形の解除］を選択します。

変形の解除を実行すると、オブジェクトのサイズと位置が元に戻ります。

 

ここまでで、［3D変換］ツールの機能紹介は終わりです。

3D変換ツールを使ったアニメーション

次に、サンプルファイル「3Dtrance_start.fla」ファイルを開きます。

このファイルのロゴはシンボルインスタンスに変換されています。また、［タイムライン］は45フレームが用意され、モーショントゥイーンが作成されています。

ステージで、「Hello,」の文字を選択します。
次に、［タイムライン］パネルで15フレーム目を選択しておきます。

 

［3D変換］ツールでオブジェクトを移動し、右上の奥にあるようなイメージを作ります。

 

Z軸を右上にドラッグしていき、オブジェクトを縮小します。

Y軸を上方向にドラッグします。

 

X軸を右方向にドラッグします。

 

次に、［タイムライン］パネルで30フレーム目を選択します。

 

Z軸を下方向に動かしてオブジェクトを拡大、Y軸を下方向にドラッグ、X軸を右方向にドラッグして、新たな位置に配置します。

Z軸、Y軸、X軸をそれぞれ移動します。シンボルインスタンスを移動すると、モーショントゥイーンでどのようにオブジェクトが移動しているかを表す点線（ここでは、レイヤーと同じ紫色の点線）も表示されます。

 

45フレーム目を選択しておきます。

ここでは、アニメーションのループが自然になるように、ロゴを、1フレーム目と同じ場所、同じサイズに戻します。ドラッグしても調整できますが、数値でコントロールすると簡単です。

シンボルインスタンスを選択し、［プロパティ］パネル（表示されていない場合は、ツールバーの［ウィンドウ→プロパティ］を選択）の「3D 位置とビュー」で、1フレーム目の状態とい同じ数値、「X：47」「Y：120」「Z：0」に指定します。

 

 

Enterキーを押すと、次のようなアニメーションが確認できます。また、メニューバーから［ファイル→パブリッシュ］を実行するか、Ctrl＋Enterキーでパブリッシュプレビューを実行してFlashムービーを作成できます。

45フレーム目

 

 

続いて、15フレーム目、30フレーム目とも、［3D回転］ツールで、それぞれアイコンを変形した状態にしました。

 

3D回転ツールに切り換え

 

15フレーム目

30フレーム目

Enterキーを押して再生するなど、してみましょう。シンボルインスタンスの移動位置によって多少違ってきますが、最初に紹介したような立体ロゴモーションのムービーができあがっているはずです。

いかがですか？

このように、Flashのモーショントゥイーンに3D効果を加えることで、より迫力のあるムービーが手軽に作成可能になります。