【ハウツー】

「Adobe Flash CS4」の3D効果を使いこなす(後編)

1 3D変換ツールを使いこなす

    伊藤のりゆき(NORI)  [2009/04/16]

    「Flash CS4」の3D効果を使いこなすためのハウツー記事。前編では3D回転ツールを用いたアニメーション制作を紹介してきたが、後編では「3D変換ツール」について紹介していこう。前編同様のオリジナルFlashファイルをダウンロードできるようにしたのでFlash CS4ユーザは参考にして欲しい。

    3D変換ツール

    3D変換ツールは、2D空間のオブジェクトを3D空間の座標に変換するツールだ。3Dでは、手前(Z座標がマイナス)ほど、大きく見えるのと同じように、同じシンボルを使用しても3D空間のどこに配置するかによって大きさ、形などが変わってみえる。また、実際にモーショントゥイーンなどで利用すれば、表示しているオブジェクトを、あたかも3Dツールでアニメーションしているように見せることが可能だ。「3D変換ツール」は3D回転ツールと同じ場所にあり、ツールパネルの4つ目のボタンを長押しすると選択できる。

    ステップ1

    3Dツールは長押しで回転と交換を変更できる

    「3D変換ツール」にしてから、ステージ上のムービークリップをクリックすると3D回転ツールと同じように、オーバーレイが表示される。

    ステップ2

    3D変換ツールによるオーバーレイ

    赤い矢印の三角形の部分をドラッグするとX座標を移動し、緑色の矢印の三角形の部分をドラッグするとY座標を移動できる。Z軸にそって移動させる場合は、中心の黒丸をドラッグする。また、プロパティパネルの「3D位置とビュー」の各プロパティで設定することもできる。さらにモーショントゥイーンをしているオブジェクトなら、モーションエディタでの設定も可能だ。今回の3D移動ツールを使って、以下のアニメーションを作成してみよう。

    動画
    7個のボールの集合と拡散

    まず3D移動ツールでの設定が可能なようにムービークリップを作成する。

    ステップ3

    ボールのムービークリップシンボルインスタンス

    アニメーションの途中の集合したイメージを先に作成するため、7つのシンボルをステージに配置して「整列パネル」で画面の中央に並べる。

    ステップ4

    ボールを整列

    次に、3D効果のアニメーションもモーショントゥイーンで作成する。しかし、モーショントゥイーンは、1レイヤーに1個しか設定できないため、7個のボールを7つのレイヤーに分けなくてはいけない。そこで、すべてのオブジェクトを選択して「レイヤーに配分」を実行する。

    ステップ5

    レイヤーに配分

    すべてのオブジェクトを選択してから「右クリック>モーショントゥイーンを作成」を実行する。また、24フレーム目を集合状態にしたいので、そこにキーフレームを作成しよう。Ctrlキーを押しながらフレームを選択すると、1フレーム単位で選択することができる。この方法で24フレーム目を選択したら「右クリック>キーフレームの挿入>すべて」でキーフレームを作成し、これをレイヤーごとに繰り返していく。

    ステップ6

    モーショントゥイーンを作成

    ステップ7

    キーフレームを挿入(レイヤーごとに繰り返す)

    24フレームのすべてのレイヤーにキーフレームを作成終了後、さらにフレームを48フレームまで伸ばす。48フレーム目は、集合したボールが拡散するところだ。

    ステップ8

    フレームの挿入

    全部で1~48フレームを作成した。キーフレーム(黒丸)が1と24のフレームにあるだろうか。1フレーム目は、完成したアニメーションでボールが集合前の状態にする必要があるが、まだ実際には集合後の状態になっている。 そこで、3D変換ツールを使用して、3D空間に散らばるように配置しよう。 3D変換ツールのオーバーレイ(矢印の三角)をドラッグして移動させる。ダイナミックな移動をさせたいときはオブジェクトを選択してからプロパティパネルの「3D位置とビュー」にあるX,Y,Zのプロパティをドラッグすると良いだろう。

    ステップ9

    3D位置とビュー

    ステップ10

    3D変換ツールで1フレーム目にあるすべてのボールを移動

    1フレーム目の設定をしたら、次は48フレーム目を編集する。ここにもキーフレームが必要だ。しかしオブジェクトのプロパティを変更すれば、自動的にキーフレームが挿入されるので、ボールを1個ずつ選択して、3D座標を設定していけば良い。出来上がると、以下のようなアニメーションになる。

    動画
    完成したアニメーション

    アニメーションが少しだけスピードが遅いので動きを早くするため、全体のフレーム数を調整する。タイムラインにある青色のトゥイーンスパンの右端を左にドラッグして短くすれば全体の時間を短くできる。逆に長くすれば、さらにゆっくりしたアニメーションにできる。ここでは、動きを早く見せたいので短くした。トゥイーンスパンの長さによって、キーフレームのあるフレームは自動的に変化する。

    ステップ11

    トゥイーンスパンをドラッグ

    動画
    修正を加え、最終的に完成したアニメーション

    次のページでは、3D空間における消失点の調整について説明する。

    関連したタグ

    新着記事

    特設サイトの情報

      人気記事

      一覧

      イチオシ記事

      新着記事

      特別企画

      マイナビニュースマガジン