Web-дизайн. 4 курс. Практическое занятие №3. Баннер на основе локального дизайна Google Material

Вам нужно создать простой динамический баннер с минимум двумя движущимися объектами и кнопкой, используя платформу Google Web Designer и разместить его у себя в блоге.

Подготовительный этап:

1) Установите программу Google Web Designer: https://webdesigner.withgoogle.com/

2) Выберите исходные файлы. Вам потребуются изображения на прозрачном фоне в формате .png, а также изображение кнопки - также прозрачной. Обратите внимание, что файлы должны быть относительно небольшими, чтобы вмещаться в поле вашего баннера. Либо их придется задавать в нужных размерах прямо в программе.

Создание баннера:

3) При запуске Google Web Designer выберите опцию создания с чистого листа, затем укажите название (латиницей), платформа: внешнее объявление, размеры: пользовательские (задайте ваши ширину и высоту, в моем примере: 400х300 рх), размер анимации: расширенный. Нажмите Ок.

4) Теперь перед вами среда разработки Google Web Designer. Задайте фон вашего баннера. Для этого в правом сайдбаре раскройте блок "свойства" и в нем укажите цвет в параметре "заливка" (1).

5) Раскройте блок "библиотека" и добавьте ваши исходники, нажав на кнопку загрузки (2).

6) Перетащите, зажав мышью, ваши картинки на баннер, расположив их так, как они должны будут отображаться в финальном баннере (3). Их размеры можно отрегулировать во вкладке "свойства".

7) В блоке первого фото кликните один раз левой клавиши мыши на расстоянии - например, 0,5s - от начала шкалы. Теперь нажмите правую клавишу мыши и выберите "вставить ключевой кадр". На шкале появится желтая точка (4). По нажатию на эту точку в блоке "свойства" вы можете изменять размер объекта (параметр "положение и размер") и перемещать его (параметр "преобразование, вращение и масштаб").

Как делается анимация? Кликните на начало шкалы (белый треугольник) (5) и оставьте в первой строке преобразования XYZ нули (6). Теперь кликните на точку ключевого кадра и укажите в параметре первой строки у Y значение -10. Ваше фото сдвинется вверх. Создайте еще один ключевой кадр далее по шкале и также измените значение на -20. Фото сдвинется еще выше. Если указать 10 без минуса, то объект будет двигаться вниз. Также движение и размер регулируется по шкалам X и Z.

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

Вам нужно поставить 8-10 ключевых кадров чтобы сформировать движение фото. 

8) Когда вы заканчиваете с первым фото (7), такой же сценарий движения указываете для следующего (8) в другой строке компонентов. Кнопка и сам товар могут не двигаться - если хотите разместите их статично.

9) Теперь нужно привязать активность к кнопке. Для этого раскрываем блок компоненты (9) и перетаскиваем мышью элемент "кнопка изображения" на вашу кнопку баннера.

10) После переноса на этой кнопке на баннере нажимаете правую клавишу мыши и выбираете "добавить событие". В окне события выбираете: мышь - click - действие - обычное объявление - переход - gwd-ad - затем в конфигурации указываете URL страницы (ссылку), куда пользователь будет переходить при клике на кнопку баннера и нажимаете ок.

11) Для того чтобы динамика баннера была бесконечной, кликните на кнопку со стрелкой для каждой картинки и выберите опцию "бесконечно" (10).

12) Баннер готов. Его можно протестировать, нажав на кнопку запуска (11). Остановить просмотр можно этой же кнопкой.

13) Для сохранения баннера выберите путь: файл - сохранить как ZIP-файл.

Публикация баннера:

14) Извлеките файлы из архива. Перед вами папка assets с исходниками, файлы стилей, javascript-сценарии, а также один файл html. 

15) Загрузите все файлы из папки assets в репозиторий (лучше создать новый репозиторий чтобы не запутаться с файлами), туда же загрузите все остальные файлы, кроме файла html.

16) В файле html в соответствующих местах укажите пути ко всем файлам, загруженным вами в репозиторий. Это: три файла css (ссылки после атрибута href) , семь файлов js (ссылки после атрибута src) и файлы ваших исходных фото и кнопки (ссылки после значения source).

17) Опубликуйте готовый html в блоге в виде нового поста или на отдельной странице. Баннер должен быть кликабелен и выглядеть примерно так: https://konoplevdigital.blogspot.com/p/banner-specimen.html

Ссылки на выполненное задание принимаются в комментарии к данному посту до 15:00 2 октября.