《#18》 3D回転（1）

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

Flashでは、擬似的な立体感（3D空間）を表現することができます。
オブジェクトを奥行きのあるかたちに変更したり、奥行きを感じさせるアニメーションも作成することができます。
今回から数回にわたって、3D空間を使ったアニメーションを作成していきましょう。

目次

• 2種類の3D効果ツール
• 3D回転ツールでオブジェクトの回転を試す
• 3D回転ツールを使ったアニメーション

今回は、以下のような回転を作成します。この完成例は、ダウンロードできるサンプルデータの「3Dsample1.fla」もしくは「3Dsample1.swf」で確認できます。

 

 

2種類の3D効果ツール

Flashでは、オブジェクトをあたかも奥行きがある空間内で回転させているように変形させる「3D回転ツール」と、オブジェクトを3D変換し移動を可能にさせる「3D変換ツール」が用意されています。
3Dに変換させるということは、横軸のX軸、縦軸のY軸に、奥行きを表すZ軸が加わった回転や移動が可能になるということです。

たとえば、設定によっては、下の例のように回転しているように見えたり、飛び出てくるように見える加工ができます。

 

 

 

3D回転ツールでオブジェクトの回転を試す

では、文字が回転するアニメーションを実際に作ってみましょう。ダウンロードしたサンプルファイルから、「3D_start.fla」 を開きます。
文字のオブジェクトを文字のまわりをドラッグで選択し、メニューバーから［修正―シンボルに変換］を選択して、ムービーシンボルに変換します。

 

ロゴを囲い込むように選択。

［シンボルに変換］を選ぶと、続けてシンボルに変換ダイアログが表示される。

名前をつけておき、「種類」では「ムービークリップ」を選択します。「OK」をクリックします。

 

［ライブラリ］にシンボルが登録されました。3D回転ツールを使用するには、このようにオブジェクトをシンボル化しておきます。

 

ツールパネルから、「3D回転ツール」を選択します。

「3D回転ツール」を選択します。

図のようなオーバーレイ（線や円のガイドライン）が表示されます。

このオーバーレイを使って、オブジェクトの各軸をドラッグして回転させていきます。
緑ラインはY軸（縦）を中心に回転、赤ラインはX軸（横）を中心に回転、青ラインはZ軸（奥行き）を中心に回転します。
またオレンジラインは、自由回転となっています。

 

 

 

試しに、自由にドラッグしてみて、ロゴが変形されるのを確認してください。

 

ここではまだ練習なので、回転の設定を解除して元の画像に戻しておきましょう。

3D回転を設定したオブジェクトを選択し、メニューバーから［修正―変形―変形の解除］を選択します。

 

 

 

3D回転ツールを使ったアニメーション

では、サンプルとしてX軸回転を使ったアニメーションを作ってみます。［タイムライン］パネルで、「hello」レイヤーの30フレーム目をクリックし、選択します。続けて、Shiftキーを押しながらと「bg」レイヤーの30フレーム目をクリックします。

 

これで、2つのレイヤーを選択できました。

メニューバーから［挿入―タイムライン―フレーム］を選択し、フレームを挿入します。

 

回転させたいオブジェクトが置いてあるのレイヤー（ここでは、「hello」レイヤー）を選択し、メニューバーから［挿入―モーショントゥイーン］を選択します。

 

30フレーム目を選択したままの状態で、ツールパネルで［3D回転ツール］を選び、赤い中央の線をドラッグして、オブジェクトを180度、回転してみましょう。

 

回転できたら、Ctrl＋Enterキーを押してパブリッシュプレビューを確認してみましょう。すると、最初に紹介した、文字がX軸を中心として回転するアニメーションができます。

上手にできましたか？

 

回転方法によって、さまざまなバリエーションが作れますので、次回以降でも紹介していきます。

では、また次回！