Создавать виртуальные туры можно не только с помощью карты. А если взять за основу изображение? И не простое, а панорамное, желательно в 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» находятся настройки для виртуального тура. Можно загрузить общий для всех сцен музыкальный трек и настроить показ названий интерактивных меток.
Публикация
Когда все сцены и информация к ним будет добавлена, прокручиваем страницу «мышкой» ниже, загружаем обложку виртуального тура (необязательно) и нажимаем на зеленую кнопку «Сохранить».
После обработки сервис откроет полученный результат.
Для того чтобы получить код для встраивания на страницу сайта или блога, нажимаем внизу “Вставить”.
Копируем код из открывшегося окошечка.
Код будет выглядеть примерно вот так:
<iframe src=»https://udoba.org/h5p/embed/34840» width=»925″ height=»546″ frameborder=»0″ allowfullscreen=»allowfullscreen» allow=»geolocation *; microphone *; camera *; midi *; encrypted-media *» title=»Памятник Леониду Гайдаю в Иркутске»></iframe><script src=»https://udoba.org/sites/all/modules/h5p/library/js/h5p-resizer.js» charset=»UTF-8″></script>
Кстати, из этого кода можно извлечь ссылку для красивого полноэкранного просмотра плаката. Эту ссылку я выделила красным.
Чтобы вновь вернуться к редактированию проекта, нажимаем на вкладку «Редактировать» вверху.