События в Google Web Designer + зацикливание

Привет, друзья! На связи Евгений Тридчиков, и в этом видео мы рассмотрим работу с событиями в Google Web Designer. В частности постараемся ответить на два вопроса. Первый задает пользователь с никнеймом Gor Lyu:

“Евгений, спасибо за толковые уроки. Перехожу с флэша на этот программный продукт. Очень прошу помочь в следующем вопросе. Как остановить воспроизведение на очередном ключевом кадре временной шкалы. И как потом продолжить это воспроизведение кнопкой. Во флэше это было элементарно.”

Второй вопрос от Евгения Юртаева:

Так и не рассказал как зациклить анимацию в готовом баннере 😔 Будет продолжение? Интересует зацикливание N-раз с отстановкой.

Маркеры и ярлыки

Давайте разбираться! Перемещаемся в Google Web Designer, и для примера я создам баннер с простой анимацией. Добавим на холст произвольный блок, зальем цветом и сделаем лесенку.

События в Google Web Designer + зацикливание
Маркеры и ярлыки – ваши друзья

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

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

Ярлык – это указатель, который можно использовать при настройке маркера, чтобы разнообразить сценарий.

Давайте добавим маркер на временную шкалу. Для этого я, например, перемещаю ползунок в нужное место и жму пиктограммку маркера слева. Правая клавиша мыши по маркеру, и давайте дадим ему название поприличнее. Скажем, Марк-1 в честь Тони Старка. Хорошо.

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

Добавляем событие

Теперь опять правая клавиша мыши и жмем “Добавить событие к маркеру”. Здесь у нас инструкция из нескольких шагов, причем первые уже заполнены. Разберем их.

События в Google Web Designer + зацикливание
Начинаем развлекаться
  • На первом шаге мы выбираем родителя.
  • На втором шаге выбираем триггер, событие (то есть наш маркер).
  • На третьем шаге выбираем действие, которое будет выполнено. Давайте остановим анимацию.
  • На четвертом выбираем приемник, опять же страница с баннером.
  • А на вкладке Конфигурация у нас пока ничего нет.

Жмем “Окей” и по идее сейчас баннер должен остановиться при достижении маркера, то есть на данной отметке времени. Обратите внимание, что для проверки работы событий нужно запустить превью в браузере. Жмем Превью, выбираем браузер и видим, что действительно анимация останавливается в нужном месте.

Запуск по кнопке

Хорошо, а как запустить ее снова? Для этого добавим на холст интерактивный элемент – кнопку. Зальем ее цветом и добавим надпись для наглядности. Правая клавиша мыши по кнопке, выбираем “Добавить событие”.

События в Google Web Designer + зацикливание
Добавляем кнопулю

Как видите, здесь в качестве родителя у нас уже выбрана кнопка. В качестве триггера указываем клик по кнопке. В действии выбираем раздел “Временная шкала” и действие “play”. Приемник тот же – наша страница, кнопка окей.

События в Google Web Designer + зацикливание
Работает ведь

Теперь по идее нажатие на кнопку продолжит воспроизведение анимации после ее остановки. Давайте проверим это. Запускаем режим превью и видим, что действительно, наша идея сработала.

Зацикливание

Хорошо, а как зациклить баннер? Для этого у слоя есть специальная пиктограмма. Здесь вы можете выбрать бесконечное повторение анимации либо задать конкретное число повторений. Это как раз то, что хотел Евгений.

События в Google Web Designer + зацикливание
Готовое решение

Но для разнообразия можно и упороться. Добавим в начало дорожки ярлык, а затем отредактируем текущий маркер. В качестве действия укажем “Перейти и воспроизвести n раз”. Приемник тот же. На вкладке “Конфигурация” выбираем созданный ярлык, ниже указываем количество повторений. Маркер события двигаем в конец анимации.

События в Google Web Designer + зацикливание
Добавляем ярлычок

Таким образом, когда ползунок дойдет до маркера, он прыгнет к ярлыку, то есть в начало анимации, и сделает 3 повторения.

Смотреть видео

Что ж, уважаемые Лю и Евгений, надеюсь, мне удалось помочь вам в неравном бою с Google Web Designer. Напоминаю про колокольные дела, а также про крайне заманчивую ссылку, которая находится в шапке канала. Вот она. Нажмите на нее для разнообразия.

С вами был Евгений Тридчиков, и я желаю вам великолепного дня!

Рейтинг
( 2 оценки, среднее 5 из 5 )
Евгений Тридчиков/ автор статьи
Загрузка ...
CONTEXT-KILL.BY