Adobe Edge のアクションとイベントとトリガー

Edge 内で新規アクションを定義するには、ステージ上のオブジェクトを右クリックして Open Actions for "xxx" を選択します。次に、表示された一覧から、目的のイベントを選択すると、コードパネルにテンプレートが生成されます。

ステージやタイムラインへのアクション追加は、コードパネル内左側のリストから、マウスオーバーで表示される "+" マークをクリックします。このリストにはアクション追加済みのシンボルなども表示され、他のアクションの追加や削除が行えます。

イベント以外にも、タイムライン上の特定の位置に "トリガー" を定義して、アクションを呼び出せます。トリガーの位置は、タイムラインの開始からの秒数で指定します。単位はミリ秒です。

Edge 内でトリガーを定義する場合は、タイプラインパネルの Actions の行にある Insert Trigger アイコンをクリックします。もしくは ctrl-t キーを押します。0 秒の位置に新しいトリガーアイコンが追加されるので、それを適当な位置にドラッグして使います。追加したトリガーは、コードパネル内のリストにも表示されます。

（このあたりの使い勝手は、今後まだまだ変わると思われます。新しいバージョンが公開されたら更新情報を確認してください）

さて、Edge から呼び出されたアクションには、イベントオブジェクト e が渡されます。トリガー以外のアクション （つまりイベントから呼び出されるアクション） には、呼び出し元のシンボル sym も渡されます。

ということで、プレビュー 4 の時点では、イベントから呼び出されるアクションは以下のような構造です。

function(sym, e)
{
// ここに必要な処理を記述する
}  

グラフィックやテキストなど、シンボル以外の要素にアクションを定義した場合、ここで渡される sym は、イベント発生元の要素の親にあたるシンボルです。アクション内では、基本的に this と sym は同じオブジェクトを指すはずですが、sym を使った方が安全だと思われます。

e は jQuery イベントオブジェクトです。設定されるフィールドはイベントの種類によって変わります。

一方、トリガーから呼び出されるアクションは、以下のような構造です。関数名に defaultTriggerBinding が使われます。引数は e だけです。

function defaultTriggerBinding(e) {
// ここに必要な処理を記述する
});

最後に、現時点でサポートされるイベントの一覧です。

• DOM イベント
  • ページレベル
    • "scroll"
    • "keydown"
    • "keyup"
  • コンポジションレベル
    • "compositionReady"
      コンポジションが再生可能になった後で再生される前
  • 要素レベル
    • "click"
    • "dblclick"
    • "mouseover"
    • "mousedown"
    • "mousemove"
    • "mouseup"
    • "mouseout"
• タッチイベント
  • "touchstart"
  • "touchmove"
  • "touchend"
• タイムラインイベント
  • "update"
  • "play"
  • "complete"
  • "stop"