イベント マーカーとイベントラベルをタイムラインに追加する

詳細モードでは、タイムラインの上部にイベント トラックが表示されます。このイベント トラックでは、イベント マーカーとイベントラベルを使用することで、タイムライン アニメーションとイベントを関連付けることができます。イベント マーカーを使用すると、タイムラインの特定の位置でイベントをトリガーできます。イベントラベルを使用すると、イベントを設定してアニメーションを管理できます。

イベント マーカー

イベント トラック上でイベント マーカーを使用すると、タイムライン ベースのイベントを設定できます。タイムラインでアニメーション プレイヘッドがイベント マーカーに到達すると、イベントがトリガーされます。

アニメーションのプレビュー中やスクラブ中は、イベントはトリガーされません。広告やウェブページをプレビューすると、イベントをテストできます。

タイムラインにイベント マーカーを追加するには:

次のいずれかの方法を使用します。

  • イベント トラック上でイベント マーカーを追加する場所を右クリックして、ポップアップ メニューから [イベントを追加] を選択します。
  • タイムライン上でイベント マーカーを追加する場所をクリックするか、イベント マーカーを追加する場所にプレイヘッドを移動して、イベント トラックにある [イベントを追加] ボタン をクリックします。

イベント マーカーにイベントを追加するには:

次のいずれかの方法を使用します。

  • イベント マーカーをダブルクリックします。[イベント] ダイアログが開き、操作選択手順に進みます。
  • イベント マーカーを右クリックして、ポップアップ メニューから [マーカーにイベントを追加] を選択します。[イベント] ダイアログが開き、操作選択手順に進みます。
  • [イベント] パネルで、[イベントを追加] ボタン をクリックします。新しいイベント用の [イベント] ダイアログが開きます。[ターゲット] で、アニメーション要素の親要素(通常は「ページ」)を選択し、[イベント] で、イベント マーカーを選択します。

イベント マーカーのイベントを編集するには:

イベント マーカーを右クリックして、ポップアップ メニューのリストから、変更するイベントを選択します。

イベント マーカーを削除するには:

削除するイベント マーカーを右クリックして、ポップアップ メニューから [イベント マーカーを削除] を選択します。この操作を行うと、そのイベント マーカーによってトリガーされていたイベントもすべて削除されます。

単一のイベントを削除する場合は、[イベント] パネルを使用します。

イベント マーカーの名前を変更するには:

  1. 名前を変更するイベント マーカーを右クリックして、ポップアップ メニューから [イベント マーカー名を編集] を選択します。
  2. 新しい名前を入力します。
  3. Enter キーを押します。

イベント マーカーを移動するには:

イベント マーカーをタイムライン上の新しい場所にドラッグします。

イベントラベル

イベントラベルを使用すると、タイムライン上の特定の場所に名前を付けて指定することができます。たとえば、イベントを使用してプレイヘッドをタイムライン上の特定の位置に送る場合、そのキーフレームにラベルを付けておく必要があります。

イベント トラックにイベントラベルを追加するには:

次のいずれかの方法を使用します。

  • タイムライン上でラベルを追加する場所をクリックするか、ラベルを追加する場所にプレイヘッドを移動して、イベントレイヤにある [ラベルを追加] ボタン をクリックします。Google Web Designer により、汎用のラベル名が割り当てられます。
  • ラベル名を指定するには:
    1. イベント トラック上でラベルを追加する場所を右クリックして、ポップアップ メニューから [ラベルを追加] を選択します。
    2. ポップアップ ダイアログにラベルの名前を入力します。
    3. Enter キーを押します。

イベントラベルを削除するには:

削除するラベルを右クリックして、ポップアップ メニューから [ラベルを削除] を選択します。この操作を行うと、そのイベントラベルを使用するよう設定されていたイベントもすべて削除されます。

イベントラベルの名前を変更するには:

  1. 名前を変更するラベルを右クリックして、ポップアップ メニューから [ラベルを編集] を選択します。
  2. 新しい名前を入力します。
  3. Enter キーを押します。

イベントラベルを移動するには:

イベントラベルをタイムライン上の新しい場所にドラッグします。

操作

タイムラインに関する次の操作は、他のイベントによってトリガーできます。

操作 設定項目
pause
なし
play
なし
togglePlay
なし
gotoAndPlay
ラベル - アニメーションの起点を示すイベントラベル。
gotoAndPlayNTimes
  • ラベル - アニメーションの起点を示すイベントラベル。
  • 繰り返し - アニメーションがループする回数。
gotoAndPause
ラベル - アニメーションの起点を示すイベントラベル。
アニメーションを一時停止するカスタム操作(pausetogglePlaygotoAndPause)には、次の構文を使用する必要があります。

gwd.actions.timeline.pause('<elementID>');

この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。