Adobe Edge のシンボルとその定義

シンボルには、振る舞い （アクション） を定義して、特定のイベントと関連付けることもできます。これにより、ユーザーの操作に応じて変化するアニメーションも実現できます。

Edge コンポジション内に定義されたシンボルの情報は、以下のように 2 つのファイルに分けて書かれます。 （xxx にはコンポジションの名前を当てはめる）

• xxx_edge.js
  グラフィックスやタイムラインの情報を保持します。JSON 形式なので、自分でオブジェクトを記述したり、自動生成されたコードを追加することもできます。Edge でコンポジションを編集中にこのファイルを変更しても、コンポジションが保存されるタイミングで上書きされてしまいます。その点は注意しましょう
• xxx_edgeActions.js
  変数や関数など、シンボルのアクションに関する情報を保持します。定義のスコープをコンポジション内に制限するため、ファイル内の全ての定義は 1 つの無名関数内に記述されます。 このファイルも Edge で編集中は上書きされます。

xxx_edgeActions.js 内のコードは、Edge の GUI の操作やコードエディタに記述した内容から生成されます。あるいは、直接ファイルを編集してコーディングすることもできます。いずれの場合でも、コンポジション内部からの参照用に記述することが求められます。これは、他の箇所で定義されたコードとの競合を避けるためです。

例えば、

変数を記述する場合は、必ず var を付けます。

var myVar = "この変数はコンポジション内だけで有効";

下のように記述すると、グローバル変数になってしまいます。

myVar = "この変数はページ内の他の要素と競合する可能性あり"; 

関数を記述する場合は、function を使って宣言します。（Edge のエディタでは、関数ロジックだけ記述すると、function 宣言は書き出し時に自動的に追加されるので、明示的に記述する必要はありません）

function handleClick() {
  alert('この関数はコンポジション内だけで有効');
}

下は悪い例です。

window.handleClick=function() {
  alert('この関数はページ内の他の要素と競合する可能性あり');
}; 

さて．．．

上で書いたように、xxx_edgeActions.js 内の全てのアクションは 1 つの関数内に記述されます。下はそのイメージです。

(function($, Edge, compId){
// ここにアクションが記述される
// シンボルごとにの定義も記述する
})(jQuery, AdobeEdge, "EDGE-101010101");

シンボル固有のアクションは、シンボルごとに無名関数を上の関数内に定義して、その中に記述します。下は、Edge のステージの定義の例です。

//Edge のシンボル 'stage'
(function(symbolName) {
// 変数を宣言
var myVar = "hello world";
})("stage");

このように、シンボル単位のスコープも実現しています。