Добавление маркеров и ярлыков событий на временную шкалу

Дорожка событий, расположенная в верхней части временной шкалы в расширенном режиме, используется для привязки событий к временной шкале с помощью маркеров и ярлыков. Маркеры событий позволяют инициировать события в определенных точках временной шкалы, а ярлыки – настраивать события, которые управляют анимацией.

Маркеры событий

Для инициации событий временной шкалы используются специальные маркеры на дорожке событий. Событие запускается, когда ползунок перемещается на соответствующий маркер.

Добавление маркеров на дорожку событий

Выполните одно из следующих действий:

  • Нажмите правой кнопкой мыши на дорожке событий в том месте, куда нужно добавить маркер, и во всплывающем меню выберите пункт Добавить событие.
  • Нажмите на то место временной шкалы, куда нужно добавить маркер, или перетащите туда ползунок, а затем на дорожке событий нажмите кнопку Добавить событие .

Добавление события к маркеру

Выполните одно из следующих действий:

  • Дважды нажмите на маркер события. Откроется раздел "Действия" диалогового окна "События".
  • Нажмите правой кнопкой мыши на маркер и во всплывающем меню выберите Добавить событие к маркеру… Откроется раздел "Действия" диалогового окна "События".
  • На панели событий нажмите кнопку Добавить событие  – откроется диалоговое окно создания события. В разделе "Цель" укажите родителя анимированного элемента (чаще всего это страница), а затем в разделе "Событие" выберите соответствующий маркер.

Изменение события маркера

Нажмите правой кнопкой мыши на маркер и во всплывающем меню выберите событие, которое нужно изменить.

Удаление маркера событий

Нажмите правой кнопкой мыши на маркер, который нужно удалить, и во всплывающем меню выберите пункт Удалить маркер события. При этом также удаляются все события, запускаемые эти маркером.

Отдельное событие можно удалить на панели События.

Переименование маркера событий

  1. Нажмите правой кнопкой мыши на маркер, который нужно переименовать, и во всплывающем меню выберите пункт Изменить имя маркера события…
  2. Укажите новое имя.
  3. Нажмите клавишу ВВОД.

Перемещение маркера событий

Перетащите маркер событий в нужное положение на временной шкале.

Ярлыки событий

Ярлыки событий – это именованные точки на временной шкале. Если событие должно переместить ползунок в определенное положение, этому ключевому кадру необходимо присвоить ярлык.

Добавление ярлыков на дорожку событий

Выполните одно из следующих действий:

  • Нажмите на точку временной шкалы, куда нужно добавить ярлык, или перетащите туда ползунок. Затем на дорожке событий нажмите кнопку Добавить ярлык . Google Web Designer присвоит ярлыку стандартное имя.
  • Чтобы указать имя ярлыка, выполните следующие действия:
    1. Нажмите правой кнопкой мыши на то место дорожки событий, куда нужно добавить ярлык, и во всплывающем меню выберите Добавить ярлык…
    2. Во всплывающем окне укажите имя ярлыка.
    3. Нажмите клавишу ВВОД.

Удаление ярлыка событий

Нажмите правой кнопкой мыши на ярлык, который нужно удалить, и во всплывающем меню выберите Удалить ярлык. При этом также удаляются все события, настроенные для этого ярлыка.

Переименование ярлыка событий

  1. Нажмите правой кнопкой мыши на ярлык, который нужно переименовать, и во всплывающем меню выберите Изменить ярлык…
  2. Укажите новое имя.
  3. Нажмите клавишу ВВОД.

Перемещение ярлыка событий

Перетащите ярлык событий в нужное положение на временной шкале.

Действия

Другими событиями могут вызываться следующие действия на временной шкале.

Действие Параметры настройки
pause
Нет
play
Нет
togglePlay
Нет
gotoAndPlay
Ярлык: ярлык событий, после которого должна запускаться анимация.
gotoAndPlayNTimes
  • Ярлык: ярлык событий, после которого должна запускаться анимация.
  • Повтор: количество повторов анимации.
gotoAndPause
Ярлык: ярлык событий, после которого должна запускаться анимация.
Дополнительные действия на временной шкале, которые приостанавливают анимацию (pause, togglePlay и gotoAndPause), должны иметь следующий синтаксис:

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

Эта информация оказалась полезной?
Как можно улучшить эту статью?