Компонент "Эффект вращения"

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

Этот компонент предназначен для использования только в креативах типа "Спираль" для платформы "Дисплей и Видео 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 выйдите из режима редактирования компонента и нажмите кнопку Предпросмотр. На странице предпросмотра объявление показывается с достаточным количеством контента для того, чтобы прокрутить компонент вверх и вниз.

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

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

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