Создавать виртуальные туры можно не только с помощью карты. А если взять за основу изображение? И не простое, а панорамное, желательно в 360 градусов.
Тогда может получиться вот такая небольшая экскурсия — с текстовыми пояснениями, фотографиями и даже музыкой. И сделано это с помощью уже хорошо знакомого нам сервиса Удоба.
С помощью Удоба сделать такую экскурсию не так уж и сложно. Итак, приступим…
Регистрация
Для начала давайте зарегистрируемся. Заходим на стартовую страницу сервиса и нажимаем «Создать пользователя».
Заполняем предложенную форму: имя пользователя, адрес электронной почты, пароль, капча… В заключение нажимаем кнопку «Регистрация».
На указанный адрес электронной почты придёт письмо с одноразовой ссылкой для входа на сайт. Переходим по ней.
Осталось нажать «Войти», чтобы перейти к созданию собственной библиотеки на сайте.
Нажимаем на кнопку «Создать библиотеку».
В открывшейся библиотеке нажимаем на кнопку «Добавить», а потом выбираем опцию «Интерактивный контент» и переходим к созданию виртуальной экскурсии.
Загружаем изображение
Из списка шаблонов выбираем тот, который называется «360-градусное окружение».
Вписываем заголовок. Добавляем первую панорамную сцену — нажимаем на синюю кнопку «+ New scene» (Новая сцена), чтобы загрузить широкоформатную фотографию достопримечательности, помещения или улицы.
Во всплывающем окне выбираем, какую фотографию будем загружать: «360 image» (панорамное фото) или «Static image» (обычное фото).
Вписываем название сцены в поле «Scene Title».
Чтобы загрузить фотографию, нажимаем на кнопку «Добавить» под надписью «Scene Background» (фон сцены).
В поле «Scene Description» вписываем описание сцены.
В разделе «Button style» указываем, какие интерактивные кнопки будут размещаться поверх фотографии. Если предполагается несколько панорамных сцен, связанных между собой, то выбираем вариант «New scene (arrow)». А если нужно прикрепить к фотографии «горячие точки» с дополнительной информацией, выбираем «More information (plus)».
В разделе «Audio Track» можно загрузить фоновое музыкальное сопровождение виртуальной экскурсии.
В заключение нажимаем в правом верхнем углу синюю кнопку «Done».
Интерактивные метки
Панорамная фотография отобразится в большом окне в центре экрана. Над ней расположена редакторская панель, которая позволяет добавлять на изображение интерактивные метки (слева направо): переход на другую сцену (1), текст (2), изображение (3), аудио (4), видео (5), викторина «выбери правильное утверждение» (6), вопрос с выбором ответа (7).
Нажимаем на значок и во всплывающем окне добавляем нужную информацию. Чтобы метка с дополнительным материалом появилась на изображении, нажимаем в правом верхнем углу синюю кнопку «Done».
Текст можно редактировать: менять размер, начертание букв (полужирное, наклонное). К словам можно прикреплять ссылки (выделяем нужное слово или словосочетание и нажимаем на значок с цепочкой).
У картинки указываем название и альтернативный текст, по желанию — текст при наведении курсора.
Аудио загружается с ПК. Не забываем нажать «Done».
Видеоролики загружаются с ПК. У них настройки побогаче.
В разделе “Визуализация” выбираем опции видеоплеера и добавляем постер к видеоролику, а в разделе «Воспроизведение» устанавливаем автоматическое воспроизведение видео и воспроизведение “по кругу”.
Это окошко для добавления викторины с выбором верного утверждения.
В графу “Вводный текст” вписываем задание, например: “Выберите из предложенных утверждений верное”.
В графы “Определение утверждений” вносим утверждения, первое из них — верное. Чтобы добавить новое утверждение, нажимаем “Добавить утверждение”. Если необходимо, в разделе “Подсказка” добавляем подсказку.
Чтобы добавить новый набор утверждений, нажимаем на кнопку внизу “Добавить утверждения”.
В разделе «Общий отзыв» можно настроить обратную связь. Нажимаем «Добавить диапазон» и добавляем оценки в зависимости от количества правильных ответов.
Например, если правильных ответов всего 20%, выбираем оценку «неплохо», если от 20 до 80% — «хороший результат», от 80 до 100% — «отлично».
Кстати, сервис может распределить оценки автоматически: достаточно нажать «Distribute Evenly».
А это конструктор для добавления викторины с выбором верного ответа.
Вписываем в соответствующие графы вопрос и варианты ответов. Первый из вариантов — правильный. Чтобы добавить новый вариант, нажимаем “Добавить ответ”. А новый вопрос добавляет кнопка “Добавить вопрос”.
В разделе «Общий отзыв» можно настроить обратную связь. Нажимаем «Добавить диапазон» и добавляем оценки в зависимости от количества правильных ответов.
Например, если правильных ответов всего 20%, выбираем оценку «неплохо», если от 20 до 80% — «хороший результат», от 80 до 100% — «отлично».
Кстати, сервис может распределить оценки автоматически: достаточно нажать «Distribute Evenly».
В разделе «Настройки поведения» тоже есть несколько дополнительных опций для показа викторины.
Чтобы вернуться к редактированию интерактивных меток, нажимаем на значок с «карандашом» (Edit). Рядом — кнопка для удаления метки (Delete).
Переходы между сценами
Можно зафиксировать стартовую позицию для показа сцены. Для этого выбираем «мышкой» нужный фрагмент фото и нажимаем на кнопку «Set starting position».
Чтобы добавить несколько сцен и связать их друг с другом, сначала под основным изображением нажимаем на синюю кнопку «+ New scene» (новая сцена).
Выбираем, какую фотографию будем загружать: панорамную или обычную. Вписываем заголовок и загружаем изображение.
Чтобы связать сцены между собой, после загрузки изображения в верхней панели нажимаем на стрелочку «Go To Scene» (переход на сцену).
Во всплывающем окне выбираем, на какую именно сцену мы перенаправляем пользователя.
Настройки
В разделе «Behavioral settings» находятся настройки для виртуального тура. Можно загрузить общий для всех сцен музыкальный трек и настроить показ названий интерактивных меток.
Публикация
Когда все сцены и информация к ним будет добавлена, прокручиваем страницу «мышкой» ниже, загружаем обложку виртуального тура (необязательно) и нажимаем на зеленую кнопку «Сохранить».
После обработки сервис откроет полученный результат.
Для того чтобы получить код для встраивания на страницу сайта или блога, нажимаем внизу “Вставить”.
