Adobe Edge Animateを触ってみよう！

タイムラインを使ってインタラクションアニメを制作

インタラクションをつける

　アニメーションができたので、次に「しかけ」を作っていきます。

　Edge Animateは、JavaScriptを使ってインタラクションをつけることができます。

　インタラクションは、タイムラインにつける「トリガーアクション」と、エレメントにつける「エレメントアクション」の2種類があります。

　タイムライン上につける「トリガーアクション」は、タイムライン上の指定した時間で行うインタラクションです。

　エレメント上につける「エレメントアクション」は、ユーザーの操作（「クリックした」「マウスオーバーした」など）で反応するインタラクションです。

　Flashの「フレームアクション」「ボタンアクション」に似ていますね。

タイムラインにインタラクションをつける

　いまのままでは、ボタンを押さなくてもアニメーションが動いてしまっているので、最初に停止させるJavaScriptを記述します。

1）タイムラインを、JavaScriptを入れる位置に移動します

　一番最初で停止させるので、再生ヘッドを一番左に移動します。

2）トリガーアクションのパネルを開きます

　タイムラインの「トリガーを挿入ボタン」を押すか、またはメニュー「タイムライン＞トリガーを挿入」を選択します。すると、トリガーアクションのパネルが開きます。

3）停止するJavaScriptを記述します

　直接記述してもよいですが、右に並んでいるスニペットの中から「停止」をクリックしましょう。

　「sym.stop();」と自動的に記述してくれます。

エレメントにインタラクションをつける

　次に、ボタンをクリックしたら再生するJavaScriptを記述します。

1）エレメントアクションのパネルを開きます

　シンボル化したボタンを選択して、プロパティの「アクションを開く」ボタンをクリックします（または、エレメントを右クリックして「アクションを開く」を選択します）。イベントリストが出るので「click」を選択します（エレメントをクリックしたときに行うJavaScriptの記述を行います）。

2）再生するJavaScriptを記述します

　直接記述してもよいですが、右に並んでいるスニペットの中から「再生」をクリックしましょう。

　「sym.stop();」と自動的に記述してくれます。

3）テストします

　インタラクション付きの動作はタイムラインの再生では確認できないので、ブラウザでテストします。メニュー「ファイル＞ブラウザでプレビュー」を選択します。

　「明日の天気は？」ボタンを押すと「いい天気でしょう」という文字が降ってきます。