アクションエディター

アクションポップアップウィンドウが再設計され、デザイナーの使い勝手がさらに向上しました。改良されたアクションエディターでは、コードを記述する必要が減り、インタラクティビティの追加が容易になりました。より親しみやすくなったことで、デザイナーは時間や手間を節約しながら、正確なアニメーションを制作できます。オブジェクトを追加し、JavaScript アクションを構成して、アニメーションにイベントベースのエレメントを作成できます。

新しいアクションエディターを使用すると、ターゲットにアクションを割り当てるときの様々な手順を画面上で確認しながら進めることができます。アクションエディターでは、JavaScript イベントベースのアクションの追加や、ターゲットの選択を同じウィンドウで行えます。

新しいコードエディターでは、たった 2 ステップでエレメントにアクションを追加できるようになりました。

  1. アクションを選択 - アクションの名前が分かる場合は、検索ボックスを使用してアクションを検索できます。分からない場合は、カテゴリーを選択してそこに含まれるアクションを表示し、必要なアクションをクリックできます。
  2. ターゲットを選択 - ターゲットは、ステージの下にグループ化されています。
    1. 「ステージ」をクリックして、ターゲットエレメントを表示します。
    2. ターゲットエレメントをダブルクリックします。

注意:コンポジションにシンボルが含まれていると、「ステージ」をクリックしたときにシンボル用のサブカテゴリーが表示されることがあります。シンボルについて詳しくは、「シンボルを使用してネストされたアニメーションを作成する」を参照してください。

アクションは、次のカテゴリー別にまとめられています。

  • ページレベル
  • コンポジションレベル
  • クリック
  • マウス
  • タッチ
  • スワイプ
  • タイムライン 
  • シンボル

 

 

エレメントにアクションを追加する方法について詳しくは、次の例をご覧ください。

  1. 楕円形エレメントにテキストエレメント「Hello」を表示させるとします。

  2. テキストを変更するには、タイムラインのテキストエレメントの隣の {} をクリックします。「クリック」を選択します。

    • アクションを選択:「テキスト」を選択します。「テキストを変更」は、隣接する列の対応するサブアクションです。
    • ターゲットを選択:「ステージ」を選択します。ターゲット(隣接する列のテキストエレメント)をダブルクリックして選択します。

  3. 対応する JavaScript コードがコードエディターに表示されます。コード内の「New Text」フィールドを「Hello World」に変更します。

  4. コードポップアップウィンドウを閉じます。Ctrl+Enter キーを押して変更を確認します。「Hello World」というテキストが表示されます。

アクションエディターには、すばやく簡単にリッチアニメーションを制作するのに役立つ次の拡張機能も含まれています。

  • オーディオを追加:アニメーションにオーディオを追加できます。詳しくは、アニメーションへのオーディオの追加を参照してください。
  • ビデオを追加:アニメーションに動画を追加できます。詳しくは、アニメーションへのビデオの追加を参照してください。
  • DPS 記事にハイパーリンクを追加:コンポジションのエレメントと Adobe DPS 記事との間にハイパーリンクを追加できます。詳しくは、Adobe DPS 記事に対するハイパーリンクエレメントを参照してください。
  • コードスニペットを追加:頻繁に再利用するコードがある場合、コードをスニペットとして保存できます。スニペットは 1 クリックで挿入でき、必要に応じて修正できます。

コードスニペット

アクションエディターで、「マイスニペット」の横の「+」をクリックし、次のいずれかのオプションをクリックします。

  • 新規作成  

クリックしてコードを入力し、スニペットとして保存します。このオプションをクリックすると、コードウィンドウが表示されます。コードを入力し、「保存」をクリックして、スニペットの名前を入力します。

  • 選択範囲を新規スニペットとして追加

クリックしてコードの選択範囲をスニペットとして保存します。アクションエディターで、スニペットの名前を入力します(MySnippet_1 など)。このコードスニペットを選択して、個々のエレメントにアクションを追加できます。

 

コードスニペットの挿入

  1. アクションエディターのコードウィンドウで、コードスニペットを挿入する位置をクリックします。
  2. 「マイスニペット」をクリックします。
  3. リストから目的のスニペットを選択します(図に示された MySnippet_1 など)。コードウィンドウの挿入ポイントに、保存されたスニペットが挿入されます。

アドビのロゴ

アカウントにログイン