Adobe Animateは何ができる?簡単にアニメーション制作をしよう!

  

グラフィックデザインや写真の編集など、さまざまなクリエイティブのツールが揃っているAdobe(アドビ)のソフト。そのなかで、アニメーションの作成に特化したAdobe Animateというソフトをご存知でしょうか。

  

イラストや図形などを、好きなように動かしたい方に必見のAdobe Animate。このソフトがあれば、簡単なゲームを作ることもできるんです。今回は、Adobe Animateの特徴や使い方、他のソフトとの違いを解説していきます。

  

Adobe Animate CCとは?

  

アニメーションなどの動画制作ができるAdobe Animate CC。まずは、特徴や価格帯などを詳しく解説していきます。「Adobe Animateがどんなソフトかよく分からない!」という方は、まずはここからお読みください。

  

①Adobe Animate CCでできること

 

Adobe Animate CCでできることは以下の通り。

  

  

アニメーションの作成

こちらが、Adobe公式が配信しているAdobe AnimateのPR動画です。

  

引用:Adobe Animate 2020/Youtube

  

これらのアニメーションは、すべてAdobe Animate CCで作られています。このように、イラストを動かしたアニメーションを作ることができます。

  

これらのアニメーションの作成には、複雑な操作は必要ありません。Adobe Animateを使うと、初心者でも簡単に、直感的に操作することができるんです。

  

イラストの作成

アニメーションを作るには、動かす対象のイラストが必要です。Adobe Animate CCには描画機能があるため、ひとつのソフトでイラストの作成からアニメーションの作成まで完成します。

  

操作方法は、同じAdobeソフトのIllustratorに似ているため、Illustratorに慣れている方は特に操作がしやすと言えます。

  

スクリプトの実装

Adobe Animate CCの機能を使うと、JavaScriptやActionScripのようなスクリプトを実装することが可能です。

  

そもそもスクリプトとはこういったものです。

プログラムの種類の一つで、人間が読み書きしやすいプログラミング言語で書かれたプログラム(ソースコード)を即座に実行できるようなものをスクリプトという。そのようなプログラムを記述するための言語を「スクリプト言語」(scripting language)という。

スクリプト/IT用語辞典 e-Words

  

基本的に、スクリプトの実装には知識が必要です。しかし、Adobe Animate CCにはプリセットがあるため、簡単なコーティングなら初心者でも作ることができます。アニメーションにスクリプトを実装することで、わざわざWEBページにコーディングをしなくてもアニメーションを動かせるようになります。

  

②Adobe Animate CCの魅力

  

Adobe Animate CCの大きな魅力は以下の3つ。

  

  

他のAdobeソフトと連携できる

Adobe Animate CCは、IllustratorやPhotoshopなどの他のAdobe CCソフトと連携することができます。例えば、Illustratorで作ったイラストや、Photoshopで作った画像をアニメーションとして動かすことも可能です。それぞれの素材を合成することもできます。

  

引用:Adobe Animate 2020/Youtube

  

この動画では、Illustratorで作成したイラストとPhotoshopで作成した背景がうまく組み合わされいますね。これらのソフトと連携させることで、アニメーションの幅が大きく広がります。

  

Adobeには、複数のソフトをお得に使うための「コンプリートプラン」があります。コンプリートプランとは、Adobe Animate CCはもちろんIllustratorや Photoshop、Lightroomといった20種類以上のAdobeソフトが使い放題になるサービスのことです。

  

  

Adobe Animate CCを、Illustratorや Photoshopと連携させて使いたい方は、コンプリートプランを選ぶのがおすすめです。月6,248円でたくさんのAdobeソフトを自由に使えるので、3つ以上のソフトを使う予定の方は、このプランの方がお得に使えますよ。

  

■プラットフォームの幅が広い

Adobe Animate CCは、以下のフォーマットを利用することができます。

  

  

WEBはもちろん、たくさんプラットフォームに対応しているため、さまざまな種類のアニメーションの作成が叶います。

  

初心者でも簡単に操作できる

Adobe Animate CCの直感的な操作が可能なため、初心者でも比較的簡単に作業することができます。特に、すでにある素材を使ったGIFアニメーションであれば、使い方を少し勉強しただけですぐに作ることができますよ。

  

Adobeの他のソフトのIllustratorや Photoshopとの共通の操作や単語もあるので、他のAdobe製品の経験者ならより簡単に操作できます。

  

スクリプトの実装も、プリセットがあるのでコーディングの知識がない方でも使うことが可能です。Adobe Animate CCは、「経験がないけどアニメーションを作ってみたい」方におすすめのソフトだと言えます。

  

③Adobe Animate CCの価格

  

Adobe Animate CCは、サブスクリプションタイプのソフトのため、毎月費用が発生します。一回購入して終わる買い切りタイプではないので、注意しましょう。

  

Adobe Animate CCの価格帯は以下のふたつ。

  

  

Adobe Animate CCだけを使う場合は、毎月2,728円の費用が必要です。一方、Adobe Animate CCを含めてIllustratorや PhotoshopなどAdobeのソフト20種類以上を使う場合は、毎月6,248円となります。

  

