*

【Adobe Animate CC】デザイナー視点で使いやすくなった新機能を解説!

公開日: :

こんにちは、CG開発室のOTKです。

今回は、2016年に名称変更された「Adobe Animate CC」の新機能をいくつかご紹介したいと思います。
イラスト・アニメーション制作の際に使える!と思った機能を何点か抜粋しました。

(前回の記事で、MotionArtistの研究編に進むとしておりましたが、遠藤が締め切りを飛ばしましたのでAdobeAnimateの記事になります)

Adobe Animate CC とは?

animate

はじめに、Adobe Animate CCとはどんなソフトかご紹介します。

Animateは元々、「Flash」と呼ばれていた「Adobe Flash Professional」が名称変更されたもので、多くのプラットフォームに適したアニメーション制作ツールです。様々なフォーマットに書き出し対応しているため、すべてのデスクトップやモバイルデバイスに向けてコンテンツを配信できます。
また、※ベクターデータを扱う事に非常に長けているため、あらゆる画面で高画質での表示が可能です。

※ベクターデータ
グラフィックデータを数値で現し描く形式をベクター形式と呼び、ベクター形式で描かれた画像をベクターデータ(ベクターイメージ)と呼びます。ベクターデータは数値によって描かれているため、拡大縮小を行っても画質が落ちず、容量も小さく済みます。

Adobe Animate CCへの名称変更の理由

Adobe公式では、名称変更の理由を以下のように記しています。

「Web や新たなプラットフォームに最適なアニメーション制作ツールであることをより明確に示すため、Adobe Animate CC へ名称変更いたします。」

https://blogs.adobe.com/creativestation/web-flash-pro-now-animate

上記の記事によると、Flash Professionalで制作されるコンテンツの1/3以上はHTML5を使用したものであるとのことで、今回Flashという名称からAnimateに変更することでより世に浸透しやすくなるものと思われます。
さらにこの名称変更を機に新機能の追加・大幅な機能強化が行われ、今後Adobe Animateには更なる注目が集まることとなりそうです。

イラスト・アニメーション制作の際に使える新機能

さて、名称変更と共にAnimateには新機能が沢山増えました。
Animate内で制作を行う際に、使い勝手が良いと思った新機能を抜粋してご紹介致します。

新機能①:ベクターアートブラシ

ベクターアートブラシとはフリーハンドで線を描けるツールの1つで、描いた線にスタイルを設定することができます。特徴を大きく2つに分けてご紹介します。

スタイルの種類が豊富

ベクターアートブラシに設定できるスタイルは、元々搭載されているスタイルの種類だけでもかなり豊富で、これだけで簡易に素材が作れます。

blog03

例えばスタイルを変えて線を引いただけで、以下のような画像を作ることができます。

blog02

更に元々あるブラシスタイル以外にも、「Adobe Capture CC」を使用して新規のブラシスタイルを制作し、スタイルを追加することができます。新規のブラシスタイルをCC Librariesに読み込むことで、新たなスタイルを使用できるようになります。

詳細はAdobe Capture CC公式ページからご覧ください。
なお、現在Animate がサポートしているブラシの種類は、ベクターブラシのみとのことです。

 

編集の幅が広い

ベクターアートブラシは、描いたあとにも編集することができます。
スタイルを変更することはもちろん、線の太さや色も編集できます。

blog15

ベクターデータとして描かれているため、アウトラインを編集して自由自在に変形させることも可能です。
シェイプトゥイーンを使用して変形を加えれば、簡易にアニメーションをつけることもできます。

blog17

ちょっとした汗マークなど書く際にも利用できますし、追加するブラシスタイルによっては雲や草、あらゆるものが一筆で描けます。
ベクターデータなためどれだけ拡大しても画質は落ちず、制作の幅が非常に広がりました。

 

新機能②:カンバスの機能強化

Animateになってから、カンバスにも新機能が2つ増えました。

カンバス自体の回転が可能

描画する際やアニメーションをつける際にカンバスを回転し、思い通りの角度で制作が出来ます。
鉛筆やブラシツールとの相性もよく、アニメーションも色々な角度で再生ができるので、より制作がしやすくなりました。
ステージの回転は、SHIFT+スペースバー、またはツールの「回転ツール」で使用できます。
blog06

ステージの回転をデフォルトに戻したい場合は、画面上の「ステージの中央を表示」を選択します。

blog25

 

カンバスとコンテンツのサイズがリンク

カンバスサイズを変更する際、「コンテンツを拡大/縮小」にチェックを入れると、同じ比率のままコンテンツもリサイズされます。 あとから画面全体のサイズを変更するときなどにとても便利です。

blog18

 

新機能③:テキスト機能の強化

HTML5canvasドキュメントを使用した際に限りますが、Animateで制作したページは、どの端末から見てもフォントの崩れがなくなりました。

種類豊富なWebフォントが使用可能に

AnimateとTypekitが結合され、数千種類のWebフォントを使用できるようになりました。

blog21

HTML5canvasドキュメントで制作を行う際に限るのですが、特殊なフォントをどの端末から見ても同じように表示させることができます。
テキストを「ダイナミックテキスト」に変更し、フォント横にある地球のアイコンを押すと、Webフォントを使用できます。

blog20

これにより、Webページや広告制作などにも幅が広がりました。

 

静止テキストは全てアウトラインになって書き出される

HTML5canvasドキュメントでの制作の際、使用された静止テキストはすべて、パブリッシュ時にアウトラインに変換されます。
つまり、テキストではなく画像として書き出されるため、たとえWebフォントを使用していなかったとしても、どの端末から見ても同じように表示させることができるのです。

 

新機能④:オニオンスキンカラー

オニオンスキンカラーを選択すると、選択した範囲のアニメーションが表示されます。
前のフレームは青、現在のフレームは赤、後のフレームは緑と、それぞれが色別に表示されるようになっており、現在選択しているフレームから遠いほど色が薄くなります。
スキンカラー表示をしたままアニメーションを編集できるので、前後のアニメーションを見ながら修正を行うことが可能です。

blog23

 

 新機能⑤:描画オブジェクトのバウンディングボックス強化

今まで描画オブジェクトでは、オブジェクトを選択すると矩形のバウンディングボックスが表示されていました。
今回のアップデートにより、シェイプにぴったり合ったアウトラインとしてインジケーターが表示されるようになりました。

object-bouding1
(Adobe Animate CC 2015.1 の新機能の概要 より)

これにより、描画オブジェクトの中に入らずにシェイプを編集できるようになりました。

 

まとめ

いかがでしたでしょうか。

今回は、Adobe Animate CCにおいて、デザイン制作の際などに便利な機能をご紹介しました。

Animateを触ってみた感想としましては、Flashが別物になった…というわけではなく、Flashが強化されたという印象を受けました。
元々、素材制作からアニメーションの制作、書き出しまでFlash内で完結させることは可能でしたが、Animateにアップデートされたことで更にその幅が広がったように感じます。

今回は何点か抜粋してご紹介しましたが、アップデートで増えた・強化された機能は他にもたくさんあります。
様々な用途がありそうなので、機会があればぜひ一度試してみてはいかがでしょうか。

▼3DCG・アニメーション制作のご相談はフーモアまでご連絡ください。

contact_button

Comments

comments

  • このエントリーをはてなブックマークに追加
  • LINEで送る

イラストレーター大募集中!!

漫画家大募集中!!

イラスト制作依頼ならフーモア!

プロの漫画制作ならフーモア!

関連記事

12

Live2D風モーション、Spineの限界に挑め part2 ~spineに追加された機能~

フーモアDCCツール研究開発局局長の遠藤です。 私が執筆しましたSpineの書籍が工学社さんより発

記事を読む

eye

テクスチャ制作に役立つ!「PlaidMaker」でチェック柄を作ろう!

こんにちは、CG開発室のUSMRです。 テクスチャやイラストを描く際にチェック柄を一から描こう

記事を読む

whomorPicturesBlog_140523C

spineでキャラに命を吹き込め!アニメーションで個性を出す!その2「2Dにアニメーションを付ける」

フーモアピクチャーズ技術部の遠藤です。引き続きEsotericSoftwareのSpineについて解

記事を読む

MAblog_005

モーションコミックは流行るのか?「MotionArtist」さわってみた

CG開発室の遠藤です。   前回に引き続き SmithMicroSoftwar

記事を読む

whomorPicturesBlog_140901C

Live2D風モーション、Spineの限界に挑め~spineをLive2D風にしてみました~

ご無沙汰しておりました。フーモアDCCツール研究開発局局長の遠藤です。 7月11日からブログ記事が

記事を読む

icon_part2

【第2回】Adobe Fuse CC(プレビュー版)を活用しよう!【Mixamo・Maya編】

こんにちは、CG開発室の三木です。 前回から引き続きAdobe Fuse CC(プレビュー版)

記事を読む

icon_part3

【第3回】Adobe Fuse CC(プレビュー版)を活用しよう!【Photoshop編】

こんにちは、CG開発室の三木です。 今回の記事でAdoebe Fuse CC(プレビュー版)の

記事を読む

0

最近注目されているUnityアセット、「Puppet2D」を検証してみました

フーモアCG開発室の遠藤です。 先日「Puppet2D」の書籍を執筆しました。これで3冊目の書籍と

記事を読む

icatch

「Spine」の使い方をおさらいしよう!IKボーン入れ方講座

こんにちは、フーモアCG開発室のCGアニメーターです。 フーモアでは2Dアニメーションツール「Sp

記事を読む

icatch2

Spineアニメーションを、JavaScriptでWEB上に表示してみよう!

こんにちは、CG開発室アニメーターの吉村です。 SpineがWEB上で動いたら、もしかしてゲー

記事を読む


  • 「おもしろいMANGAを創る」をビジョンに今までになかった新しい価値観を創造する会社。イラストや漫画制作のディレクター集団。
    お問合せはこちらからお気軽にどうぞ
  • ブログ最新記事とクリエイティブに役立つ情報を日々配信しています。

PAGE TOP ↑