Компонент "Спираль"

Компонент "Эффект вращения" позволяет создавать объявления, имитирующие глубину благодаря интерактивной трехмерной модели. Начальная трехмерная анимация в объявлении привязана к прокрутке страницы. Пользователи могут взаимодействовать с моделью напрямую и открывать объявление на весь экран.

Этот компонент предназначен для использования только в креативах формата "Спираль" для платформы "Дисплей и Видео 360" и не поддерживается в Microsoft Edge.

Как добавить в проект компонент "Спираль"

1. Откройте панель Компоненты, а затем – папку Графика и эффекты.
2. Перетащите компонент Спираль в рабочую область.
3. Дважды нажмите на компонент, чтобы открыть диалоговое окно, где можно редактировать Спираль.
4. На панели Слои выберите слой Трехмерная модель.
5. На панели Свойства в поле URL укажите файл GLB 3D-объекта, который вы хотите использовать. При необходимости измените другие свойства (описаны ниже).
6. Добавьте слои, перетащив графические файлы из файловой системы в рабочую область или на панель Слои (только для Windows и macOS). Также можно нажать кнопку Импорт объектов в нижней части панели Библиотека. В компоненте "Спираль" слои могут быть только изображениями.
7. Используя вкладки Начало и Конец, разместите каждый слой там, где он должен появляться в начале и в конце анимации. Для этого можно перетаскивать слои или использовать поля Начало и Конец на панели Свойства.
8. При необходимости задайте дополнительные параметры настройки (описаны ниже).
9. Когда компонент будет полностью настроен (его можно предварительно просматривать в ходе работы), нажмите Сохранить. Вы вернетесь в обычный интерфейс Google Web Designer.

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

Чтобы настроить компонент, дважды нажмите на него в рабочей области или выберите его и нажмите Настройки на панели Свойства.

Как добавить середину анимации

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

1. Наведите указатель справа от вкладки Начало и нажмите кнопку . Появится вкладка Середина.
2. По умолчанию середина анимации показывается между началом и концом анимации. Также можно настроить продолжительность анимации.
3. Переключитесь на вкладку Середина, чтобы настроить свойства слоя для этого сегмента.

Чтобы удалить середину анимации, наведите указатель справа от вкладки Середина и нажмите X.

Как изменить продолжительность анимации

Продолжительность анимации компонента "Спираль" зависит от того, какая его часть показывается на странице при прокрутке. По умолчанию анимация начинается, когда верхний край компонента появляется на странице (0 %), и заканчивается, когда нижний край исчезает вверху (100 %). Если вы добавили середину анимации, можно также установить момент ее показа. Продолжительность анимации настраивается двумя способами:

• На панели Продолжительность анимации задайте нужные процентные значения, перетащив значки или ползунки начала, середины и окончания.
• Введите проценты начала, середины и окончания в поля на панели Продолжительность анимации.

Как сделать фон трехмерной модели прозрачным

1. Выберите трехмерную модель.
2. На панели Свойства установите флажок Прозрачный фон трехмерной модели.

Как добавить метку жеста

1. Выберите трехмерную модель.
2. На панели Свойства нажмите на раскрывающийся список Значок и выберите изображение из библиотеки объектов или нажмите Обзор…, чтобы загрузить его из файловой системы.
3. Если необходимо, в поле Текст введите текст, который будет виден со значком.

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

Как настроить вращение трехмерной модели

1. Выберите трехмерную модель.
2. На панели Свойства задайте Отклонение для начала, середины и конца анимации.

Отклонение – это вращение модели по вертикальной оси.

Как добавить слои изображений

Это можно сделать двумя способами:

• Перетащите файл из файловой системы в рабочую область или на панель Слои (только для Windows или Mac).
• В нижней части панели Библиотека объектов нажмите кнопкуИмпорт объектов .

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

Как перемещать слои

1. Выберите слой, который необходимо переместить.
2. Выберите вкладку Начало, Середина или Конец.
3. Переместите слой одним из следующих способов:
   • Перетащите его в новое положение.
   • Задайте свойства положения Начало, Середина или Конец на панели Свойства. На вкладке можно редактировать только соответствующие ей свойства. Чтобы скопировать другое положение, используйте кнопки Сопоставить с начальным положением, Сопоставить со средним положением или Сопоставить с конечным положением .

