Adobe Edge Animate CC のアニメを任意のタイミングで再生する
どうもくろにゃんこたんです。
最近は仕事でフロントエンジニア的なこともやることがあって、edge animateを使ってもOKという案件が増えてきました。
単純にバナーやちょっとしたFlashの代替にはシンプルで使いやすいのでいいのですが、たまに演出上HTML上のこのボタンをクリックしたらこんな動きをつけたい！
順番に複数のアニメを再生したい！ということが出てきます。
その場合はアニメーションの自動再生をOFFにした状態でイベントに合わせて、アニメ再生！ということが必須になってくるわけなのですが、必死で調べても出てこなかったり、
出てきた場合でもEdge AnimateのAPI仕様が変わっていて動かなかったり。。。
苦戦したので覚書としてメモしておきます。（この仕様は2016年3月12日の仕様です。今後変更になる可能性があります。）
結論から言うと
var comp = AdobeEdge.getComposition("EDGE-○○○○○");
var stage = comp.getStage();
stage.play();
これで好きなタイミングで再生が可能となりました。
あとはイベント発火のタイミングやsetTimeOutなどにこのコードを埋め込むだけでOKです。
EDGE-○○○○の「○○○○」部分には作成したアニメのIDを入れてください。
やっていることはアニメのコンポジションを取得→ステージオブジェクトを取得→再生
という非常にシンプルな流れです。
仕様が変わる以前は
Edge.getComposition(“EDGE-○○○○○");
でコンポジションが取得できたようなのですが、現在はAdobeEdgeとしないとちゃんと取得できなかったです。（ここでどハマりしていました）
また、ちょっと気を付けなければならない点はページを読み込んですぐ（Onloadなど）に上記コードで再生しようとしても、Edgeアニメのロードが完了しきっていないことがありますので、
「stage.play();」のあたりでエラーで停止します。
要するにまだステージが読み込み切れていないので、ステージオブジェクトが「Undefined」になってしまいます。
その時はローディング処理でごまかすか、あきらめて自動再生をONにしたほうが安定するかなと思います。
自分でJSをがりがりいじってアニメーションを実装するのもいいですが、簡単にレスポンシブに対応したアニメーションを作ることができるので端末の画面幅などの計算処理を入れなくて良い分かなり楽できるのかなと思います。
是非お試しください(・ω・)ノ