作成したアニメーションを既存のHTMLに組み込む

１．コンテンツをパブリッシュする

まず、An側の準備として、ステージ上でオブジェクトが何もないところをクリック、［プロパティ］パネルにステージ（Stage）のプロパティを表示します。

プロパティーには［コンポジションクラス］欄に「EDGE-xxxxxx」というコンポジションクラス名が表示されています。この値はAnによって、他のAnコンテンツと区別するために付けられたIDのようなものです。コンポジションクラス名は、任意の名前に変更できるので、ここのコンテンツ内容に合わせた名前に変更します。

コンポジションクラス名を確認／変更したら、［ファイル］-［パブリッシュ］を行います。すると、Edge Animateファイルと同じフォルダー内に「publish」フォルダーが作成され、その中の「web」フォルダー内にAnのファイルが生成されます。

通常Anでは、1つの表示用HTMLファイルと、3つのJavaScriptファイルが書き出されます。ソースコードのポイントは2つです。

1) <!–Adobe Edge Runtime–>～<!–Adobe Edge Runtime End–>で囲まれた部分（以降、「コンテンツ準備部分」）

2) id属性に「Stage」、class属性にコンポジションクラス名が設定されたdiv要素（以降、「表示用div要素」）

Anコンテンツを既存のHTML内に表示するには、この2つの部分をコピーして利用します。

既存のHTMLファイルと同じ階層に、パブリッシュされたファイルのうち、3つのJavaScriptファイルをコピーします。また、画像を使用している場合は、「images」フォルダーもコピーします。

に、HTMLファイルのhead要素内にコンテンツ準備部分を加え、Edge Animateコンテンツを表示したい部分に表示用div要素を加えれば完成です。

コンテンツ準備部分については、style要素部分は省いても構いません。これは、「読み込みが完了するまでEdge Animateコンテンツを非表示にしておく」ための記述です。

なお、複数のEdge Animateコンテンツを同じHTMLファイル内に表示したい場合には、Edge Animateコンテンツにそれぞれ異なるコンポジションクラス名を付けた上で、パブリッシュします。

例えば、2つのEdge Animateコンテンツに対して、それぞれ「Edge-sample01」「EDGE-sample02」というコンポジションクラス名を付け、パブリッシュします。パブリッシュしたファイルのJavaScriptファイル（画像を使っている場合には「images」フォルダーも）を2つ分、コンテンツを表示したいHTMLファイルと同じ階層にコピーします。

HTMLファイルには、それぞれのEdge Animateコンテンツのコンテンツ準備部分と表示用div要素を追加します。この時、表示用div要素のid属性がどちらも「Stage」とならないよう、適宜変更しましょう。