Flash Professionalから名称を変えて一年。Animate CCはこんなに進化した

2016年11月に公開され2017年1月にアップデートされたAnimate CC 2017リリース。HTML5やFlashを中心として、アニメーション作成に役立つ機能がたくさん追加されました。本記事では、昨年11月にサンディエゴで開催されたAdobe MAX 2016での開発チームによるセッションの内容と合わせて便利な新機能を紹介します。

▲Animate CC 2017のスプラッシュ画面

Adobe Animate CCの新機能

2016年中に、Animate CCには3回の大きなアップデートがあり、アニメーション機能強化、HTML5 Canvasの最適化、Creative Cloudとの連携などが追加されました。公式サイトのAnimate CC新機能にも掲載されていますが、各バージョンごとの主要な新機能を振り返ってみましょう。

主な機能だけでも沢山ありますね。着々と新機能が追加されるAnimate CC。その中から、私が「アニメ制作やウェブサイト制作に便利」と感じた機能を、順に見ていきましょう。

__
Adobe Animate CC
ダウンロード

映画のようなカット割りが可能に。仮想カメラ機能の搭載

タイムラインアニメーション向けに仮想カメラ機能が搭載されました。映像制作ソフトのAdobe After Effectsに搭載されている3D仮想カメラの二次元版。一部分だけにズームしたり、パンしたり(水平方向にアングルを動かすこと)といった表現ができるようになります。

仮想カメラのキーフレームだけでカット割りができるようになるため、ストーリー仕立てで作るときに役立ちます。映画のワンシーンのようなタイムラインを用意しておき、キャラクターの顔だけにズームアップするという使い方を開発チームが紹介していました。

▲タイムラインの一番上にカメラレイヤーが配置されている

仮想カメラに対してもトゥイーンを設定できるので、移動撮影（トラック撮影）や手持ち撮影のようなカメラワークも実装可能。また、Animate CCで描いたグラフィックは基本的にベクターであり、拡大・縮小してもグラフィックが荒れないためズーム表現と相性が良いといえます。アニメ制作においては、仮想カメラは待望の新機能と言えるでしょう。

GIFアニメ書き出し

ウェブサイト制作でGIFアニメの需要が増しています。GIFアニメというと一昔前はチープな印象がありましたが、最近はシネマグラフをはじめとして、クールな表現の用途で積極的に導入しているウェブサイトを見かけるようになりました。GIFアニメはH.264等の動画ファイルと比べて、自動的にインライン再生ができる、手軽に扱えるといったメリットがあります。TwitterやFacebookなどのソーシャルメディアでもGIFアニメが投稿できるなど、サイト制作に限らず用途が増えています。

Animate CCでも従来からGIFアニメ出力はできましたが、出力画質が優れないという欠点がありました。GIFアニメの画質を改善するには、Animate CCから連番PNGファイルとして出力し、PhotoshopでGIFアニメに変換という手順をとらざるを得ませんでした。

GIFアニメの需要が増している一方でAnimate CCのGIFアニメの画質が課題・・・、それがAnimate CC 2017でついに改善されたのです。GIFアニメ書き出し専用の画面で出力サイズや使用色を調整しながらファイルサイズを最適化できます。

▲Photoshopに似たGIFアニメ書き出し画面

HTML5 Canvasの書き出し方法の充実

HTML5 Canvasドキュメントで、HTMLページ内での配置をカスタマイズできるようになりました（2015.2リリースから）。この改善によりブラウザ幅に応じてコンテンツサイズを自動的にフィットさせる選択が可能になっています。スマートフォンサイトとPCサイトとでは横幅が異なり、レスポンシブウェブデザインが重視される昨今のウェブサイト制作に嬉しい新機能ですね。

▲HTML5 Canvasドキュメントのパブリッシュ設定画面にレスポンシブ対応のオプションが追加された

また、HTML5 Canvasコンテンツを、HiDPI/Retinaディスプレイ向けに適切なサイズで配置できるようになりました。SVGと異なり、HTML5 Canvasはベクターではなくラスターとして処理されるため、適切にcanvas要素のサイズやスタイルシートを設定しないとくっきり表示させることができません。そのため、従来は適切に配置するために複雑なJavaScriptのコードを書かなければならず、高度なJavaScriptの知識を必要としました。この機能改善のおかげで、制作者が意識しなくても適切な配置ができます。

また、プリローダーも配置するためのオプションも追加されました。

GoogleフォントやTypeKitフォントの利用

Animate CC内でTypekitやGoogleフォントを使えるようになりました（Typekitフォントは2015.1、Googleフォントは2015.2リリースから）。フォントの設定パネルから、それぞれのサービスのフォントを選ぶことができます。選択したフォントはウェブフォントとして使えるため、どのブラウザ環境でも同じフォントとして表示できます。

▲ Google Web フォントの利用パネル

▲ TypeKit フォントの利用パネル

再び盛り上がりはじめたAnimate CC

Adobe MAX 2016のAnimate CCのセッションは、過去数年と比較して注目度が高かったように思いました。筆者は2009年から毎回Adobe MAXに参加していますが、Adobe MAX 2016で参加したAnimate CC関連のセッションはどれも満席でした。Animate CCへと名前を変えたことで改めて注目が集まっているのかもしれません。

以下、筆者の参加したAdobe MAX 2016のセッションの様子を紹介します。

セッション「Cheating Your Way to Better Animation」では、アニメーション制作会社Titmouseによる、タイムライン制作テクニックが紹介されました。客席はいっぱいに埋まっています。

Adobe Animate CCのセッション。コミカルなアニメの上映で、会場の笑いや拍手が多い#AdobeMax #MAX野郎 pic.twitter.com/cE0jjphKcy

— 池田 泰延 (@clockmaker) 2016年11月2日

セッション「HTML5 Banner Ad Creation 101」では、広告業界団体IABによる業界標準のHTML5バナー制作方法が紹介されました。

午後は世界先端&最新のテクニックが勉強できるセッションを受講します。はじめは「Afobe Animate CC: HTML5 Banner ad Creation」を聞きます。#MAX野郎 #AdobeMax pic.twitter.com/YeV9u60MAL

— 池田 泰延 (@clockmaker) 2016年11月2日

また、セッション「Adobe Animate CC: A New Era for the Animation Industry」ではプロダクトマネージャーのAjayが #madewithanimate というハッシュタグで寄せられたAnimate CCで作られたコンテンツを紹介しました。Twitterから作品は確認できるので、ぜひ見てみてください。


https://blogs.adobe.com/creativestation/files/2017/02/animate-cc-2017-tweet.png

進化を続けるAnimate CC。Flash Professional時代から使っていた方にも、初心者にも役立つ機能が充実してきています。これからの動向から目を離せません。