Edge Animate 基本ワークフロー講座

Dreamweaverを使ったEdgeAnimateアニメーションをサイト埋め込み(パブリッシュ機能)

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Dreamweaverを使って、サイトのページの一部分として、Edge Animateで作ったアニメーションを設置してみよう!Edge Animateのパブリッシュ機能を利用すると、とても簡単に作成できます。
講師:
09:22

字幕

このレッスンではEdgeAnimateのパブリッシュ機能とDream weaverを利用してEdge Animateで制作したコンテンツをウェブページの中に埋め込む方法を解説いたします。まずはダウンロードしてきたファイルの中にあるこの「new_project.an」こちらをダブルクリックしてEdge Animateで開いておいてください。そして、この画面がそのファイルを開いたものとなります。このファイルを使いながら解説を進めていきます。Edge Animateでは制作したアニメーションなどのコンテンツをアニメイトデプロイメントパッケージという形式でパブリッシュすることによってコンテンツ全体を一つのファイルにパッケージングしまるでフラッシュコンテンツのようにウェブページに組み込むことができます。今回はその手順をご紹介します。それではやっていきましょう。ここにEdge Animateで制作したアニメーションがありますね。まずは、この制作したアニメーションをDream weaverで扱えるようにするためにパブリッシュ設定から確認していきましょう。パブリッシュ設定はアプリケーションメニューの「ファイル」>「パブリッシュ設定」をえらびます。 するとこのような画面が出てきますね。今回、Dream weaverで扱えるような形式としてファブリッシュするにはこちらの「Animateデプロイメントパッケージ」というものを選択します。そして、上にあるWebはチェックを外しておきましょう。さて、この「Animateデプロイメントパッケージ」ですがこのように、選択すると左側に設定項目が出てきます。上から順番に、「ターゲットディレクトリ」これはパブリッシュしたファイルの格納先の設定ですね。今回は特に変更する必要はありません。次に、こちらの「パブリッシュ名」これはパブリッシュしたファイルにつける名前を設定することができます。これも今回特に変更する必要はありません。次に、こちらの「ポスターイメージ」この「ポスターイメージ」ですがEdge Animateで制作したアニメーションなどのコンテンツの閲覧に対応していない古いブラウザに対して本来のコンテンツの代わりとなるものを見せるための設定です。こちらもすでに設定済みのため今回は変更しません。次に、こちらの「RuntimeファイルをAdobe CDNでホスト」このオプションですがこのオプションにチェックを入れるとEdge Animateで制作したコンテンツアニメーションなどの再生に必要なファイルがCDNから読み込まれるようになります。 こちらも今回は特に変更する必要はありませんのでこの状態でいきます。それでは、こちらの「パブリッシュ」ボタンを押してみたいと思います。すると、画面が一瞬点滅してパブリッシュが終わりました。それでは、パブリッシュされたファイルを見てみましょう。パブリッシュされたファイルはEdge Animateのプロジェクトファイルの中にあるこちらのpublishというフォルダが新たに生成されていますのでこちらをダブルクリックして中に入ってみます。するとAnimate_packageというファイルができていますのでさらにこの中に入ってみるとこのようにnew_project.oemというファイルが新たに生成されています。このファイルが今回制作したアニメーションを一つのパッケージングまとめてDream weaverで利用できるような形になったファイルです。それでは、こちらのファイルをさっそくDream weaverを使ってウェブページの中に埋め込んでみたいと思います。では、Dream weaverを開きます。dream weaverが開きました。さっそく新規のHTMLファイルを作っていきます。「新規制作」>「HTML」を選択そうすると、このように新規のドキュメントが生成されますのでこのbodyタグの中に先ほどパブリッシュしたoemファイルを組み込んでいきたいと思います。 Dream weaverでoemファイルを取り込むにはこちらのアプリケーションメニューの「挿入」をクリックします。そしてこちらの「メディア」から「EdgeAnimateコンポジション」を選択します。そうするとこのようにまず、新規作成したHTMLファイルを保存してくれといったアラートが出てきますのでここは素直に保存しておきます。こうすると保存のダイアログが出てきますのでこちらに適当にファイルの名前を付けて保存する場所を選択して「保存」ボタンを押します。保存が完了すると次は「EdgeAnimateパッケージを選択」という画面が出てきます。ここで、先ほどEdgeAnimateからパブリッシュしたoemファイルを選択します。先ほどパブリッシュされたこちらのanimate_packageの中のこのnew_prpject.oemですね。こちらを選択した状態で「開く」を押します。すると、このようにオブジェクトタグが出力されました。これでEdgeAnimateのoemファイルの組み込みは完了です。念のため、分かりやすくするためにこちらにPタグを入れて「これは、EdgeAnimateで」「制作されたコンテンツです」と入れておきましょう。 この状態で保存します。「ファイル」>「保存」を選びますね。こうするとファイルが保存されましたのでさっそく、ブラウザでプレビューしてみましょう。「ファイル」>「ブラウザでプレビュー」そして、ここではChromeを選んでおきましょうか。すると、このようにHTMLファイルの中で先ほどパブリッシュしたEdge Animateのoemファイルが組み込まれていることが分かります。このように、組み込まれたファイルはアニメーションも再生することができます。こちらの「スタート」ボタンを押してみましょう。このように、アニメーションが動作してかつ、Edge Animate上でオーディオの再生が設定されていた場合はこのようにオーディオも鳴らすことができます。一度閉じます。それでは、この状態でブラウザでプレビューしてみましょう。ブラウザでプレビューするには「ファイル」>「ブラウザでプレビュー」そしてブラウザを選択してください。そうすると、このように今制作したHTMLファイルの中に先ほどEdge Animateでパブリッシュしたoemファイルが組み込まれていることが分かります。ではこの状態で一度、こちらの「スタート」ボタンを押してみましょう。 このように埋め込まれたコンテンツに対してもアニメーションが作動しそして、Edge Animate上で音声ファイルが組み込まれていた場合はこのように音声も鳴らすことができます。それではブラウザを閉じます。以上で、レッスンは終了です。今回は、Edge Animateで制作したアニメーションをアニメイトデプロイメントパッケージとしてパブリッシュしたoemファイルをDream weaverを使ってウェブページの中に組み込む方法を解説いたしました。ちなみに、今回パブリッシュして生成されたoemファイルですがほかのInDsignといったAdobe性のツールでも利用することが可能ですので是非、そちらも試してみてください。

Edge Animate 基本ワークフロー講座

このコースではEdge Animateでアニメーションを制作していくさいの基本的なワークフローを実際に作りながら学習していきます。新規プロジェクトの作成からタイムラインアニメーションの制作、シンボルの使い方やオーディオの利用、各種デバイスに対応させる方法などについて解説します。

2時間54分 (24 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年06月30日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。