4時間、全21回で学ぶ Adobe Edge Animate CC［基礎編］

第1回 Adobe Edge Animate CCの概要

08分41秒

Adobe Edge Animate CC は、PCやスマートデバイス（スマートフォン、タブレットなど）で動作するウェブコンテンツを作成するためのオーサリングツールです。これから、基本操作を学習していきますが、Edge Animate のヘルプページ、フォーラムページは、ブックマークしておいてください。予期せぬトラブルが発生した場合は、フォーラムで質問することが可能です。また、チュートリアルやショーケースも用意されていますので、見ておきましょう。

第2回 ワークスペースと

パネルの操作方法について理解する

12分38秒

Edge Animate CC のワークスペースとパネル（およびパネルグループ）について学習します。Edge Animate のワークスペースは、ステージとタイムライン、複数のパネルで構成されています。パネルは、自由に配置できますので、作業しやすいレイアウトに変更しておきましょう（変更したワークスペースのレイアウトは名前を付けて記録できます）。パネルをドッキングしたり、切り離す操作は、ドラッグだけですが、ルールがありますので理解してください。

第3回 ステージの機能を理解する

12分15秒

Edge Animate CC のコンテンツ制作は、ステージと呼ばれる領域に画像やテキストなどの要素を配置しながら、進めていきます。まず最初に、ステージのサイズ変更、背景色の変更、編集画面の拡大表示（ズームコントロール機能）などの基本操作を学習し、実際に、キャラクターの画像ファイルをステージに配置して、ウェブブラウザーで確認します。また、ステージのオーバーフロー（配置した画像がステージの外に置かれたときの処理）についても学びます。

第4回 Edge Animateで保存した

ファイルの内容を理解する

06分20秒

Edge Animate CC で制作したコンテンツの保存方法と、保存されたファイルの内容について学習していきます。保存すると、拡張子が「.an」のEdge Animate のデータ、HTMLやJavaScript、配置した画像ファイルなどのパブリッシュデータが書き出されます。拡張子が「.an」のファイルをダブルクリックすると、作業の続きを再開することができます。また、HTMLファイルをウェブブラウザーで開くと、作成したコンテンツが表示されます。

第5回 簡単な移動アニメーションを

指定する

08分45秒

第4回で作成したコンテンツを使って、簡単な移動アニメーションを設定します。ステージの中央にキャラクターの画像を配置して、アニメーションの開始位置と終了位置にそれぞれ「キーフレーム」を追加します。キーフレームは、アニメ制作の「原画」に相当します。2つのキーフレームの中間の動きを設定するには、「トランジション」を作成します。また、ループ再生（繰り返しアニメーションを再生させる）させる方法もここで学習しておきます。

第6回 回転のアニメーションと

イージングを追加する

08分08秒

第5回で作成したコンテンツを使って、回転アニメーションを追加します。もう1つキャラクターの画像をステージに配置して、回転のキーフレームを追加し、一回転するアニメーションを設定します。ステージ上の複数の画像の重なりを変更する方法も学習します。さらに、「イージング」という効果を適用してみます。イージングは、加速・減速をアニメーションに適用できますので、強弱のあるダイナミックな動きを表現することが可能になります。

第7回 自動キーフレーム／

自動トランジションモードを理解する

17分14秒

第6回の「簡単な移動アニメーションを指定する」では、すべてのキーフレームを手作業で追加しましたが、「自動キーフレームモード」を使用すると、名前のとおり、キーフレームの追加を自動化してくれます。キーフレーム間の動きを生成するトランジションも「自動トランジションモード」で自動化できます。この2つの自動モードは、デフォルト（Edge Animate 起動時）ではONになっています。アニメーションの基本機能なので覚えておきましょう。

第8回 ピンの使い方を理解する

08分29秒

第7回で作成したコンテンツをベースにして、「ピン」の機能を学習していきます。まず、ステージ上のキャラクターを2つ複製して、レイアウトします。続けて、「ピン」をONにして、3つのキャラクターをステージの外に移動させます。これで、ステージの外側からキャラクターがフレームインするアニメーションが出来上がります。フレームの外から「パーツが飛んできて、タイトルが完成する」といった映画のオープニングのようなアニメーションが作成できます。

第9回 テキストツールの使い方と

フォント指定について理解する

11分25秒

Edge Animate のテキストツールの使い方とフォント指定について学習していきます。Edge Animate のテキストツールは簡易的なもので、作図ソフトなどに搭載されているようなテキスト編集機能はありません。長文を表示したい場合は、エディターなどで入力したテキストをコピーすることになります。ここでは、Webフォント（Edge Web Fonts）の指定方法も学びます。最後に、第8回で作成したコンテンツにテキストを追加してアニメーションを完成させます。

第10回 クリックすると

再生する仕組みを理解する

15分49秒

第9回で作成したコンテンツを使って、テキストのアニメーションを追加します。まず、アクションパネルでスクリプトを追加して、アニメーションの最後のフレームで停止させます。新たにキャラクターをステージに配置して、ボタンにします。このキャラクターをクリックすると、停止しているアニメーションが再生するという仕組みをつくります。なお、スクリプトはコードスニペットのボタンをクリックするだけで追加できますので記述する必要はありません。

第11回 グループとシンボルについて

理解する

11分27秒

