Рубрики
Интересные фишки krpano Пошаговый учебник Создание виртуальных туров в krpano

Добавляем в 3d тур список панорам, логотип, загрузчик

Список панорам с превьюшками

Да! Именно этого нам и не хватало, правда? Списка панорам с превьюшками. 21 сентября krpano обновил плагин combobox, и теперь не нужно колхозить какие-то собственные решения, а можно пользоваться этой фишкой «из коробки».

Список панорам в krpano
Список панорам в krpano

Чтобы добавить себе такой список, сделайте следующее:

1. Убедитесь, что в вашей папке plugins есть файл combobox.xml

2. Подключите в коде tour.xml плагин combobox.xml

<include url="%SWFPATH%/plugins/combobox.xml" />

3. Добавьте в код tour.xml вызов комбобокса:

<combobox name="cbscenes" design="vtour" align="lefttop" x="10" y="10" onloaded="add_scene_items();" />

Здесь вы можете менять дизайн. По умолчанию доступен default и vtour (последний на скришноте выше), но вы также можете оформить список на свой вкус. Например, можно добавить в код следующее:

	<combobox_design name="rounded" margin="3" open_close_speed="0.25">
		<style name="combobox_container_style"
			bgcolor="0xFFFFFF"
			bgalpha="0.95"
			bgborder="1 0xFFFFFF 0.5"
			bgroundedge="5"
			bgshadow="2 4 20 0x000000 0.5"
			/>
		<style name="combobox_marker_style"
			css="color:#999999;"
			bg="false"
			txtshadow=""
			/>
		<style name="combobox_item_style"
			css="color:#222222;"
			padding="4 4"
			bg="false"
			bgcolor="0xCCCCCC"
			bgalpha="1.0"
			bgroundedge="3"
			txtshadow=""
			onoveritem="set(css, 'color:#2277FF;');"
			onoutitem="set(css, 'color:#222222;');"
			/>
	</combobox_design>

Далее, указав design=»rounded» , вы получите следующее оформление списка панорам:

На настройках заострять внимание не буду, скажу лишь что они очень схожи с тем, что имеет в своём арсенале стандартный скин krpano.

4. Добавьте в код tour.xml функцию, которая создаёт список панорам с превьюшками:

	<action name="add_scene_items" scope="local">
		for(set(i,0), i LT scene.count, inc(i),
			caller.additem(calc('[img src=[dq]' + scene[get(i)].thumburl +  '[dq] style=[dq]border:1px solid rgba(255,255,255,0.5);width:64px;height:48px;vertical-align:middle;margin-right:8px;[dq]/] '+scene[get(i)].title), calc('loadscene('+i+',null,MERGE,BLEND(0.5))') );
		);
	</action>

Здесь вы также можете вносить изменения в соответствии с синтаксисом CSS. Вся эта строка редактируема:

border:1px solid rgba(255,255,255,0.5);width:64px;height:48px;vertical-align:middle;margin-right:8px;

Подробнее про CSS читайте в гугле.

5. Проделав всё это и не ошибившись ни разу, вы получите список панорам, и вот что вышло у меня.

Как вставить ваш логотип в krpano?

Не успели вы сделать тур, как хочется зарядить в него побольше ссылок на себя любимого? Что ж, постараюсь вам помочь в этом нелёгком деле.

Всё, что вам нужно знать — layer. Это переводится как «слой». Так в krpano называют контейнер, который:

  • может иметь цвет, прозрачность, быть активным или неактивным, скрываться, показываться и менять размеры
  • может реагировать на события (наведение, клик и т.д.)
  • привязан к координатам окна с панорамой (X и Y), и позиционируется относительно его углов или центра
  • может содержать в себе изображения

Вот последний пункт нас как раз интересует.

1. Подготовьте изображение с вашим логотипом. Желательно чтобы это был PNG файл с прозрачностью. Например, ваша компания Google. Отлично, можем взять её логотип и вставить в панораму. Если у вас пока что нет своей картинки, возьмите эту:

2. Положите это изображение в папку с туром. А чтобы был порядок, пусть это будет папка skin.

