楽しい2D in 3Dアニメーションが簡単につくれる!進化したAnimate CCの新機能を体験しよう #AdobeMAX #AdobeMAXJP

BY 公開

Flashアニメーションといえば、2Dアニメーションというのは常識ですが、Animate CCの新バージョンでは3D空間にオブジェクトを配置した立体的なアニメーションがつくれるようになりました。とはいえ、3D描画ツールが搭載されたわけではなく、「奥行き感のある2Dアニメーション」が可能になったということです。早速、実際の例を見ていきましょう!

カンバス上のオブジェクトに奥行きを設定

カメラの横移動でつくるアニメーション

仮想カメラは、昨年公開されたAdobe Animate CC 2017リリースから搭載された機能です。仮想カメラはパンやズーム操作が可能で、まさにカメラで撮影しているような動きを、簡単につくれます。下の例は、カンバス上に描いた風景の前をカメラがパンしているアニメーションです。従来であれば、カンバス上の背景を動かして実現していたところです。

カメラと奥行きを設定した風景がつくるアニメーション

新しいAnimate CCでは、カンバス上のオブジェクト(正確にはレイヤー)それぞれに奥行きを設定できます。つまり、xとyに加えて z軸方向の値が指定できるわけです。その際、基準点(仮想カメラを使う場合はカメラの位置)から遠くにあるオブジェクトほど小さく表示されます。下の例では、遠くに配置した山が、ちゃんと遠くにある感じになっています。

また、カメラをパンすると、近くのものほど大きく移動するため、アニメーションに奥行き感が生まれます。上の例と比べてみてください。

カメラ位置にも奥行きを設定

仮想カメラにも(x, y, z)座標を指定できます。つまり、3D空間内を自由にカメラが動けるわけです。ここでは、ズームとの表現の違いを確認してみましょう。

奥行きを設定した背景にズームするアニメーション

まずは、ズーム機能を使って作成したアニメーションです。この例ではカメラの位置は動いていませんが、風景の中の個々のレイヤーが3D空間内に配置されているために、ズームに応じて奥行き感が生まれています。

カメラの位置が奥に移動するアニメーション

次は、カメラの位置を移動させて、奥の建物に寄ってみましょう。下の例は、カメラの位置を徐々に建物に近づけることでつくったアニメーションです。上のズームの例と比べると、空間の中に入り込んでいく雰囲気が感じられますね。

オブジェクトと一緒にカメラを移動させるアニメーション

カメラに位置を指定する代わりに、移動するオブジェクト(を含むレイヤー)にカメラを固定するという使い方が可能です。下の例は、空を飛ぶキャラクターの位置に合わせてカメラも移動して、だんだんと建物から離れていくというアニメーションです。

まとめ

昨年のアップデートで追加された仮想カメラは、今回のアップデートで追加されたレイヤー深度設定機能によって、更に表現力が向上しました。アニメーターの方には興味深い機能追加ではないでしょうか?

かなり力の入ったアップデートですので、是非最新版をダウンロードして、いろいろと試してみてください。きっと楽しめることと思います。

Adobe Animate CC新機能の詳しい情報は製品ページをご覧ください。

 

  AUTHOR

akihiro kamijo

アドビのコンサルティングチームでリードアーキテクトとして主にUIデザインプロジェクトに関わる。現在は独立してデザイン/開発に関連のマーケティング企画や情報発信、プロジェクト支援を行っている。