Вот как они могут работать вместе
Фото 360 в настоящее время не поддерживается Articulate. На самом деле, когда я в последний раз проверял (июнь 2019 г.), его даже не было в дорожной карте.
Между тем, хотя в Adobe Captivate есть эта функция, она может не подходить для ваших целей. Мой друг описывает его как «очень ограниченный» и в итоге использует что-то другое. Кроме того, если вы довольны сюжетной линией, вы действительно хотите переключиться?
Если я скажу вам, что вы можете сохранить свою любимую сюжетную линию, но делать все, что вам нужно, с 360-градусными изображениями намного больше, чем позволяет Captivate, разве это не было бы мило?
Обзор
Чтобы все заработало, сначала нужно понять несколько концепций.
- Если вы показываете 360-градусное изображение на слайде SL, вы не вставляете 360-градусное изображение (поскольку оно не поддерживается), вместо этого вы указываете на веб-объект, который отображает изображение. Хитрость в том, что даже веб-объект — это не изображение! Это индексный html-файл, который указывает на кучу других файлов, которые в целом составляют изображение. Вот простое, но несколько философское объяснение: 360-градусное изображение не является обычным/пассивным изображением, так как предполагает взаимодействие, реализованное в Javascript.
- Теперь вам нужно использовать инструмент для «композиции» вашего 360-градусного изображения в этот «веб-объект», который представляет собой набор файлов html, xml и js. В настоящее время я знаю два инструмента, предоставляющих эту функциональность: один называется Pano2vr (спасибо Бобу за указание!); другой назывался Tourweaver. Я пробовал только первый и буду использовать его в качестве примера в следующем обсуждении.
- Если ваша задача состоит в том, чтобы просто отобразить 360-градусное изображение внутри SL, это сравнительно легко. Получив результат от инструмента на втором шаге, укажите на него свой веб-объект. В конце концов вам нужно разместить файл где-нибудь в Интернете. Но это даже не обязательно должно быть на том же сервере, где вы выводите сюжетную линию.
- Однако простое отображение фотографии (или даже навигация по ней) не всегда подходит. Вместо этого вам может понадобиться захватить взаимодействие с пользователем и сделать что-то в SL. Для этого вам нужно использовать объект javascript под названием «player» для доступа ко всем переменным в SL. Вам также потребуется разместить файлы SL и файлы 360 в одном домене из-за ограничений безопасности в браузере. Это то, что основная часть этой статьи будет обсуждаться.
Объект Player
В какой-то момент в прошлом (примерно в 2015 году?) хорошие ребята из Articulate устали слушать жалобы и решили поддержать JavaScript. Для этого они создали ОБЪЕКТ JavaScript под названием «игрок». Объект в том смысле, в каком он используется в любом объектно-ориентированном языке программирования, — это способ инкапсулировать вместе определенные свойства и функции. Вам не нужно использовать все эти свойства и функции каждый раз, но в этом и прелесть — если вам нужно, они готовы к использованию. После определения вы можете получить экземпляр объекта во время выполнения и начать манипулировать всеми его свойствами. Часто объекты определяются иерархически, поэтому они могут наследовать элементы своих родительских объектов.
Теоретически SL может сделать больше, но на данный момент переменная — это единственное, что включено в API.
Здесь важно понимать, что когда вы используете веб-объект и когда вы выполняете код JS внутри этого веб-объекта, SL становится контекстом. Это означает, что SL становится «родителем» для кода JS.
Чтобы получить доступ ко всем переменным SL, инкапсулированным в объекте player, вы просто вызываете
родитель.GetPlayer().
Знайте, что GetPlayer() — это функция JS, которая часто используется для получения собственного проигрывателя. Но теперь, вызывая родительский объект, мы получаем другого игрока.
Итак, чтобы использовать объект проигрывателя StoryLine, вам нужна эта строка в вашем веб-объекте JS:
вар игрок = родитель. ПолучитьИгрока();
Когда у вас есть плеер, вы можете получить доступ ко всем его переменным:
player.GetVar("Имя вашей переменной SL");
Это выполнит функцию объекта, что означает вызов подпрограммы кодов, хранящихся в объекте игрока, определенном как «GetVar». Что он делает, так это ищет переменную в вашем файле StoryLine, которая соответствует предоставленному вами аргументу имени переменной, и извлекает ее значение в JavaScript.
player.SetVar("Ваша переменная SL", переменная JS);
Это выполнит другую функцию объекта, называемую SetVar, которая присвоит значение, хранящееся в вашей переменной JS, в переменную SL.
Операция, противоположная приведенной выше, заключается в использовании оператора GetVar для возврата значения, которое может быть присвоено вашей переменной JS, например:
MyJsVar = player.GetVar("Имя вашей переменной SL");
Как встроить виртуальный тур 360 в SL
Следуя приведенному выше обсуждению, мы можем представить случай, когда вам нужно отобразить изображение 360, определить несколько горячих точек и побудить пользователей нажимать на них. Нажатие на каждую из этих горячих точек вызовет некоторые действия в SL, такие как воспроизведение звука, отображение слоя, изменение состояния объекта и т. д.
Чтобы выполнить эту простую задачу, вот что вам нужно сделать в инструменте 360:
- Скомпонуйте панорамную сцену и определите горячие точки. А затем в каждой точке доступа определите действие щелчка мыши. Пока это должно быть общим знанием.
- Если вы используете Pano2VR, есть только два варианта для полигональной точки доступа: URL-адрес или узел тура (который представляет собой еще одно изображение 360°). Просто перейдите по URL-адресу и введите свой код, начав с «javascript:».
Например, ваш URL может выглядеть так:
Javascript: parent.GetPlayer().SetVar("HotSpot-клик", 1 )
Как видите, так называемый URL-адрес определенно является неправильным! На самом деле это строка кода.
- Сгенерируйте вывод в формате html5 с желаемой обложкой (здесь не место для обсуждения концепций, специфичных для pano2vr).
Теперь вы готовы перейти на SL, вот что вам нужно сделать:
- Подготовьте некоторые переменные, чтобы вы могли получать эти изменения, и настройте желаемые триггеры действий, такие как отображение слоя и т. д.
- Разместите веб-объект.
- Вы также можете передать что-то обратно в 360, например, галочку, наложенную на изображение и т. Д. В этом случае вам нужно настроить триггеры для выполнения javascript.
Важный совет
(Я потратил впустую пять часов своей жизни, так что вам не нужно!)
Термин веб-объект предполагает, что SL извлекает объект из Интернета во время выполнения, и пока URL-адрес не меняется, вы можете обновлять веб-объект независимо. Однако, поскольку во многих случаях мы вынуждены использовать локальные файлы, это работает иначе.
Интересно (никто никогда не говорил нам!), если ваш веб-объект является локальным, SL фактически делает копию любого веб-объекта, который он использует, в папке «story_content/web object». Если вы используете локальные файлы и внесли изменения в файлы, на которые указывают, они не будут обновлены в SL. Это плохие новости. Однако хорошая новость заключается в том, что это решает вашу проблему с хостингом!
Существует три способа принудительного обновления. Первый и более простой способ — повторно вставить веб-объект. Второй способ — отредактировать веб-объект и указать ему другую папку. Третий способ, который может быть удобен, если вы точно знаете, какой файл отличается, — это перейти в папку этого конкретного веб-объекта, используемую SL, и перезаписать файлы. Я видел обсуждение этой проблемы 6-летней давности, и Articulate не сделал ничего, чтобы упростить ее. Любой, кто знаком с SL, может подтвердить, что команда поддержки Articulate очень привлекательна, но узким местом является команда разработчиков.
Вот и все. Вот простой пример.