Вот как они могут работать вместе

Фото 360 в настоящее время не поддерживается Articulate. На самом деле, когда я в последний раз проверял (июнь 2019 г.), его даже не было в дорожной карте.

Между тем, хотя в Adobe Captivate есть эта функция, она может не подходить для ваших целей. Мой друг описывает его как «очень ограниченный» и в итоге использует что-то другое. Кроме того, если вы довольны сюжетной линией, вы действительно хотите переключиться?

Если я скажу вам, что вы можете сохранить свою любимую сюжетную линию, но делать все, что вам нужно, с 360-градусными изображениями намного больше, чем позволяет Captivate, разве это не было бы мило?

Обзор

Чтобы все заработало, сначала нужно понять несколько концепций.

  1. Если вы показываете 360-градусное изображение на слайде SL, вы не вставляете 360-градусное изображение (поскольку оно не поддерживается), вместо этого вы указываете на веб-объект, который отображает изображение. Хитрость в том, что даже веб-объект — это не изображение! Это индексный html-файл, который указывает на кучу других файлов, которые в целом составляют изображение. Вот простое, но несколько философское объяснение: 360-градусное изображение не является обычным/пассивным изображением, так как предполагает взаимодействие, реализованное в Javascript.
  2. Теперь вам нужно использовать инструмент для «композиции» вашего 360-градусного изображения в этот «веб-объект», который представляет собой набор файлов html, xml и js. В настоящее время я знаю два инструмента, предоставляющих эту функциональность: один называется Pano2vr (спасибо Бобу за указание!); другой назывался Tourweaver. Я пробовал только первый и буду использовать его в качестве примера в следующем обсуждении.
  3. Если ваша задача состоит в том, чтобы просто отобразить 360-градусное изображение внутри SL, это сравнительно легко. Получив результат от инструмента на втором шаге, укажите на него свой веб-объект. В конце концов вам нужно разместить файл где-нибудь в Интернете. Но это даже не обязательно должно быть на том же сервере, где вы выводите сюжетную линию.
  4. Однако простое отображение фотографии (или даже навигация по ней) не всегда подходит. Вместо этого вам может понадобиться захватить взаимодействие с пользователем и сделать что-то в 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:

  1. Скомпонуйте панорамную сцену и определите горячие точки. А затем в каждой точке доступа определите действие щелчка мыши. Пока это должно быть общим знанием.
  2. Если вы используете Pano2VR, есть только два варианта для полигональной точки доступа: URL-адрес или узел тура (который представляет собой еще одно изображение 360°). Просто перейдите по URL-адресу и введите свой код, начав с «javascript:».

Например, ваш URL может выглядеть так:

Javascript: parent.GetPlayer().SetVar("HotSpot-клик", 1 )

Как видите, так называемый URL-адрес определенно является неправильным! На самом деле это строка кода.

  1. Сгенерируйте вывод в формате html5 с желаемой обложкой (здесь не место для обсуждения концепций, специфичных для pano2vr).

Теперь вы готовы перейти на SL, вот что вам нужно сделать:

  1. Подготовьте некоторые переменные, чтобы вы могли получать эти изменения, и настройте желаемые триггеры действий, такие как отображение слоя и т. д.
  2. Разместите веб-объект.
  3. Вы также можете передать что-то обратно в 360, например, галочку, наложенную на изображение и т. Д. В этом случае вам нужно настроить триггеры для выполнения javascript.

Важный совет

(Я потратил впустую пять часов своей жизни, так что вам не нужно!)

Термин веб-объект предполагает, что SL извлекает объект из Интернета во время выполнения, и пока URL-адрес не меняется, вы можете обновлять веб-объект независимо. Однако, поскольку во многих случаях мы вынуждены использовать локальные файлы, это работает иначе.

Интересно (никто никогда не говорил нам!), если ваш веб-объект является локальным, SL фактически делает копию любого веб-объекта, который он использует, в папке «story_content/web object». Если вы используете локальные файлы и внесли изменения в файлы, на которые указывают, они не будут обновлены в SL. Это плохие новости. Однако хорошая новость заключается в том, что это решает вашу проблему с хостингом!

Существует три способа принудительного обновления. Первый и более простой способ — повторно вставить веб-объект. Второй способ — отредактировать веб-объект и указать ему другую папку. Третий способ, который может быть удобен, если вы точно знаете, какой файл отличается, — это перейти в папку этого конкретного веб-объекта, используемую SL, и перезаписать файлы. Я видел обсуждение этой проблемы 6-летней давности, и Articulate не сделал ничего, чтобы упростить ее. Любой, кто знаком с SL, может подтвердить, что команда поддержки Articulate очень привлекательна, но узким местом является команда разработчиков.

Вот и все. Вот простой пример.