JavaScript を使用してコンポジションにインタラクティブ機能を追加できます。組み込みのコードエディターやスニペットライブラリを使用して、各エレメントのアクションを定義できます。アクションは、単一イベントを処理するために追加できる関数です。

インタラクティブ機能を追加する

インタラクティブ機能を追加する
Paul Trani

アクションを定義する

  1. タイムラインで、エレメント名またはシンボル名の左側にあるアクションを開くボタンをクリックします。

    アクションを開くボタン

    エレメントパネルで、エレメント名またはシンボル名の左側にある、アクションを開くボタンをクリックすることもできます。

  2. アクションのトリガーとなるイベントを選択します。

    アクションエディターが表示され、右側にコードエディターとコードスニペットのリストが表示されます。

  3. イベントのコードを記述します。

    独自のコードを記述することも、コードスニペットを使用して一般的な関数を追加することもできます。詳しくは、Edge Animate API ガイドを参照してください。

コードエディターを使用する

コードエディターによって、プロジェクトの JavaScript コード全体を把握できます。また、アクションファイルの生のコードを表示することもできます。

  1. ウィンドウ/コードを選択します。

    Ctrl + E キー(Windows)または Command + E キー(Macintosh)を押して開くこともできます。

  2. 左側のサイドバーで、ステージの左にあるプラス(+)アイコンをクリックしてイベントまたはエレメントを選択します。

  3. JavaScript ファイル全体を編集するには、パネルの右上にある「フルコード」ボタンをクリックします。

    「フルコード」ボタン

タイムラインにラベルを追加する

タイムラインにラベルを挿入し、挿入したラベルを関数パラメーターでタイムリファレンスとして使用できます。タイムコード値を想定しているすべての再生関数のパラメーターとして、ラベル名を使用できます。ラベルを使用することによって、タイムライン上のポイントまで再生またはシークするようなアクションを作成できます。

ラベルを追加するには:

  1. 目的の位置まで再生ヘッドを移動します。

  2. タイムラインの右上隅にあるラベルを挿入ボタンをクリックします。

    ラベルを挿入ボタン

    注意:

    Ctrl + L キー(Windows)または Command + L キー(Macintosh)を押して追加することもできます。

  3. ラベルの名前を指定します。

  4. コードエディターでエレメントのアクションを定義するときには、タイムコード値を想定している再生関数のパラメーターとしてラベル名を使用します。

    例えば、sym.play(1000) の代わりに、sym.play('mylabel') を使用できます。

タイムラインにトリガーを追加する

タイムラインにトリガーを配置して、ある時点で JavaScript コードを実行できます。

トリガーを追加するには:

  1. 目的の位置まで再生ヘッドを移動します。

  2. タイムラインの右上隅にあるトリガーを挿入ボタンをクリックします。

    トリガーを挿入ボタン

    注意:

    Ctrl + T キー(Windows)または Command + T キー(Macintosh)を押して挿入することもできます。

    コードパネルが表示されます。

  3. トリガーで実行するアクションを定義します。詳しくは、Edge Animate API ガイドを参照してください。

タイムラインでトリガーアイコンをダブルクリックすれば、いつでもトリガーのコードを変更できます。

トリガーアイコン

さらに詳しく

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー