久しぶりにEdge Animateの記事です。

段々Edge Animate記事を書く方が増え勉強をしやすくはなっていますが、 まだまだ少ないので勉強中ではありますが自分が学んだ事を書いてみようと思います。

私が何度も躓いているEdge Animate再生キーについてです。
まぁ、jsが得意だと多分躓く事はないのかもしれませんが… 意外とあるわりにはネックな再生キーなわけで…
なにせ勝手に再生しちゃうっていう…ね…

今回はこの再生キーで表示…ではなくjsでを使って表示させる方法をやってみようと思います。

###例】変数1だと丸が赤、変数2だと丸が青、変数3だと丸が緑###

まず丸のシンボルを作ります。

シンボル化した際に出来る自動再生キー
まずチェックマークを外します。

（あとで再生キーをつけることも出来ます、が、今回は必要ないです。）
↓↓↓↓↓↓↓↓↓↓

上記の再生キーを埋めたままだとシンボル内の動きをタイムライン上で確認が出来ます。
（flashのシンボルはパブリッシュしないと再生されないですが、edgeではタイムラインを動かすとシンボル内の動きがstageで見れるという画期的＼(^o^)／）

maru2シンボル内に緑、青の丸を作ります。

名前をつけ止まるようstop();を入れておきます。

上の階層に戻り赤を表示させる場所とそれ以外の色を表示させる場所を作ります 今回は”aka”と”etc”に分けました。

<script type="text/javascript">
    window.AdobeEdge.bootstrapListeners.push(function(compId)
    {
        console.log(compId);
        var stage = $.Edge.getComposition(compId).getStage();
 
        // Set up parameters
        stage.effect = 1;
    });
</script>

色が変わるようにeffectの変数をhtmlの方に入れておきます。
これでまずeffectで色を変える準備ができました。 さぁjsを書いていってみましょう！

＊effectが1なら”aka” ＊effectが2以上であれば”etc” に飛ぶように指定します。 （stage.effectはhtmlに書いてある変数である）

再生キーを入れないでシンボルを再生させるの為には

{
    sym.getSymbol().play();
}

を使います。

この時注意するのはライブラリにあるシンボルではなくタイムラインにあるシンボル名です。
今回の場合maru2がシンボル名となるので

{
    sym.getSymbol("maru2").play();
}

となります。 次は”maru2”のシンボル内です。

＊effectが2なら”blue” ＊effectが3なら”green” というようにjsを書きます。

子の階層のシンボルに記述する際、気をつけなければならないのがstage.effectを読み込んでくれないという事です。

親である場合stage.effectが使えますがシンボルの中と階層が深くなっていく場合 .getParentSymbol()を入れる事でシンボルのインスタンスの親にあたる要素を返してくれます。
これを入れる事によってstage.effectが2なら”blue”、stage.effectが3なら”green”に飛んでくれるのです＼(^o^)／ヒャッフー！

これでhtmlの変数によって丸の色が変わるedgeが出来上がります。

ここでもしmaru2のシンボルのタイムラインに再生キーが入っているとstage.effect = 3;で緑を表示させたいと思っても青から表示してしまいます。

勝手にmaru2のシンボルを頭から再生するんですよおおお><

シンボルを入れないでもいいじゃないか、stageで再生キーいれて分ければいいだろ！なんて思うかもしれませんが、 簡単な動きはいいですが、より複雑な動きを作る場合どうしてもシンボルを作り階層を深くしていくと思います。

どこで再生したい、停止させたいとなったとき再生キーを入れるよりもjsで記述したほうが楽なわけです。
もちろん、再生キーを入れ開始位置を決めることも出来る。が管理がめんどくさいというのが正直なところw

まだまだjsもAdobe Edge Animateも半分も理解出来ていないで勉強中ですが、 edgeのキーに頼らずjsで制御出来るようになるのが目標です。