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

PART4 実習

第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」(すでにアニメーションが設定されています)を使って、インタラクティブな仕組みを追加していきます。最初の画面でキャラクターをクリックすると、アニメーションの画面に切り替わり、再生開始します。アニメーション画面のキャラクターをクリックすると、最初の画面に戻るというコンテンツです。さらに、プリローダーを設置する方法も学習します。

第17回 実習:WordPressの記事に

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

10分05秒

Edge Animate CC でパブリッシュしたHTMLやJavaScriptなどのファイルは、既存のウェブサイトにそのまま組み込めますが、OAMファイルを使用すれば、WordPressの記事に配置することも可能です。第13回「実習:レスポンシブアニメーションを作成する」では、Adobe Muse CC にOAMファイルを配置しましたが、WordPressの場合も専用のプラグインをインストールすれば、簡単に配置できます。ここでは、実際にアニメーション付きの記事を投稿してみます。

学習する

トップページに戻る

Open Education Platrorm - Creative Edge School

The Future of Design Digital Publishing Team

株式会社ズオン 東京都中野区2-30-9 ツバセス中野坂上 333

ebookcast@gmail.com

© 2014 The Future of Design Digital Publishing Team