Animateテクニカルノート

Animate CC 2018で奥行きのあるカメラワークを表現する

ID: FN1711002
Product: Animate CC
Version: 18.0

Animate CC 2017から仮想カメラが備わりました。さらに、Animate CC 2018 (バージョン18.0)で加わったレイヤー深度を使えば、アニメーションに奥行きのあるカメラワークが採り入れられます。本稿では、その参考になる記事やビデオチュートリアルをご紹介します。

01 奥行きのあるカメラワーク表現

まずは、奥行きのあるカメラワークがどのようなアニメーションとして表現できるのか見ておくとよいでしょう。Adobe Creative Station の記事「楽しい2D in 3Dアニメーションが簡単につくれる！進化したAnimate CCの新機能を体験しよう」には、奥行きの定められたオブジェクトにカメラのパンやズームなどを組み合わせてつくった、いくつかの短いアニメーションが掲げられています(図001)。

図001■カメラの横移動でつくられたアニメーション

02 カメラとレイヤー深度の使い方

では、実際にカメラやレイヤー深度をどのように使ってアニメーションがつくれるのか、LinkedInラーニングの「Animate CC 2018の新機能」でご紹介しています。以下の3つのビデオレッスンで、基本的な操作が理解できるでしょう。

03 カメラをJavaScriptでコントロールする

カメラのパンやズームそして回転などは、スクリプトでコントロールできます。「Animate CC 2018のカメラをJavaScriptで操作する」では、HTML5 CanvasドキュメントでパンとズームをJavaScriptコードでどのようにコントロールすればよいかについて、簡単な作例とともに解説しています。以下のサンプル001が作例で、カメラはマウスポインタの動きに応じてパンし、水平ドラッグでズームします。

サンプル001■Controlling camera in Animate CC 2018

>> jsdo.itへ

作成者: 野中文雄
作成日: 2017年11月22日