Money on the Bench – MLB Salaries Lost to the Disabled List - Interactive Graphic - NYTimes.com
Finding the Quiet City - NYTimes.com
再生時間：08:41
Adobe Edge Animate CC は、PCやスマートデバイス（スマートフォン、タブレットなど）で動作するウェブコンテンツを作成するためのオーサリングツールです。これから、基本操作を学習していきますが、Edge Animate のヘルプページ、フォーラムページは、ブックマークしておいてください。予期せぬトラブルが発生した場合は、フォーラムで質問することが可能です。また、チュートリアルやショーケースも用意されていますので、見ておきましょう。
再生時間：12:38
Edge Animate CC のワークスペースとパネル（およびパネルグループ）について学習します。Edge Animate のワークスペースは、ステージとタイムライン、複数のパネルで構成されています。パネルは、自由に配置できますので、作業しやすいレイアウトに変更しておきましょう（変更したワークスペースのレイアウトは名前を付けて記録できます）。パネルをドッキングしたり、切り離す操作は、ドラッグだけですが、ルールがありますので理解してください。
再生時間：12:15
Edge Animate CC のコンテンツ制作は、ステージと呼ばれる領域に画像やテキストなどの要素を配置しながら、進めていきます。まず最初に、ステージのサイズ変更、背景色の変更、編集画面の拡大表示（ズームコントロール機能）などの基本操作を学習し、実際に、キャラクターの画像ファイルをステージに配置して、ウェブブラウザーで確認します。また、ステージのオーバーフロー（配置した画像がステージの外に置かれたときの処理）についても学びます。
再生時間：06:20
Edge Animate CC で制作したコンテンツの保存方法と、保存されたファイルの内容について学習していきます。保存すると、拡張子が「.an」のEdge Animate のデータ、HTMLやJavaScript、配置した画像ファイルなどのパブリッシュデータが書き出されます。拡張子が「.an」のファイルをダブルクリックすると、作業の続きを再開することができます。また、HTMLファイルをウェブブラウザーで開くと、作成したコンテンツが表示されます。
再生時間：08:45
Vol.04 で作成したコンテンツを使って、簡単な移動アニメーションを設定します。ステージの中央にキャラクターの画像を配置して、アニメーションの開始位置と終了位置にそれぞれ「キーフレーム」を追加します。キーフレームは、アニメ制作の「原画」に相当します。2つのキーフレームの中間の動きを設定するには、「トランジション」を作成します。また、ループ再生（繰り返しアニメーションを再生させる）させる方法もここで学習しておきます。
再生時間：08:08
Vol.05 で作成したコンテンツを使って、回転アニメーションを追加します。もう1つキャラクターの画像をステージに配置して、回転のキーフレームを追加し、一回転するアニメーションを設定します。ステージ上の複数の画像の重なりを変更する方法も学習します。さらに、「イージング」という効果を適用してみます。イージングは、加速・減速をアニメーションに適用できますので、強弱のあるダイナミックな動きを表現することが可能になります。
再生時間：17:14
Vol.05 の「簡単な移動アニメーションを指定する」では、すべてのキーフレームを手作業で追加しましたが、「自動キーフレームモード」を使用すると、名前のとおり、キーフレームの追加を自動化してくれます。キーフレーム間の動きを生成するトランジションも「自動トランジションモード」で自動化できます。この2つの自動モードは、デフォルト（Edge Animate 起動時）ではONになっています。アニメーションの基本機能なので覚えておきましょう。
再生時間：08:29
Vol.07 で作成したコンテンツをベースにして、「ピン」の機能を学習していきます。まず、ステージ上のキャラクターを2つ複製して、レイアウトします。続けて、「ピン」をONにして、3つのキャラクターをステージの外に移動させます。これで、ステージの外側からキャラクターがフレームインするアニメーションが出来上がります。フレームの外から「パーツが飛んできて、タイトルが完成する」といった映画のオープニングのようなアニメーションが作成できます。
再生時間：11:25
Edge Animate のテキストツールの使い方とフォント指定について学習していきます。Edge Animate のテキストツールは簡易的なもので、作図ソフトなどに搭載されているようなテキスト編集機能はありません。長文を表示したい場合は、エディターなどで入力したテキストをコピーすることになります。ここでは、Webフォント（Edge Web Fonts）の指定方法も学びます。最後に、Vol.08 で作成したコンテンツにテキストを追加してアニメーションを完成させます。
再生時間：15:49
Vol.09 で作成したコンテンツを使って、テキストのアニメーションを追加します。まず、アクションパネルでスクリプトを追加して、アニメーションの最後のフレームで停止させます。新たにキャラクターをステージに配置して、ボタンにします。このキャラクターをクリックすると、停止しているアニメーションが再生するという仕組みをつくります。なお、スクリプトはコードスニペットのボタンをクリックするだけで追加できますので記述する必要はありません。
再生時間：11:27
Edge Animate には「グループ化」と「シンボル変換」の機能があり、コンテンツ制作を効率化することができます。グループ化は、作図ソフトなどではお馴染みの機能で、複数の要素を1つのグループとして扱うことができます。シンボルは、同じ要素をたくさん配置して編集するときに役立ちます。例えば、夜空の星をシンボルにしておけば、1回の指定で配置したすべての星に適用することができます。ステージ上に配置された要素はインスタンスと呼びます。
再生時間：07:24
Edge Animate には「モーションパス」という便利なアニメーション機能が搭載されています。ステージ上に配置した要素を動かす場合、キーフレームを追加していきますが、曲線に沿ったスムーズな動きを設定するのはかなり面倒です。モーションパスは、ステージ上のキーフレーム間に曲線を表示し、アンカーポイントとハンドルをマウスで操作しながら、カーブをコントロールすることが可能です。また、曲線に沿って要素の向きも回転させることができます。
再生時間：32:32
今まで学習した基本操作のスキルを生かして、アニメーションを作成します。まず、用意されているキャラクターのパーツをステージ上で組み合わせてシンボルに変換、キャラクターの耳だけを動かします。Edge Animate CC の新機能「レスポンシブな拡大/縮小、およびステージの中央配置」を使って、ウェブブラウザーの幅にあわせて伸縮するレスポンシブアニメーションにします。さらに、完成したアニメーションをAdobe Muse CC に組み込む方法も解説します。
再生時間：14:07
Vol.08 で作成したコンテンツを使って、音楽や効果音、ボイスなどのオーディオデータを組み込む方法を学習していきます。オーディオ組み込みは、Edge Animate CC の新機能です。オーディオのファイルは「MP3」と「OGG」の2種類必要ですが、フリーの変換ツール（「Miro Video Converter」を紹介しています）がありますので、簡単に変換できます。組み込んだオーディオの自動再生やループ、再生コマンドの使い方を実際に試しながら学んでいきます。
再生時間：15:35
Vol.14「実習：作成したコンテンツにオーディオを組み込む」の続きです。読み込んだオーディオをスクリプトで制御します。スクリプトはコードスニペットで追加できますので記述する必要はありません。ステージに楕円を描いて、ボタンとして動作するように設定します。クリックして再生、一時停止、あるいは、クリックで再生し、もう一度クリックすると一時停止する仕組みをつくっていきます。また、オーディオプレーヤーの表示／非表示の設定も学習します。
再生時間：12:59
Edge Animate CC によるアニメーション制作の応用編です。素材データの「goods_08_EA_Lesson」（すでにアニメーションが設定されています）を使って、インタラクティブな仕組みを追加していきます。最初の画面でキャラクターをクリックすると、アニメーションの画面に切り替わり、再生開始します。アニメーション画面のキャラクターをクリックすると、最初の画面に戻るというコンテンツです。さらに、プリローダーを設置する方法も学習します。
再生時間：10:05
Edge Animate CC でパブリッシュしたHTMLやJavaScriptなどのファイルは、既存のウェブサイトにそのまま組み込めますが、OAMファイルを使用すれば、WordPressの記事に配置することも可能です。Vol.13「実習：レスポンシブアニメーションを作成する」では、Adobe Muse CC にOAMファイルを配置しましたが、WordPressの場合も専用のプラグインをインストールすれば、簡単に配置できます。ここでは、実際にアニメーション付きの記事を投稿してみます。
再生時間：08:15
Adobe Flash Professional CC は、ウェブアニメーションやインタラクティブコンテンツを制作するためのオーサリングツールです。Edge AnimateはHTMLコンテンツなので、iOSやAndroidでも動作しますが、FlashはFlash Playerがインストールされていないと動作しないため、未サポートのスマートフォンやタブレットでは利用できませんでした。ところが、2013年11月のアップデートでHTML5 Canvas コンテンツが作成可能になり、状況が変わりました。
再生時間：07:59
電子出版物の事実上の標準フォーマットとして支持されている「EPUB 3」（標準化団体IDPFが策定）は、JavaScriptの使用が可能になっています。Edge Animate でパブリッシュしたHTMLコンテンツも組み込むことができます。アニメーションやインタラクティブな仕掛けを追加した児童書（絵本など）や学習教材などを作成できますので、サンプルを使って解説します。なお、電子書籍を読むための読書システムは、Readium（Chrome上で利用）が対応しています。
再生時間：08:22
実習課題です。一般公開されているEdge Animateの書籍用チュートリアルですが、素材データを用意しましたので、挑戦してみてください。音声は（講師の声ではなく）高度な音声合成技術を使っています。長方形ツールで描いた図形とテキストツールで入力した記号だけで、高度なモーショングラフィックを作成します。一つひとつのステップはシンプルな操作ですが、組み合わせが複雑です。ステップ数が多いので、ゆっくり時間をかけて進めてください。
再生時間：05:08
Vol.20「モーショングラフィックとCSSフィルタ」と同様に、一般公開されているEdge Animateの書籍用チュートリアルです。レスポンシブレイアウトの機能（レスポンシブな拡大/縮小、およびステージの中央配置）が搭載される前のバージョンを使用していますので、複雑な指定で要素を中央揃えにしています。参考にしてください。また、CSSフィルター機能を使って、ステージに配置した画像をぼかしています。奥行き感が表現されていることを確認してください。
再生時間：12分38秒
高画質ビデオになっています。低画質の場合は再生バーの「HD」をクリックしてください
ダウンロード版は、ビデオをダウンロードして視聴するための商品です。324円をプラスすると、DVDで受け取ることも可能です。
※販売終了しました
オンデマンド版は、IDとパスワードで専用サイトにログインして（ウェブブラウザー上で）視聴するための商品です。スマートフォンやタブレットでも視聴できます。
※販売終了しました
オンデマンド版は、IDとパスワードで専用サイトにログインして（ウェブブラウザー上で）視聴するための商品です。スマートフォンやタブレットでも視聴できます。
※販売終了しました