Отрегулируйте положение слоя, переключаясь между вкладками Начало, Середина и Конец.

Как заменить изображения

1. В рабочей области нажмите правой кнопкой мыши на изображение, которое нужно заменить, и во всплывающем меню выберите Поменять изображение.
2. Выберите изображение из библиотеки или нажмите Импорт файлов , чтобы загрузить его с компьютера.

Новое изображение заменит исходное. Если вы изменяли размер исходного изображения, этот размер будет применен и к новому. В ином случае размер нового изображения не изменится.

Как изменить порядок слоев

На панели Слои перетащите слой на новое место в списке.

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

Как удалить слои изображений

1. Выберите слой, который нужно удалить.
2. Нажмите кнопку Удалить в нижней части панели Слои.

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

Как изменить размер слоя

1. Выберите слой, размер которого нужно изменить.
2. Измените размер слоя одним из следующих способов:
   • На панели Свойства задайте ширину и высоту слоя. Нажмите кнопку Сохранять соотношение сторон , чтобы включить или выключить сохранение пропорций между шириной и высотой.
   • Перетащите один из маркеров изменения размера по углам и краям слоя в рабочей области.

Слой масштабируется до указанного размера и сохраняет его на протяжении всей анимации.

Как изменить прозрачность слоя

1. Выберите слой, который необходимо изменить.
2. На панели Свойства задайте его прозрачность в начале и в конце анимации числом от 0 до 1 (0 — прозрачный, 1 — непрозрачный).

В конце анимации слой трехмерной модели остается непрозрачным.

Как изменить динамику анимации слоя

1. Выберите слой, который необходимо изменить.
2. На панели Свойства в разделе Дополнительные свойства выберите тип динамики из раскрывающегося списка Динамика.

Настраиваемая динамика недоступна.

Как скрыть или показать слои

На панели Слои установите флажок рядом с уменьшенным изображением слоя (под кнопкой Скрыть все слои ).

Чтобы скрыть или показать все слои, нажмите кнопку Скрыть все слои .

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

Как скрыть и отобразить слои

1. Выберите слой изображения.
2. На панели Свойства в разделе Дополнительные свойства установите флажок Показать скрытые.

Так называются полупрозрачные версии слоя в положениях, которые в данный момент не редактируются. Они используются для наглядного сравнения начального, среднего и конечного положений. Скрытые слои нужны только при редактировании и не будут показываться во время предварительного просмотра или в опубликованном файле.

Свойства

Свойства компонента "Спираль".

Свойство	Описание
Имя	Название компонента "Эффект вращения".
Коэффициент прокрутки	Число от 0 до 1, которое обозначает степень прокрутки пользователем. Используется только в рабочей области Google Web Designer. Значение по умолчанию — 0,5.

Выбрав слой, можно просматривать и редактировать его свойства в окне редактирования Спирали.

Свойства слоя трехмерной модели

Примечание. Компоненты "Спираль", созданные до выхода версии Google Web Designer 11.0.0, обладают другими свойствами трехмерной модели слоя.