一見すると、Adobe Animate CC単体の方がトータル費用が安いのでお得に思いがちですよね。しかし、前述の通りAdobe Animate CCは他のAdobeソフトとの連携が可能です。IllustratorやPhotoshopで作った素材を使うこともできるので、他のソフトの利用の予定がある場合は、毎月6,248円のコンプリートプランがおすすめです。

  

④Adobe Animate CCの事例

  

以下の海外のサイトに、Adobe Animate CCで作ったアニメーションの事例が11個並んでいます。

http://www.tourdeanimate.com

  

英語のサイトですが、それぞれの事例の「Play」をクリックするとアニメーションを動かすことができます。

  

  

テキストの一部を動かしたり、一部の色を変えられたり、さまざまな種類のアニメーションを見ることが可能です。Adobe Animate CCを使ったアニメーションの完成図が想像できない方は、ぜひこのサイトを参考にしてみてくださいね。

  

ちなみにこのサイトは会員登録をすると、実際の作り方のチュートリアルやファイルをダウンロードすることができるんです。作ってみたいアニメーションがあれば、試しに作ってみるのもおすすめです。

  

Adobe AnimateとFlashの違いとは?

  

写真や図形を動かしてアニメーションにする手段として、Flashというものもあります。

  

同じアニメーションであるAdobe AnimateとFlash、一体どういった違いがあるのでしょうか。ここからは、Adobe AnimateとFlashの違いを5つに分けて解説していきます。

  

AnimateとFlashの違い①|Animateは進化版ソフト

  

  

実は、Adobe Animate CCはFlashが進化したソフトなんです。Flashはもともと、Adobe Flash Professionalという名でAdobeから出されていました。

  

Adobeは「Webなど幅広いプラットフォームに対応するアニメーション制作ソフトにするために進化した」と明言しています。そのため、Adobe Animate CCはFlashよりもできることが多いソフトだと言えます。

  

AnimateとFlashの違い②|書き出しの幅が広い

  

上記の通り、Flashに比べるとAdobe Animate CCは書き出せるプラットフォームの種類が多いことが特徴です。

  

Flashは、SWFファイルで書き出すのがメインです。しかしFlashは情報セキュリティ上などで欠陥が多かったり、タッチパネルに対応してなかったりするため、普及率が低下しています。Adobe Animate CCは、代わりに主流となったHTML5ファイルを書き出せるように進化しました。

  

その他にも、Adobe Animate CCは以下の種類の書き出しが可能です。

  

  

AnimateとFlashの違い③|iOSに対応している

  

  

Flashの普及率が低下した大きな原因は、iPhoneをはじめとするiOSに対応していなかったことです。一方、Adobe Animate CCで作成できるHTML5やCanvasは、iOSでも利用することができます。

  

point

今は世界的にiOSが普及しているため、iOSで利用できるか出来ないかは、大きく重要なポイントです。

  

Adobe Animateの使い方

ここからは、Adobe Animate CCの使い方について簡単に解説していきます。

Adobe Animateの使い方①|新規作成

まずはAdobe Animate CCを起動して、新規アニメーションを作成します。プラットフォームは「HTML5 Canvas」を選択すると、幅広い使い方が可能です。

Adobe Animateの使い方②|ツールを組み込む

アニメーションを新規作成すると、画面上に空白の「ステージ」が現れます。Adobe Animate CCでは、このステージ上にアニメーションを作成することを覚えておきましょう。

新規作成の段階では、アニメーションを動かすツールは必要最低限しかありません。そのため、「ドラッグ&ドロップツール」を表示させてツールボックスに組み込む必要があります。

Adobe Animateの使い方③|素材を読み込む

動かしたい素材をAdobe Animate CCに読み込ませます。イラストはAdobe Animate CCでも作ることができますが、初めての方はIllustratorや Photoshopなどで作成するか、すでにある素材を使うのがおすすめです。

caution

素材をAdobe Animate CCに読み込ませる際は、動かしたいパーツごとにレイヤーを分ける必要があります。例えば車のタイヤを動かしたい場合は、車のボディとタイヤのそれぞれの素材を用意しなければいけません。

Adobe Animateの使い方④|素材を編集する

Adobe Animate CCに読み込ませると、ライブラリ上に素材が表示されます。素材の編集は「タイムライン」で行います。

Adobe Animateの使い方⑤|アニメーションの書き出し

Adobe Animate CCは、アニメーションをさまざまな形式に書き出すことができます。書き出すと、画像やHTMLファイル、JavaScriptファイルに分類されます。

詳細な設定をすると、他の要素のファイルの書き出しも可能です。Adobe Animate CCには細かい設定ができる機能がたくさんあるので、ぜひ実際に触って確かめてみてくださいね。

Adobe Animateを使ってみよう!

アニメーションの作成に特化したAdobeソフトのAdobe Animate CC。GIFアニメなど簡単なものから、本格的なものまでさまざまなアニメーションを作ることができます。初心者の方にも簡単な使い方なのが魅力のひとつ。

他のAdobeソフトとの連携も可能なので、他のソフトで素材の作成も可能です。アニメーションづくりを始めてみたい方は、ぜひAdobe Animate CCを使ってみてくださいね。