Edge Animateプチリファレンス第4回：インタラクションを追加しよう

Edge Animate CC（以下、Edge Animate）には、コンテンツにインタラクティブな動きを追加したり、タイムラインの再生をコントロールするための仕組みが用意されています。本記事では、それらの実装方法について紹介します。Edge Animateの基本操作については、Edge Animate入門をご覧ください。

Edge Animate CC の体験版をダウンロードサンプルファイルをダウンロード

エレメントやシンボルへのアクションの追加

Edge Animateでは、コンテンツにインタラクティブな動きを手軽に追加することができます。例として、下図のように、タイムラインの終端にリプレイ用のボタン（シンボル「Button」）を配置し、このButtonをクリックするとコンテンツをリプレイする処理を追加してみましょう（サンプル：sample.an）。

エレメント／シンボルをクリックするなど、何らかの「イベント」が発生した際に、任意の処理（アクション）を追加する手順は以下の通りです。

タイムライン上のエレメント／シンボルのレイヤーの左端にある「｛｝（アクションを開く）」ボタンをクリックします。
［アクション］パネルが開くと同時に、イベントの一覧が表示されます。今回は、ボタンをクリックした際の処理を作成するので［click］を選択します。
［アクション］パネル内にclickイベントのひな形が自動で入力されます。ここにクリック時の処理を追加します。
パネル右端の［コードスニペッド］には、よく使う処理のボタンが並んでいます。このボタンをクリックすると、該当するコードを自動で入力してくれます。例えば、［再生の開始位置］をクリックすると、「sym.play(1000);」と入力されます。これは「1,000ミリ秒の位置から再生する」という内容のコードです。今回は、リプレイ処理を作成するので、これを「sym.play(0);」と0ミリ秒から再生するように修正すれば完了です。
プレビューすると、Buttonをクリックするとリプレイすることが確認できます。

追加したアクションを削除したい場合は、再び［｛｝］ボタンをクリックして［アクション］パネルを開き、削除したいイベントが表示されている状態で、左上の［-］ボタンをクリックします。また、他のイベントを追加したい場合には、同じく［アクション］パネルを開き、左上の［+］ボタンをクリックして同様に追加します。

タイムラインへのアクション・トリガーの追加

アクションの追加

アクションは、タイムラインにも追加することができます。例として、コンテンツ全体をループ再生するようなアクションを追加してみましょう。タイムラインにアクションを追加する手順は以下の通りです（サンプル：sample2.an）。

タイムライン左上の［｛｝］ボタンをクリックします。すると、［アクション］パネルが開くと同時に、イベントの一覧が表示されます。
今回はループ再生を行いたいので、「再生完了」時に発生するイベント「complete」を選択します。
completeイベントのひな形が入力されるので、［コードスニペッド］から［再生］をクリックし、「sym.play();」とコードを入力すれば完成です。

トリガーの追加

タイムラインのイベントの種類は「update（更新）」「play（再生）」「complete（再生完了）」「stop（停止）」の4種類しかありませんが、「トリガー」と呼ばれる、「任意の位置まで再生したらアクションを実行する」仕組みも用意されています。

例えば、500ミリ秒まで再生した段階で、いったん再生を停止したい場合には、以下の手順で設定します（サンプル：sample3.an）。

タイムラインの再生ヘッドを500ミリ秒の位置に合わせ、［トリガーを挿入］ボタンをクリックします。
［アクション］パネルが開き、その位置で実行したいアクションを入力することができます。今回は一時停止したいので、［停止］ボタンをクリックして、「sym.stop();」とコードを追加すれば完了です。

トリガーが挿入された位置には［｛♦｝］マーカーが表示されます。このマーカーは、ドラッグして位置の移動が可能です。また、トリガーを消去したい場合位には、マーカーを選択して［Delete］キーを押します。

［コード］ウィンドウでアクション／コードを一括管理

［コード］ウィンドウでは、個々のエレメント／シンボルやタイムラインごとに設定したアクションやトリガーのすべてを確認／編集できます。［コード］ウィンドウを表示するには、［ウィンドウ］メニュー＞［コード］を選択します。

［コード］ウィンドウの左側には、処理を追加できる対象（メインのタイムラインである「Stage」や、作成したシンボル、プリローダーなど）が一覧表示されます。また、既にアクションが記述されている場合には、そのアクションの一覧が表示されます。

中央には、コードを確認／編集するためのウィンドウ、右側には［コードスニペッド］が表示されます。また、［コードスニペッド］は、右上の［{+}（コードスニペッドの表示の切り替え）］ボタンで表示／非表示を切り替えることができます。

［コード］ウィンドウでは、左端の一覧の右端にある［+］ボタンから、アクションを追加したい対象やイベントを選択し、コードを確認／編集できます。

アクションを一括管理したい場合には、こちらの方が便利ですね。

今回は簡単なアクションの追加方法を紹介しましたが、より詳しいコードによるコンテンツの制御に興味がある方は、リファレンス「Adobe Edge Animate CC JavaScript API 3.0」などを参考にしてください。

また、Edge Animateは、JavaScriptを利用して作成されており、さらに、jQueryなどのライブラリを利用して作成されています。そのため、アクション内にこれらの仕組みを利用したJavaScriptのコードを記述することで、色々な処理を追加することも可能です。興味のある方は、チャンレンジしてみましょう。