Что такое ролловер-эффект.

Ролловер-эффектом называют изменение состояния (формы, положения) объекта при наведении на него курсора. В этой статье мы научимся создавать такой эффект в Pano2VR на простом примере с дверью. При наведении курсора на дверь, она будет принимать открытое состояние, а в случае покидания курсора – закрытое. Для этого нам понадобятся 2 сферические панорамы, снятые с одной точки и имеющие отличия в одной и той же области изображения. Примеры панорам показаны на рис.1 и рис. 2. Я сделал одну панораму с закрытой дверью, которая будет использоваться как основная, вторую сделал с открытой дверью. От второй панорамы будет использован небольшой участок.

Рисунок 1. Вариант панорамы с закрытой входной дверью.

Рисунок 2. Вариант панорамы с открытой входной дверью.

Приступая к работе.

Загрузим второй вариант в Pano2VR и с помощью инструмента Корректор извлечем участок изображения, где находится дверь.

Рисунок 3. Извлечение участка изображения.

Угол обзора (FoV) делаем минимально возможным (рис. 4) чтобы не брать лишние детали и не получить в результате файл большого размера. При необходимости изменяем параметры Pan и Tilt.

Рисунок 4. Установка параметров вида для извлечения участка изображения.

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

Рисунок 5. Совмещение извлеченных корректировок.

Обе корректировки могут неидеально совпадать. Где-то могут быть не нужные блики. В данном случае отражения в окнах на обоих изображениях немного различаются, а также присутствует отличие по тону. При последовательной смене изображений это заметно (рис. 5). Для устранения этого артефакта выполним следующие действия.

Откроем графический редактор, например Adobe Photoshop и загрузим в него как слои оба файла корректировок. Расположим вторую корректировку выше первой.

Рисунок 6. Корректировки, загруженные в Adobe Photoshop.

К верхнему слою добавим маску и черной кистью с минимальной жесткостью зарисуем все, кроме открытой двери. Чтобы лучше видеть закрашиваемую область, нижний слой можно отключить (рис. 7).

Рисунок 7. Добавление маски к слою.

Включим все слои и выполним сведение пункт меню Слои -> Выполнить сведение. Сохраняем полученный результат. Это изображение будем использовать в дальнейшем.

Создаем новый проект и загружаем в него первый вариант панорамы. Затем экспортируем в формат Flash или HTML5 (рис. 8).

Рисунок 8. Экспорт в HTML5.

В появившемся окне в секции «Шаблон контроллера и оформления» выбираем файл оформления (.ggsk) и нажимаем на кнопку Редактировать.

Перетаскиванием добавим изображение, которое было получено в Photoshop. Для удобства отсчета координат установим позицию в x:0, y:0. Дадим компоненту имя «door_opened».

Рисунок 9. Загрузка изображения в редактор оформления.

На панели инструментов активируем кнопку и на холсте создаем новую метку активной зоны. Дадим компоненту имя «hs_door». Позицию установим в центр изображения. Так как размеры изображения 695x695 пикселей, то центр находится в позиции x:348, y:348 (рис. 10). Включим свойство Cursor-Hand, чтобы при наведении курсор принимал вид руки-указателя.

Рисунок 10. Свойства позиции хотспота.

В группе «Хотспот шаблон» (рис. 11) включаем свойство 3D дисторсия и задаем значение свойству 3D дистанция, которое вычисляется по формуле: 3Dдист=Ширина панорамы / 2 / Pi. 3Dдист=6000 / 2 / 3,1415 = 954,9.

Рисунок 11. Группа «Хотспот шаблон».

Сделаем компонент «door_opened» вложенным в элемент «hs_door» (рис. 12)

Рисунок 12. Компоненты оформления.

Нужно сделать так, чтобы изображение, скрытое изначально, показывалось при наведении курсора на активную зону. Для плавности показа будем использовать свойство «Прозрачность» вместо свойства «Отображение». Установим прозрачность компонента «door_opened» в 0 (рис. 13).

Рисунок 13. Группа «Внешний вид». Свойства компонента «door_opened».

Так как компонент «door_opened» полностью прозрачен, он не может реагировать на наведение курсором. Поэтому добавим прямоугольник поверх изображения. Размеры прямоугольника подбираем таким образом, чтобы он вписывался в габариты закрытой двери (рис .14). Компоненту дадим имя «rectangle».

Рисунок 14. Контекстное меню панорамы с добавленными пунктами.

При наведении курсора на прямоугольник будет показано изображение. Прямоугольник тоже необходимо сделать прозрачным, но таким образом, чтобы у него была возможность реагировать на наведение курсора. Установим значение свойства «Прозрачность» в 0,005 (рис. 15).

Рисунок 15. Группа «Внешний вид». Свойства компонента «rectangle».

Далее нужно определить сценарии поведения прямоугольника на наведение курсора (рис. 16). При наведении курсора на прямоугольник «rectangle»(Mouse Enter), компонент «door_opened» будет становиться полностью непрозрачен. При покидании курсора, компонент «door_opened» станет полностью прозрачен.

Рисунок 16. Сценарии для компонента «rectangle».

После всех этих действий сохраняем файл изменения, выходим из редктора оформления и закрываем окно экспорта без согласия на осуществление экспорта файлов. В редакторе активных зон создадим точечную активную зону. В поле ввода ID шаблона вводим имя хотспота, которое было определено в оформлении, т.е. «hs_door» (рис. 17).

Рисунок 17. Редактор активных зон.

Теперь подкорректируем положение активной зоны. Для этого перейдем на вкладку Листинг хотспотов и установим значения Pan и Tilt, которые использовались при извлечении корректировки.

Рисунок 18. Вкладка «Листинг хотспотов».

Теперь можно экспортировать и запускать просмотр.