Edge Animate には「グループ化」と「シンボル変換」の機能があり、コンテンツ制作を効率化することができます。グループ化は、作図ソフトなどではお馴染みの機能で、複数の要素を1つのグループとして扱うことができます。シンボルは、同じ要素をたくさん配置して編集するときに役立ちます。例えば、夜空の星をシンボルにしておけば、1回の指定で配置したすべての星に適用することができます。ステージ上に配置された要素はインスタンスと呼びます。

第12回 モーションパスの使い方を

理解する

07分24秒

Edge Animate には「モーションパス」という便利なアニメーション機能が搭載されています。ステージ上に配置した要素を動かす場合、キーフレームを追加していきますが、曲線に沿ったスムーズな動きを設定するのはかなり面倒です。モーションパスは、ステージ上のキーフレーム間に曲線を表示し、アンカーポイントとハンドルをマウスで操作しながら、カーブをコントロールすることが可能です。また、曲線に沿って要素の向きも回転させることができます。

第13回 実習：レスポンシブアニメーションを

作成する

32分32秒

今まで学習した基本操作のスキルを生かして、アニメーションを作成します。まず、用意されているキャラクターのパーツをステージ上で組み合わせてシンボルに変換、キャラクターの耳だけを動かします。Edge Animate CC の新機能「レスポンシブな拡大/縮小、およびステージの中央配置」を使って、ウェブブラウザーの幅にあわせて伸縮するレスポンシブアニメーションにします。さらに、完成したアニメーションをAdobe Muse CC に組み込む方法も解説します。

第14回 実習：作成したコンテンツに

オーディオを組み込む

14分07秒

第8回で作成したコンテンツを使って、音楽や効果音、ボイスなどのオーディオデータを組み込む方法を学習していきます。オーディオ組み込みは、Edge Animate CC の新機能です。オーディオのファイルは「MP3」と「OGG」の2種類必要ですが、フリーの変換ツール（「Miro Video Converter」を紹介しています）がありますので、簡単に変換できます。組み込んだオーディオの自動再生やループ、再生コマンドの使い方を実際に試しながら学んでいきます。

第15回 実習：オーディオの再生／

一時停止のボタンを追加する

15分35秒

第14回「実習：作成したコンテンツにオーディオを組み込む」の続きです。読み込んだオーディオをスクリプトで制御します。スクリプトはコードスニペットで追加できますので記述する必要はありません。ステージに楕円を描いて、ボタンとして動作するように設定します。クリックして再生、一時停止、あるいは、クリックで再生し、もう一度クリックすると一時停止する仕組みをつくっていきます。また、オーディオプレーヤーの表示／非表示の設定も学習します。

第16回 実習：インタラクティブな

アニメーションを作成する

12分59秒

Edge Animate CC によるアニメーション制作の応用編です。素材データの「goods_08_EA_Lesson」（すでにアニメーションが設定されています）を使って、インタラクティブな仕組みを追加していきます。最初の画面でキャラクターをクリックすると、アニメーションの画面に切り替わり、再生開始します。アニメーション画面のキャラクターをクリックすると、最初の画面に戻るというコンテンツです。さらに、プリローダーを設置する方法も学習します。

第18回 補足：Flash の

HTML5 アニメーションとは？

08分15秒

Adobe Flash Professional CC は、ウェブアニメーションやインタラクティブコンテンツを制作するためのオーサリングツールです。Edge AnimateはHTMLコンテンツなので、iOSやAndroidでも動作しますが、FlashはFlash Playerがインストールされていないと動作しないため、未サポートのスマートフォンやタブレットでは利用できませんでした。ところが、2013年11月のアップデートでHTML5 Canvas コンテンツが作成可能になり、状況が変わりました。

第19回 補足：電子書籍に

HTMLアニメーションを組み込む

07分59秒

電子出版物の事実上の標準フォーマットとして支持されている「EPUB 3」（標準化団体IDPFが策定）は、JavaScriptの使用が可能になっています。Edge Animate でパブリッシュしたHTMLコンテンツも組み込むことができます。アニメーションやインタラクティブな仕掛けを追加した児童書（絵本など）や学習教材などを作成できますので、サンプルを使って解説します。なお、電子書籍を読むための読書システムは、Readium（Chrome上で利用）が対応しています。

第20回 実習：モーショングラフィックを

作成しよう

08分22秒

実習課題です。一般公開されているEdge Animateの書籍用チュートリアルですが、素材データを用意しましたので、挑戦してみてください。音声は（講師の声ではなく）高度な音声合成技術を使っています。長方形ツールで描いた図形とテキストツールで入力した記号だけで、高度なモーショングラフィックを作成します。一つひとつのステップはシンプルな操作ですが、組み合わせが複雑です。ステップ数が多いので、ゆっくり時間をかけて進めてください。

第21回 実習：

CSSフィルタを使ってみよう

05分08秒

第20回「モーショングラフィックとCSSフィルタ」と同様に、一般公開されているEdge Animateの書籍用チュートリアルです。レスポンシブレイアウトの機能（レスポンシブな拡大/縮小、およびステージの中央配置）が搭載される前のバージョンを使用していますので、複雑な指定で要素を中央揃えにしています。参考にしてください。また、CSSフィルター機能を使って、ステージに配置した画像をぼかしています。奥行き感が表現されていることを確認してください。