Edge アニメーションの HTML への埋め込み方法

• Edge のランタイム
  • edge_includes/edge.0.1.4.min.js
• Edge が使用する jQuery ライブラリ
  • edge_includes/jquery-1.6.2.min.js
  • edge_includes/jquery.easing.1.3.js
• 制作したコンポジションの情報 （xxx はコンポジションの名前）
  • xxx_edge.js
  • xxx_edgeActions.js

プレビュー 3 までは、これらのファイルを静的に HTML ファイルに埋め込んでいましたが、プレビュー 4 からは動的に読み込むよう変更されました。そのため、プレビュー 4 では以下のファイルも作られます。

• edge_includes/yepnope.js
• xxx_edgePreload.js

xxx_edgePreload.js は yepnope.js を使って最初の 5 つのファイルをロードします。そのため、コンポジションを組み込む HTML ファイルには、以下の 1 行だけ追加すれば必要なリソースが読み込まれます。

<script type="text/javascript" charset="utf-8" 
  src="xxx_edgePreload.js"></script>

Edge でこの HTML ファイルを開く場合は、以下のコメント行も忘れないように追加します。

<!--Adobe Edge Runtime-->
<script type="text/javascript" charset="utf-8" 
  src="xxx_edgePreload.js"></script>
<!--Adobe Edge Runtime End-->

Edge が自動生成する HTML ファイルには、上のコメントが既に記述されているはずです。

あとは DIV タグを使って、コンポジションを HTML 文書内に配置するだけです。

<div id="stage" class="EDGE-101010101"></div>

このコンポジションと関連付けられた要素はステージと呼ばれます。

上のコード内で class に指定している値は、Edge がコンポジションごとに割り当てたものです。xxx_edgePreload.js ファイルの最後に書かれています。

})( "EDGE-101010101");

複数のコンポジションを表示する場合は、それぞれのコンポジションをロードして、

<script type="text/javascript" charset="utf-8" 
  src="xxx_edgePreload.js"></script>
<script type="text/javascript" charset="utf-8" 
  src="yyy_edgePreload.js"></script>

それぞれ別の要素 （ステージ） に関連付けます。

<div id="stageX" class="EDGE-101010101"></div>
<div id="stageY" class="EDGE-202020202"></div>

まだまだ、公開されるごとに仕様が変更される Edge ですが、HTML5 アニメーションはちょっと敷居が高くて ... という方は、いまのうちに是非いちどお試しください。