今まで学習した基本操作のスキルを生かして、アニメーションを作成します。まず、用意されているキャラクターのパーツをステージ上で組み合わせてシンボルに変換、キャラクターの耳だけを動かします。Edge Animate CC の新機能「レスポンシブな拡大/縮小、およびステージの中央配置」を使って、ウェブブラウザーの幅にあわせて伸縮するレスポンシブアニメーションにします。さらに、完成したアニメーションをAdobe Muse CC に組み込む方法も解説します。
第8回で作成したコンテンツを使って、音楽や効果音、ボイスなどのオーディオデータを組み込む方法を学習していきます。オーディオ組み込みは、Edge Animate CC の新機能です。オーディオのファイルは「MP3」と「OGG」の2種類必要ですが、フリーの変換ツール(「Miro Video Converter」を紹介しています)がありますので、簡単に変換できます。組み込んだオーディオの自動再生やループ、再生コマンドの使い方を実際に試しながら学んでいきます。
第14回「実習:作成したコンテンツにオーディオを組み込む」の続きです。読み込んだオーディオをスクリプトで制御します。スクリプトはコードスニペットで追加できますので記述する必要はありません。ステージに楕円を描いて、ボタンとして動作するように設定します。クリックして再生、一時停止、あるいは、クリックで再生し、もう一度クリックすると一時停止する仕組みをつくっていきます。また、オーディオプレーヤーの表示/非表示の設定も学習します。
Edge Animate CC によるアニメーション制作の応用編です。素材データの「goods_08_EA_Lesson」(すでにアニメーションが設定されています)を使って、インタラクティブな仕組みを追加していきます。最初の画面でキャラクターをクリックすると、アニメーションの画面に切り替わり、再生開始します。アニメーション画面のキャラクターをクリックすると、最初の画面に戻るというコンテンツです。さらに、プリローダーを設置する方法も学習します。
Edge Animate CC でパブリッシュしたHTMLやJavaScriptなどのファイルは、既存のウェブサイトにそのまま組み込めますが、OAMファイルを使用すれば、WordPressの記事に配置することも可能です。第13回「実習:レスポンシブアニメーションを作成する」では、Adobe Muse CC にOAMファイルを配置しましたが、WordPressの場合も専用のプラグインをインストールすれば、簡単に配置できます。ここでは、実際にアニメーション付きの記事を投稿してみます。
Open Education Platrorm - Creative Edge School