楽しい2D in 3Dアニメーションが簡単につくれる!進化したAnimate CCの新機能を体験しよう #AdobeMAX #AdobeMAXJP
Flashアニメーションといえば、2Dアニメーションというのは常識ですが、Animate CCの新バージョンでは3D空間にオブジェクトを配置した立体的なアニメーションがつくれるようになりました。とはいえ、3D描画ツールが搭載されたわけではなく、「奥行き感のある2Dアニメーション」が可能になったということです。早速、実際の例を見ていきましょう!
カンバス上のオブジェクトに奥行きを設定
カメラの横移動でつくるアニメーション
仮想カメラは、昨年公開されたAdobe Animate CC 2017リリースから搭載された機能です。仮想カメラはパンやズーム操作が可能で、まさにカメラで撮影しているような動きを、簡単につくれます。下の例は、カンバス上に描いた風景の前をカメラがパンしているアニメーションです。従来であれば、カンバス上の背景を動かして実現していたところです。
カメラと奥行きを設定した風景がつくるアニメーション
新しいAnimate CCでは、カンバス上のオブジェクト(正確にはレイヤー)それぞれに奥行きを設定できます。つまり、xとyに加えて z軸方向の値が指定できるわけです。その際、基準点(仮想カメラを使う場合はカメラの位置)から遠くにあるオブジェクトほど小さく表示されます。下の例では、遠くに配置した山が、ちゃんと遠くにある感じになっています。
また、カメラをパンすると、近くのものほど大きく移動するため、アニメーションに奥行き感が生まれます。上の例と比べてみてください。
カメラ位置にも奥行きを設定
仮想カメラにも(x, y, z)座標を指定できます。つまり、3D空間内を自由にカメラが動けるわけです。ここでは、ズームとの表現の違いを確認してみましょう。
奥行きを設定した背景にズームするアニメーション
まずは、ズーム機能を使って作成したアニメーションです。この例ではカメラの位置は動いていませんが、風景の中の個々のレイヤーが3D空間内に配置されているために、ズームに応じて奥行き感が生まれています。
カメラの位置が奥に移動するアニメーション
次は、カメラの位置を移動させて、奥の建物に寄ってみましょう。下の例は、カメラの位置を徐々に建物に近づけることでつくったアニメーションです。上のズームの例と比べると、空間の中に入り込んでいく雰囲気が感じられますね。
オブジェクトと一緒にカメラを移動させるアニメーション
カメラに位置を指定する代わりに、移動するオブジェクト(を含むレイヤー)にカメラを固定するという使い方が可能です。下の例は、空を飛ぶキャラクターの位置に合わせてカメラも移動して、だんだんと建物から離れていくというアニメーションです。
まとめ
昨年のアップデートで追加された仮想カメラは、今回のアップデートで追加されたレイヤー深度設定機能によって、更に表現力が向上しました。アニメーターの方には興味深い機能追加ではないでしょうか?
かなり力の入ったアップデートですので、是非最新版をダウンロードして、いろいろと試してみてください。きっと楽しめることと思います。
**Adobe Animate CC新機能**の詳しい情報は製品ページをご覧ください。