Edge Animate入門 第1回:2種類のワークフロー

by Adobe Comms

Posted on 07-04-2013

Adobe Edge Animateでは、タイムラインベースのインターフェイスを使って、手軽にHTMLアニメーションを作成したり、既存のHTMLコンテンツにアニメー ションを加えることができます。本記事では、Edge Animateを利用してアニメーションを作成する際の、2種類のワークフローを紹介します。

Edge Animate CC の体験版をダウンロード サンプルファイルをダウンロード

アニメーションを作成するワークフローとして、大きく2種類が用意されています。

 図1 2種類のワークフロー

ゼロから作成する場合のワークフロー

ゼロから作成する場合の典型的なワークフローは、次のようになります。

  1. Edge Animateを起動し、[ファイル]メニュー→[新規作成]から新規ファイルを作成する。
  2. アニメーションさせたい画像ファイル、シェイプ、テキストなどを配置する。
  3. タイムラインでアニメーションを付ける。
  4. [ファイル]メニュー→[パブリッシュ]でコンテンツとして書き出す。

アニメーションさせる要素(エレメント)は、矩形・角丸・楕円といった単純なシェイプやテキストであればEdge Animate上で直接作成できるほか、画像ファイルを読み込んで配置することもできます。そして、アニメーションの編集は、Flash Professionalなどと同じようにタイムライン形式で行います。

アニメーションが完成したら、パブリッシュします。すると、 「publish」フォルダーが作成され、その中にアニメーションの表示に必要な一連のファイルがまとめて書き出されます。完成したコンテンツを表示する 際には、このファイルを使用します。また、作成したコンテンツは、他のHTMLコンテンツの任意の場所に埋め込んで表示することもできます。

 図2 ゼロから作成する場合のワークフロー

既存のHTMLファイルを読み込んで作成する場合のワークフロー

既存のHTMLファイルを読み込んで作成する場合の典型的なワークフローは、次のようになります。

  1. HTMLやCSSを使ってコンテンツを作成する。
  2. Edge Animateを起動し、[ファイル]メニュー→[開く]から1のHTMLファイルを選択する。
  3. タイムラインでアニメーションを付ける。
  4. [ファイル]メニュー→[パブリッシュ]でコンテンツとして書き出す。

Edge Animateには、HTMLファイル内の内容(DOM要素)がそのまま読み込まれます。また、CSSを使用している場合には、そのスタイルも反映されます。つまり、ブラウザーで表示したような状態となります。

あとは要素を選択し、タイムラインでアニメーションを付けていきます。このとき、Edge Animate上で新たな要素を追加することも可能です。

アニメーションが完成したら、パブリッシュします。パブリッシュされたHTMLファイル内には、Edge Animateで作成したアニメーションを動作させるためのタグが付け加えられ、関連ファイルを読み込んで動作するようになっています。

な お、既存のHTMLファイルを読み込む場合には、注意点があります。バージョン2.0.0の段階では、CSSや画像を使用している場合、そのファイルが HTMLファイルよりも上の階層に配置されていると、うまく読み込めません。これらのファイルが読み込めない場合には、HTMLファイルと同階層か、下階 層に配置する構成に変更してから読み込んでみましょう。

 図3 既存のHTMLファイルを読み込む場合のワークフロー

このように、Edge Animateには、アニメーションを作成する2種類のワークフローが用意されています。

Topics: クリエイティブ

Products: