第9回 3D回転ツールの使い方アニメーションの作り方からActionScript 3.0プログラミングまで、ステップアップで脱初心者

今回は3D回転ツールを使用した疑似的な3Dアニメーションの作り方をご紹介します。

Adobe Flashの3Dとは

Adobe Flash CS4(アドビ フラッシュ CS4)から機能追加された、[3D回転]ツールと[3D変換]ツールを使用して、簡単に擬似的な3Dアニメーションを作成することができます。

しかし、3Dといってもオブジェクト同士の重なりはレイヤーに依存するため、完璧な3Dとは言えません。

従来Flashで3Dアニメーションを作成しようと思うと、プログラミングで制御をしないと作成することはできませんでしたが、簡単な3Dアニメーションだったら、3D回転ツールと3D変換ツールを使用して簡単に作成することができるようになりました。

▼完成図

コンテンツの再生には、最新のAdobe Flash Playerが必要です。アドビ システムズのホームページよりダウンロードのうえ、インストールをお願いします。

作成方法

  1. [矩形]ツールで正四角形を1つ描画して、ムービークリップシンボルに変換します。
  2. 作成したシンボルを[選択]ツールでダブルクリックして、シンボル編集画面を開きます。ステージ上のオブジェクトをムービークリップシンボルに変換します。
    ムービークリップシンボルに変換
  3. 新規レイヤーを2つ追加して、レイヤー名を上から順に「正面」「左面」「右面」とします。
    新規レイヤーを2つ追加
  4. ステージに配置してあるインスタンスをコピーして、新しく追加したレイヤーにそれぞれペーストします。左面レイヤーに配置したインスタンスの明度を-20%に設定します。
    左面レイヤーに配置したインスタンスの明度を-20%に設定
  5. 右面、左面それぞれの[Y回転]を変更していきます。[3D回転]ツールを選択して、右面レイヤーに配置したインスタンスをクリックします。基準点(中央の白丸)を、右面と正面のインスタンスの間にします。
    基準点を設定
  6. [変形]パネルで[3D回転]-[Y回転]を-90度にします。
    ※[変形]パネルが表示されていない場合は、[ウィンドウ]メニュー-[変形]から開いてください。
    [Y回転]を-90度に設定
  7. 次に左面レイヤーに配置したインスタンスをクリックして、基準点を、左面と右面のインスタンスの間にします。[変形]パネルで[3D回転]-[Y回転]を90度にします。
  8. メインタイムラインに戻り、モーショントゥイーンを作成して48フレーム目にフレームを挿入します。
  9. 1フレーム目と48フレーム目それぞれで、[3D回転]ツールを使用してインスタンスの角度を調整しながら動きをつけていきます。

以上で完成です。シンボル内のレイヤー構造はそのままなので、角度をつけ過ぎてしまうと壁の向こうが透けて見えてしまうので注意が必要です。(汗)

背景を変化させたり、下から上へ煽るようなカメラワークにするとより自然な動きになります。

次のページは…
ショートカットキー キーボード編
関連リンク
伊東 茉奈美 (いとう まなみ)
伊東 茉奈美 (いとう まなみ)
トレーニングプランナー

SATT入社後、m-SchoolでFlashのインストラクターを担当。

トレーニングコースの企画・開発等を経て、現在はトレーニング(企業研修)やeラーニングに関するコンサルティングを担当。

K-1好きは誰にも負けない自信あり。

Flash Beginner's School

RSSフィードで
最新情報を購読