Edge Animate入門 第1回：2種類のワークフロー
Adobe Edge Animateでは、タイムラインベースのインターフェイスを使って、手軽にHTMLアニメーションを作成したり、既存のHTMLコンテンツにアニメー ションを加えることができます。本記事では、Edge Animateを利用してアニメーションを作成する際の、2種類のワークフローを紹介します。
Edge Animate CC の体験版をダウンロード サンプルファイルをダウンロード
アニメーションを作成するワークフローとして、大きく2種類が用意されています。
- ゼロからアニメーションを作成する方法。
- あらかじめ作成しておいたHTMLコンテンツをEdge Animateに読み込み、配置されている要素に対してアニメーションを付けていく方法。
図1 2種類のワークフロー
ゼロから作成する場合のワークフロー
ゼロから作成する場合の典型的なワークフローは、次のようになります。
- Edge Animateを起動し、［ファイル］メニュー→［新規作成］から新規ファイルを作成する。
- アニメーションさせたい画像ファイル、シェイプ、テキストなどを配置する。
- タイムラインでアニメーションを付ける。
- ［ファイル］メニュー→［パブリッシュ］でコンテンツとして書き出す。
アニメーションさせる要素（エレメント）は、矩形・角丸・楕円といった単純なシェイプやテキストであればEdge Animate上で直接作成できるほか、画像ファイルを読み込んで配置することもできます。そして、アニメーションの編集は、Flash Professionalなどと同じようにタイムライン形式で行います。
アニメーションが完成したら、パブリッシュします。すると、 「publish」フォルダーが作成され、その中にアニメーションの表示に必要な一連のファイルがまとめて書き出されます。完成したコンテンツを表示する 際には、このファイルを使用します。また、作成したコンテンツは、他のHTMLコンテンツの任意の場所に埋め込んで表示することもできます。
図2 ゼロから作成する場合のワークフロー
既存のHTMLファイルを読み込んで作成する場合のワークフロー
既存のHTMLファイルを読み込んで作成する場合の典型的なワークフローは、次のようになります。
- HTMLやCSSを使ってコンテンツを作成する。
- Edge Animateを起動し、［ファイル］メニュー→［開く］から1のHTMLファイルを選択する。
- タイムラインでアニメーションを付ける。
- ［ファイル］メニュー→［パブリッシュ］でコンテンツとして書き出す。
Edge Animateには、HTMLファイル内の内容（DOM要素）がそのまま読み込まれます。また、CSSを使用している場合には、そのスタイルも反映されます。つまり、ブラウザーで表示したような状態となります。
あとは要素を選択し、タイムラインでアニメーションを付けていきます。このとき、Edge Animate上で新たな要素を追加することも可能です。
アニメーションが完成したら、パブリッシュします。パブリッシュされたHTMLファイル内には、Edge Animateで作成したアニメーションを動作させるためのタグが付け加えられ、関連ファイルを読み込んで動作するようになっています。
な お、既存のHTMLファイルを読み込む場合には、注意点があります。バージョン2.0.0の段階では、CSSや画像を使用している場合、そのファイルが HTMLファイルよりも上の階層に配置されていると、うまく読み込めません。これらのファイルが読み込めない場合には、HTMLファイルと同階層か、下階 層に配置する構成に変更してから読み込んでみましょう。
図3 既存のHTMLファイルを読み込む場合のワークフロー
このように、Edge Animateには、アニメーションを作成する2種類のワークフローが用意されています。