3. Создайте контейнер <layer></layer> в вашем tour.xml и добавьте в него несколько переменных:

<layer name="mylogo" url="%SWFPATH%/skin/logo.png" keep="true" />

Если вы забыли, плейсхолдер %SWFPATH% заставляет krpano отсчитывать иерархию папок начиная от корневого каталога, где лежит ваш swf файл. name — просто название контейнера, оно не должно начинаться с цифры, содержать пробелов, спецсимволов и кириллицы. keep — boolean атрибут, который отвечает за сохранность вашего логотипа при переходе от одной панорамы к другой. Ну что, давайте посмотрим что вышло…

А вышла какая-то дичь. Но так и должно было быть, мы ведь не уменьшили заранее картинку, не указали её место в панораме, ну и вообще.

4. Причешите внешний вид логотипа:

<layer name="mylogo" url="%SWFPATH%/skin/logo.png" keep="true" align="topright" x="10" y="10" edge="topright" alpha="0.8" scale="0.2" />

Логотип на движке krpano

align — атрибут, указывающий на расположение объекта на экране. В нашем случае topright — выравнивание относительно правого верхнего угла. Есть также:

  • x и y — отступы от точки привязки (в нашем случае правый верхний угол). Исчисляются в пикселях или в процентах.
  • edge — до какой точки контейнера замерять отступы x|y. Или, иными словами, точка симметрии. Давайте представим, что изображение выровнено по центру (align=»center» x=»0″ y=»0″). Тогда:
    • edge=»center» — контейнер будет находиться строго в центре
    • edge=»topleft» — верхний левый угол контейнера в центре экрана, остальной контейнер правее и ниже
    • edge=»bottom» — середина нижней грани контейнера в центре экрана, весь контейнер выше середины
    • Возможны и другие варианты (top, topright, right, bottomright, bottom, bottomleft, left, topleft, center).
  • alpha — непрозрачность контейнера. 1 — непрозрачный, 0 — полностью прозрачный
  • scale — масштабирование контейнера. 1 — 100% размер, 0.5 — 50% размер, 0.1 — 10% размер.

5. Добавьте логотипу несколько событий

<layer name="mylogo" url="%SWFPATH%/skin/logo.png" keep="true" align="topright" x="10" y="10" edge="topright" alpha="0.8" scale="0.2" onclick="openurl(https://pavelbogdanov.ru,_blank);" onover="tween(scale,0.25); tween(alpha, 1);" onout="tween(scale,0.2); tween(alpha, 0.8);" />
  • onover — при наведении мыши
  • onout — мышка ушла за пределы объекта
  • onclick — по щелчку

Что же значат эти конструкции onover=»tween(scale,0.25); ? Функция tween вызывается при наступлении события onover (наведение мыши). Будучи вызванной 1 раз, tween плавно приводит значение атрибута scale к 0.25, делая это в течение секунды. Поскольку событие вложено в контейнер mylogo, то и результат его действий распространяется только на этот контейнер. Если вы хотите, что бы при наведении мышки на логотип менялся какой-то другой контейнер, вы должны сделать так: onover=»tween(layer[xxx].scale,0.25);  где xxx — атрибут name того контейнера, к которому вы хотите применить это действие.

Функция tween может менять значения числовых переменных, точно так же она меняет прозрачность контейнера: tween(alpha, 1);

Если вы хотите, чтобы при наведении курсора на изображение выполнялось несколько функций, просто поместите их через точку с запятой: onover=»tween(scale,0.25); tween(alpha, 1);»

При вызове одиночной функции точка с запятой не обязательна: onover=»tween(scale,0.25)»

Так выглядит мой тур с логотипом.

Добавляем в виртуальный тур загрузчик

Давайте не будем всё усложнять. Просто откройте папку viewer\examples в вашем дистрибутиве krpano и найдите там всё необходимое. А именно, папку с названием loading-progress, в которой уже лежат рабочие примеры загрузчиков.

И ничего изобретать не нужно :) А вот как всё это работает на сайте krpano.

Чтобы сделать у себя полосу загрузки, просто добавьте в папку со своим туром один из трёх файлов или все три сразу:

Ну и не забудьте, что для анимированной загрузки нужно изображение в формате png.

Напомню! Эти файлы уже есть у вас в папке krpano\viewer\examples!

Подключаются файлы просто:

<include url="loading.xml" />

А вот что у меня получилось.

Внимание! Все приведённые здесь методы, функции и фишки — бледная тень того, что можно сделать на krpano. Помните об этом и читайте документацию krpano!

Уроки по созданию виртуальных туров
Уроки по созданию виртуальных туров
Рубрики
Пошаговый учебник Создание виртуальных туров в krpano

Как добавить виртуальный тур на сайт?

Долго я не делал эту статью, поскольку наивно полагал, что всё тут и так очевидно. Но, как оказалось, да: всё очевидно, но совсем не так. В заметке я расскажу, как просто и тупо добавить ваш созданный в krpano тур на ваш же сайт.

1. Вам нужен сайт

Нет, вы можете, конечно, пользоваться всякими viewat.org, 360cities.net или хранить панорамы в Просмотре улиц от Google (как добавить панораму в Просмотр улиц). Я тоже когда-то пользовался 360cities и viewat, вот только прошло время, и все панорамы, вставленные на мой сайт с 360cities, перестали работать. А Viewat поступил ещё более гадко — просто заменил мои панорамы какими-то непонятными левыми. Где гарантия, что у вас не гавкнутся панорамы, размещённые в Google?

Поэтому вам и нужен свой сайт.

2. К сайту нужен доступ через FTP

Да, есть другие варианты, но я рассмотрю именно этот — самый простой и банальный. Кроме того, вы должны знать, в какой именно папке должны храниться файлы на вашем сервере. Ответить на этот вопрос поможет документация вашего хостинга или техподдержка. Например, в моём случае это папка httpdocs. Но ваша папка может называться htdocs, public_html, может содержать имя вашего сайта, да и вообще я понятия не имею, как она называется. Это ваша забота, разобраться с этим.

Открыв папку, вы, вероятно, увидите там кучу разных файлов. Особенно если у вас уже есть работающий сайт, то вот именно здесь он и лежит. Вот корневая папка одного из моих сайтов, вам тоже нужно найти корневую папку своего сайта:

3. Создайте отдельную папку (каталог), где будете хранить свои туры

Я назвал её pano, но тут уж ваша воля выбирать имя. Однако, советую не делать длинных имён, отказаться от кириллицы и пробелов. Я вас предупреждал.

4. Открыв эту папку, загрузите туда целиком папку вашего тура

Хорошая примета — давать папкам с турами сразу осмысленные имена, без кириллицы, пробелов и дурацких сочетаний символов.

5. Теперь ваш тур будет открываться по адресу: 

http://вашсайт.ру/pano/test/tour.html

И да, этот адрес придётся писать в браузере ручками. Уже неплохо, но не очень красиво. Давайте сделаем адрес немного красивее.

6. Просто переименуйте tour.html в index.html

После такой процедуры ваш тур будет открываться по адресу http://вашсайт.ру/pano/test/ — что смотрится приятнее, согласитесь?

7. Встройте ваш тур на сайт

Самый простой (и верный) способ — просто поставить ссылку на тур. Например, можете разместить на странице сайта изображение тура и сделать с этого изображения ссылку на http://вашсайт.ру/pano/test/ — такой тур будет открываться на весь экран, будет нормально смотреться на мобильных и ПК.

Второй способ. Если ваш тур должен открываться на странице, а вы не особо хотите заморачиваться, используйте iframe:

<iframe src="http://вашсайт.ру/pano/test/" width="900" height="500">
    Что-нибудь, что увидит пользователь, если у него браузер 1980 года и на нем не работают фреймы
</iframe>

width — ширина окна в пикселях, не должна превышать ширину окна вашего браузера. height — высота в пикселях, не должна ломать дизайн сайта. Ширину также можно указать в процентах: width=»100%» — это позволит вашему туру занимать всю ширину страницы, и смотреться будет всё это более гладко.

Третий способ (правильный):

Откройте файл tour.html и перенесите всё что там есть в вашу страницу (стараясь её не сломать). Сделать это в каком-нибудь визуальном редакторе wordpress уже не получится, надо будет ковыряться в коде, работать с дочерними темами, шаблонами. Но именно такой способ позволит вам сохранить deeplinking (подробнее тут), ну и вообще является наиболее корректным. После первого, разумеется.

Уроки по созданию виртуальных туров
Уроки по созданию виртуальных туров
Рубрики
Пошаговый учебник Создание виртуальных туров в krpano

Как удалить лишние превью в стандартном скине krpano?

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

Итак, изначально имеет тур с такими превью:

Превьюшки в krpano
Превьюшки в krpano

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

Как это сделать?

  1. Добавьте в ваши skin_settings в файле tour.xml строку preview_count=»»
    Выглядеть это будет примерно так:

    	<skin_settings preview_count=""
                           maps="false"
    	               maps_type="bing"
    	               maps_bing_api_key=""
    	               maps_zoombuttons="false"
    

    В эту переменную вы будете вписывать число превьюшек, которые останутся видимыми в интерфейсе тура.

  2. Откройте ваш vtourskin.xml, найдите <action name=»skin_startup»>  и добавьте внутрь условный оператор:

    if(
    skin_settings.preview_count,
    copy(preview_counter, skin_settings.preview_count)
    ,
    copy(preview_counter, scene.count)
    );

    Это условие проверяет, задана ли переменная preview_count , и если задана, то копирует её значение в переменную preview_counter . В противном случае в эту переменную копируется банальный счётчик сцен (учитываются все панорамы).

  3. Найдите функцию <action name=»skin_addthumbs»> и доработайте её напильником. А именно:
    После строки add(thumbbarheight, thumbpadding); добавьте код:

    		if(
    			skin_settings.preview_count,
    			mul(thumbbarwidth, thumbxoffset, preview_counter)
    			,
    			mul(thumbbarwidth, thumbxoffset, scene.count)
    		);

    Затем найдите строку for(set(i,0), i LT preview_counter, inc(i),  и замените константу scene.count  на переменную, заданную нами ранее: preview_counter

    Должно получиться примерно так:

    for(set(i,0), i LT preview_counter, inc(i),
    				inc(thumb_cnt);
    				txtadd(thumbname,'skin_thumb_',get(i));
    				addlayer(get(thumbname));

    А ещё лучше подключите этот код отдельным файлом, удалив предварительно из vtourskin.xml

  4. Отсортируйте ваши сцены в файле tour.xml таким образом, чтобы вначале шли те панорамы, которые вы хотите оставить.
    Просто переносите каждую сцену от <scene> до </scene> выше или ниже, вырезая и вставляя текст.
  5. Вернитесь в пункт 1 и впишите в переменную preview_count=»»  число превьюшек, которые хотите оставить в панели. Например, я оставлю только 4 превью: администратор, бар, кафе, жилой этаж. Всё остальное будет скрыто.

В типовом случае вам лучше сначала собрать весь тур, не меняя последовательность сцен, а уже после этого перетащить в конец документа сцены, которые хотите скрыть, и указать число видимых.

Знаю, способ не самый гладкий, и задачу можно решить гораздо красивее, например, отключая отдельные панорамы при помощи переменных. Но мне некогда этим заниматься, да и нет нужды. Пользуйтесь на здоровье тем, что уже есть!

Как всё это работает?

Очень просто. Функция skin_addthumbs проверяет, какое значение имеет переменная preview_count. Если переменная пустая, то в панели превьюшек выводятся все превью от всех панорам, в порядке очерёдности. Если там стоит число, то выводится именно такое количество панорам, как указано в переменной.

Вот что получилось у меня.

Уроки по созданию виртуальных туров
Уроки по созданию виртуальных туров
Рубрики
Пошаговый учебник Создание виртуальных туров в krpano

7. Открытые превьюшки, прокрутка, текст загрузки и другие настройки

В этой статье вы узнаете, как изменить различные настройки скина krpano: сделать превьюшки открытыми или закрытыми по умолчанию, настроить их прокрутку, добавить логотип компании. Откройте ваш файл tour.xml и вглядитесь в его строки.

Рубрики
Пошаговый учебник Создание виртуальных туров в krpano

6. Редактирование интерфейса тура в krpano 1.19

Вы создали виртуальный тур, добавили переходы, сделали подписи панорам, и теперь хотите немного «довести до ума» его внешний вид, чтобы он смотрелся подобающим образом для вашего сайта. Что ж, давайте сделаем это.
Прежде всего, почему я работаю с krpano 1.19, которая пока ещё официально находится на стадии Beta тестирования? Потому что в этой версии движка добавлено очень много классных вещей, о которых мы с вами чуть ниже поговорим.

Рубрики
Пошаговый учебник Создание виртуальных туров в krpano

5. Названия панорам в krpano — подписи

Воспользовавшись инструкциями, вы сделали свой первый виртуальный тур, добавили переходы, установили стартовые параметры проекции. Но теперь хочется большего: вам нужно настроить свой тур, сделать его уникальным и непохожим на остальные. В krpano версии 1.19 и новее сделать это совсем несложно, все настройки вынесены в верхнюю часть файла tour.xml.

Рубрики
Пошаговый учебник Создание виртуальных туров в krpano

4. Как создать виртуальный тур с переходами

Вы уже создали свой первый виртуальный тур в krpano, и теперь самое время расставить в нем связи между панорамами, сохранить стартовые параметры проекций, подписать сцены. Давайте приступим. Но сначала нам потребуется определиться с некоторыми понятиями…

Рубрики
Пошаговый учебник Создание виртуальных туров в krpano

3. Krpano Testing Server — как с ним работать

Виртуальный тур это сложный многофайловый проект, который подчас требует специальных сетевых разрешений. Например, в Google Chrome при открытии тура в офлайн-режиме не будет работать зуммирование колесом мыши, не сработает Deeplinking, не будут открываться внешние ссылки (например, ваш сайт после щелчка по логотипу).

Поэтому вам рано или поздно понадобится виртуальный сервер. Разумеется, можно использовать великолепные решения Denwer и Openserver, но они слишком громоздки для наших скромных нужд.

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

Рубрики
Пошаговый учебник Создание виртуальных туров в krpano

2. Знакомство с krpano. Первые шаги.

В предыдущем материале я привёл аргументы, почему выбрал движок krpano. В этой части расскажу, как начать с ним работу. Не нужно ничего изобретать, скачайте дистрибутив программы с официального сайта krpano.com и распакуйте архив в папку на компьютере.

Совет: в некоторых случаях могут быть проблемы при работе с кириллическими адресами, поэтому лучше размещать дистрибутив krpano в папках, не содержащих русских букв в имени.

Например, папка D:\krpano подойдет, а D:\мои документы\krpano – не подойдет. Лично у меня в корне диска находится папка krpano, а в ней уже лежат дистрибутивы разных версий и с разными скинами. То же правило касается туров, с которыми вы будете работать: они не должны лежать в папках, в адресе которых есть кириллические символы, иначе виртуальный сервер krpano не заработает.

На Маке у меня все прозаичнее – все версии krpano находятся в папке программ.

Рабочие файлы krpano
Рабочие файлы krpano

Вот вы скачали и распаковали программу. Все, можно приступать к работе. Движок полностью функционален, но в незарегистрированной версии все изображение будет расписано копирайтами. Также копирайт будет в центре экрана при просмотре панорам. В остальном никаких ограничений нет.

Установка не требуется, вы можете носить все файлы на любом носителе и копировать куда угодно.

Как купить krpano

Приобрести лицензию можно на официальном сайте krpano.com. Если у вас возникают проблемы (а у меня они были, не мог зарегистрироваться на сайте по непонятным причинам), пишите в техподдержку, — вам обязательно ответят и предложат решение проблемы. Например, меня направили в другой интернет-магазин, где я купил лицензию по той же цене, что на официальном сайте, и безо всяких проблем.

Как зарегистрировать krpano

Запустите файл krpano Tools (красненький), и в открывшемся окне введите ваш ключ, который получили на почту после покупки программы. После проведения активации вы увидите галочки на тех пунктах, которые вам доступны в соответствии с типом приобретенной вами лицензии.

Лицензия krpano
Лицензия krpano

При следующем открытии krpano Tools вы увидите уже другое окно, в котором можно делать несколько очень полезных операций, но об этом позже.

Программа зарегистрирована (или нет), и мы можем приступать к работе.

Как сделать виртуальный тур?

Забегая вперед и не вдаваясь ни в какие подробности, просто возьмите ваши файлы панорам, лежащие в произвольной папке, и перетащите их на файл с названием MAKE VTOUR (MULTIRES) droplet. А если у вас пока нет таких файлов, скачайте проекции панорам по этой ссылке, распакуйте в отдельную папку, и работайте с ними.

Перетащите ваши эквидистантные проекции панорам на дроплет
Перетащите ваши эквидистантные проекции панорам на дроплет

Откроется окно терминала (белое на mac, черное на windows), там побегут какие-то строчки, и вскоре рядом с вашими файлами появится новая папка под названием vtour.

Терминал krpano
Терминал krpano

Открыв папку, вы увидите несколько файлов.

Файлы виртуального тура
Файлы виртуального тура

Откройте файл tour.html, и увидите ваш виртуальный тур. Или не увидите.

Виртуальный тур krpano
Виртуальный тур krpano

Или не увидели? Если что-то пошло не так, и перед вами оказался черный экран вместо тура, отображенного на картинке выше, не спешите огорчаться. В некоторых браузерах тур может не открыться из-за параметров безопасности (а сейчас, на конец 2016 года, он не открывается ни в одном браузере). Если такое произошло, не расстраивайтесь, ведь это нормально. Чтобы виртуальный тур работал, ваш браузер должен думать, что открывает его из интернета. Для этого в составе krpano есть виртуальный сервер. Откройте ссылку, сделайте всё как описано там, и возвращайтесь сюда. Теперь у вас есть рабочий тур, открытый в браузере.

Рассмотрим список дроплетов krpano.

Дроплеты krpano и их назначение

Дроплеты это небольшие скрипты, которые выполняют определенные задачи. Чтобы активировать тот или иной дроплет, нужно просто перетащить на него несколько файлов.

  • Convert SPHERE to CUBE – конвертирует изображение из эквидистантной проекции в грани куба. Дроплет нужен, чтобы из панорамной “простыни” получить грани куба. Например, для ретуширования надира (пола)
  • Convert CUBE to SPHERE – конвертирует изображение из граней куба в эквидистантную проекцию. Дроплет нужен, чтобы после редактирования граней куба преобразовать панораму в единый файл, который удобнее хранить.

Эквидистантная и кубическая проекция
Эквидистантная проекция и грани куба

При выполнении дроплетов конвертирования, описанных выше, krpano всегда преобразует ваше изображение в TIFF с глубиной цвета 16 бит. И это правильно, т.к. потери качества при конвертации должны быть минимальны, а 16-битный tiff обеспечивает неплохой цветовой охват и, следовательно, меньшие потери.

  • MAKE OBJECT – создает из множества файлов VR объект. Чтобы отработал успешно, перетаскивайте на дроплет несколько изображений одного и того же предмета, вращающегося вокруг своей оси. На выходе будет сгенерирован «объект», который можно «крутить» с помощью мыши. При этом программа последовательно меняет кадры, создавая эффект псевдо 3д.
  • MAKE PANO (FLAT) droplet – создает “плоскую” панораму, которая автоматически дробится на фрагменты (tiles), которые подгружаются в зависимости от разрешения монитора и увеличения отдельных фрагментов изображения пользователем. Подходят для гигапанорам.
  • MAKE PANO (MULTIRES) droplet – создается сферическая или цилиндрическая панорама с мультирезолюшеном (будет корректно отображаться как на маленьких мониторах нетбуков, так и на больших мониторах).
  • MAKE PANO (SINGLE-SWF) droplet – для любителей умерших технологий. Flash никому не нужен, так что забудьте про этот дроплет.
  • MAKE VTOUR (MULTIRES) droplet – генерирует виртуальный тур с мультирезолюшеном, уменьшенными изображениями для каждой панорамы, кнопками управления, опциональными подписями и стрелками-переходами. Именно им вы будете пользоваться чаще всего. Все файлы помещаются в папку vtour\ — рядом с вашими панорамами.
  • MAKE VTOUR (NORMAL) droplet – создает виртуальный тур без мультирезолюшена в максимально допустимом для кубической проекции разрешении. Не гарантирвана стабильная работа на мобильных устройствах, недостаточное разрешение для больших мониторов. Все файлы помещаются в папку vtour\ — рядом с вашими панорамами.

Теперь просто возьмите ваши ранее созданные панорамы в виде эквидистантных проекций и перетащите на дроплет MAKE VTOUR (MULTIRES) droplet. Откроется окно терминала, в котором вы сможете наблюдать, на какой стадии находится создание вашего виртуального тура, а точнее, его “рыбы”. Через несколько секунд (минут) тур будет готов, и в папке рядом с панорамами появится папка vtour\

Файлы виртуального тура
Файлы виртуального тура

В ней находится несколько файлов и папок. Поговорим о них подробнее.

Файлы виртуального тура, созданного в Krpano

panos\ – в этой папке находятся «нарезанные» изображения, составляющие вашу панораму, уменьшенные картинки для каждой панорамы и превью, которые загружаются в первую очередь и выглядят размытыми, пока панорама грузится.

skin\ – папка, которая содержит все элементы интерфейса вашего тура, включая изображения и файлы xml.

plugins\ – папка, в которой содержатся xml, js и swf плагины, без которых работа многих функций вашего виртуального тура была бы невозможна.

tour.xml – в этом файле хранится информация обо всех панорамах вашего тура, ссылка на файл с информацией о графическом интерфейсе и базовые настройки тура.

tour.swf – обеспечивает работу виртуального тура на устройствах с поддержкой Flash, например, Google Chrome. Однако, тот же Chrome великолепно справился бы и без этого файла, открыв тур в режиме html5. Тем не менее отказываться от файла пока что преждевременно. Например, редактор тура krpano по-прежнему работает на flash.

tour.js – важный файл, отвечает за интеграцию тура в страницу, его корректное отображение на устройствах как с поддержкой flash, так и без нее, занимается определением типа устройства и подгрузкой соответствующих файлов виртуального тура.

tour.html – файл, в котором показан пример встраивания тура в веб-страницу. Именно это файл нужно открывать в браузере, если хотите посмотреть, как выглядит созданный вами тур.

tour_editor.html – файл, при запуске которого к вашему виртуальному туру подключается редактор, с помощью которого можно превратить набор панорам в связанный виртуальный тур.

Я предпочитаю для работы с виртуальными панорамами пользоваться Google Chrome с включенными инструментами разработчика (CTRL+SHIFT+I для Windows, CMD+SHIFT+I для MAC). Однако, если вы поклонник Firefox и Firebug, нет никаких проблем. Пользуйтесь этим комплектом.

После того, как вы запустили tour.html и убедились, что тур открывается, при этом в нем есть все панорамы, которые нужны, мы можем приступить к созданию стрелок-переходов, установке стартовых проекций, и т.д.

Об этом поговорим в следующей статье.

Что делать, если после создания тура вы открываете файл tour.html в браузере, но вместо него видите чёрный экран и какие-то надписи? 

Прежде всего, не паникуйте.

  • Возможно, вы запустили tour.html в одной из старых версий Firefox, которая не поддерживает работу с html5 в офлайн-режиме. Прежде всего, попробуйте открыть тур в Google Chrome. Скорее всего, всё у вас получится.
  • Возможно, вы запустили tour_editor.html в браузере, не поддерживающем Flash. Запустите файл в Google Chrome или установите Flash player для вашего браузера. Правда, Firefox скоро полностью откажется от Flash, поэтому на текущий момент выбор один — пользоваться Хромом.
  • Используйте Krpano Testing Server

Возникла другая проблема? Откройте созданный тур, нажмите клавишу O (на английской раскладке), скопируйте сообщения, которые появились внизу, и пришлите сюда в комментарии. Я помогу.
[widget id=»nav_menu-2″]

Уроки по созданию виртуальных туров
Уроки по созданию виртуальных туров