サイトトップ

Director Flash 書籍 業務内容 プロフィール

Animateテクニカルノート

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


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

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

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

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

図001

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

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

02-01 カメラツールを使う

カメラツールを使う、コース: Animate CC 2018の新機能、講師: 野中 文雄

02-02 カメラに接続とプロパティパネルの操作

カメラに接続とプロパティパネルの操作、コース: Animate CC 2018の新機能、講師: 野中 文雄

02-03 高度なレイヤーとレイヤー深度

高度なレイヤーとレイヤー深度、コース: Animate CC 2018の新機能、講師: 野中 文雄

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

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

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

図002
>> jsdo.itへ

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


Copyright © 2001-2017 Fumio Nonaka.  All rights reserved.