Свойство	Описание
Имя	Имя компонента "Трехмерная модель".
URL	Исходный файл GLB для 3D-объекта. Чтобы проверить GLB-файл, воспользуйтесь инструментом Khronos glTF Validator. Для более ранних версий компонента URL или идентификатор 3D-объекта. Поддерживаются только объекты, размещенные в Poly, к которым разрешен доступ по ссылке. Размер файла объекта не должен превышать 2 МБ, иначе он может не загрузиться в приложении Google Web Designer. Подробные требования можно найти в руководстве по работе с 3D-объектами. URL должны начинаться с https://poly.google.com/view/. Идентификатор находится в конце URL страницы просмотра Poly, например https://poly.google.com/view/0CkCZrXqCWW. Примеры: https://poly.google.com/view/0CkCZrXqCWW 0CkCZrXqCWW Вы можете обновить трехмерный объект, нажав Обновить объекты в поле URL. Если изменений не видно, возможно, объект ещё обрабатывается. Повторите попытку через минуту.
Прозрачный фон трехмерной модели	Только для более ранних версий компонентов "Эффект вращения". Установите этот флажок, если нужно, чтобы фон компонента "Трехмерная модель" был прозрачным.
Метка жеста
Значок	Это изображение, которое показывается над трехмерной моделью и предлагает пользователю с ней взаимодействовать. Метка жеста слегка движется, привлекая внимание, пока не будет достигнуто ограничение по продолжительности анимации. Когда пользователь начинает взаимодействовать с моделью, эта метка исчезает.
Текст	Текст, который показывается под значком метки жеста. Применяется, только если указан значок метки жеста.
Задать ограничение по продолжительности анимации	Установите этот флажок и задайте продолжительность в секундах, чтобы ограничить время, на протяжении которого показывается анимация метки жеста.
Положение и размер
Начало	Расстояние до слоя в пикселях от левого и верхнего края компонента "Спираль" в начале анимации. Редактируется, когда выбрана вкладка Начало.
Середина	Расстояние до слоя в пикселях от левого и верхнего края компонента "Спираль" в середине анимации. Можно редактировать, когда выбрана вкладка Середина.
Конец	Расстояние до слоя в пикселях от левого и верхнего края компонента "Спираль" в конце анимации. Можно редактировать, когда выбрана вкладка Конец.
Размер	Ширина и высота слоя. Применяется к слою на протяжении всей анимации.
Поворот
Отклонение	Угол вращения модели по вертикальной оси в начале, середине и конце анимации в градусах.
Стиль
Прозрачность	Прозрачность слоя в начале, в середине и в конце анимации. Обозначается числом от 0 (прозрачный) до 1 (непрозрачный).
Дополнительные свойства
Динамика	Тип динамики анимации слоя. Настраиваемая динамика недоступна.

Свойства слоя изображения

Свойство	Описание
Источник	Источник графического файла (нельзя изменить).
URL перехода	URL, на который переходит пользователь, нажав на изображение.
Положение и размер
Начало	Расстояние до слоя в пикселях от левого и верхнего края компонента в начале анимации. Редактируется, когда выбрана вкладка Начало.
Середина	Расстояние до слоя в пикселях от левого и верхнего края компонента в середине анимации. Можно редактировать, когда выбрана вкладка Середина.
Конец	Расстояние до слоя в пикселях от левого и верхнего края компонента в конце анимации. Можно редактировать, когда выбрана вкладка Конец.
Размер	Ширина и высота слоя. Применяется к слою на протяжении всей анимации.
Стиль
Прозрачность	Прозрачность слоя в начале, в середине и в конце анимации. Обозначается числом от 0 (прозрачный) до 1 (непрозрачный).
Дополнительные свойства
Динамика	Тип динамики анимации слоя. Настраиваемая динамика недоступна.
Показать скрытые	Если этот параметр включен, показывается полупрозрачная версия слоя в неактивном положении (которое пока нельзя изменить).

События и действия

События

С помощью событий можно инициировать другие действия в объявлении. Компонент "Эффект вращения" отправляет указанное ниже событие.

Событие	Описание
Компонент "Эффект вращения" загружен	Отправляется, когда загружены все объекты, включенные в компонент.

Чтобы выбрать это событие в диалоговом окне "Событие", установите компонент "Спираль" как цель.

Кроме того, можно задать события и действия для трехмерной модели, которая включена в компонент "Спираль".

Предпросмотр

Действия во время настройки

Компонент "Спираль" можно предварительно просматривать во время работы с ним. Для этого сделайте следующее:

1. Чтобы перейти в режим редактирования, дважды нажмите на компонент в рабочей области.
2. Перейдите на вкладку Предварительный просмотр вверху.
3. Прокрутите страницу вверх и вниз, чтобы посмотреть, как видимые слои показываются на тестовом мобильном устройстве (скрытые не видны).
4. Во время предпросмотра компоненты нельзя редактировать. Перейдите на вкладку Начало, Середина или Конец, внесите изменения и вернитесь на вкладку Предпросмотр.

В браузере

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

Доступны следующие параметры режима предпросмотра:

• Устройство. Выберите мобильное устройство или укажите другое.
• Повернуть устройство . Выберите вертикальную или горизонтальную ориентацию.
• Окно просмотра. Если для устройства выбран вариант Специальный, можно задать новый размер. Укажите значение в этом поле или перетащите маркеры изменения размера в режиме предпросмотра.

В объявлениях формата "Спираль" используется режим предпросмотра "Параллакс".