В данной статье продолжим работу над виртуальным туром и более подробно остановимся на его структуре.
О чем здесь?
В прошлом уроке мы создали самый простой виртуальный тур: 2 панорамы, 2 точки перехода. Здесь мы продолжим работу над предыдущим туром: добавим уже ранее созданную для отдельной панорамы заставку, логотип и кнопки управления панорамой.
Помимо этого рассмотрим ограничения области видимости элементов тура и узнаем как их использовать.
Но перед тем как переходить к более сложным элементам стоит рассмотреть общую структуру кода виртуального тура.
Что потребуется?
Для данного урока потребуются те же самые материалы, что и для 4 урока.
Полный список материалов для 4 и 5 урока >>
А также потребуются все наработки, которые вы сделали по уроку 4. Работа в данной статье будет с кодом, полученным в предыдущей статье.
Общая структура виртуального тура на krpano
Здесь предлагается общая схема относительно простого тура, которая решает следующие задачи:
* избавиться от идентичного кода в разных участках тура
* создание условий, когда в тур можно легко вносить изменения и просто управлять отдельными его элементами
* создание универсального кода, участки которого в будущем можно использовать в последующих турах.
Общий упрощенный вид структуры виртуального тура
Следует отметить, что с возрастанием сложности виртуального тура разрастается и структура. Выделяются новые блоки, а код тура уже распределяется на множество xml-файлов. Но сейчас рассмотрим упрощенную структуру.
* Блок плагинов – здесь оформляются все плагины дополнительных материалов виртуального тура (изображения заставок, логотипов, и т.д.).
* Блок глобальных событий. В данном блок прописывается код, отвечающий за глобальные события и общих настроек тура (например, включить\выключить на старте авторотацию)
* Блок экшенов – здесь располагаются все экшены виртуального тура.
Из них выделяется экшен настроек , в котором прописываем основные настройки виртуального тура. Этот экшен отвечает за создание определенных переменных, которые применяются в туре и присвоение им стартовых значений. Так же часто из этого экшена происходит вызов других экшенов, которые отвечают за настройку элементов тура. Например, могут вызываться созданные экшены которые масштабируют кнопки исходя из разрешения экрана.
Также здесь выделяется стартовый экшен сцен, который запускается при старте каждой сцены и производит ее настройку. Например, в этот экшен выводятся функции показа текста названия панорамы. Т.е. это те функции которые надо выполнять для всех сцен на старте. Этот код выводится в отдельный экшен, чтобы не дублировать его в каждой сцене, и более просто управлять загрузкой элементов сцен.
Экшен настроек и стартовый экшен сцен это логические блоки, т.е. нет необходимости их оформлять особыми тегами. Они призваны в сложных турах упростить работу с кодом. В простых же турах они могут отсутствовать вовсе.
* Блок сцен – здесь оформляются все сцены виртуального тура.
На основе этой структуры доработаем виртуальный тур. Добавим в него ранее созданные заставку, логотип, линзовые эффекты.
Ограничения области видимости элементов тура. Атрибут keep
Скопируйте из материалов в папку images: button.png, buttoncontrol.png, logo.png.
Откройте код панорамы созданный в третьей части этой серии уроков по krpano. Из него мы будем брать отдельные части программы.
Скопируем оттуда код плагина logo предварительно поменяв пути к изображению плагина с
url=”logo.png”
на
url=” %SWFPATH%/images/logo.png”
Вставим полученный код сразу после строчки
<krpano version="1.0.8.14" onstart="loadscene(panorama2);" >
Полученный код:
<krpano version="1.0.8.14" onstart="loadscene(panorama2);" >
<plugin name="logo"
align="righttop"
y="5"
x="5"
url="%SWFPATH%/images/logo.png"
alpha="0.5"
onover="tween(plugin[logo].alpha, 1.0, 0.5)"
onout="tween(plugin[logo].alpha, 0.5, 0.5)"
onclick="openurl('http://www.1panorama.ru', _blank)"
/>
<scene name="panorama1" >
<view hlookat="0" vlookat="0" fovtype="MFOV" fov="90" maxpixelzoom="1.0" fovmax="120" limitview="auto" />
<preview url="%SWFPATH%/panoramas/panorama1.tiles/preview.jpg" />
<image>
<cube url="%SWFPATH%/panoramas/panorama1.tiles/pano_%s.jpg" />
</image>
<hotspot name="spot1-2" url="%SWFPATH%/images/hotspot.png"
ath="-105" atv="-4"
crop="0|0|26|26" onovercrop="0|26|26|26"
onclick="loadscene(panorama2);"
/>
</scene>
<scene name="panorama2" >
<view hlookat="0" vlookat="0" fovtype="MFOV" fov="90" maxpixelzoom="1.0" fovmax="120" limitview="auto" />
<preview url="%SWFPATH%/panoramas/panorama2.tiles/preview.jpg" />
<image>
<cube url="%SWFPATH%/panoramas/panorama2.tiles/pano_%s.jpg" />
</image>
<hotspot name="spot2-1" url="%SWFPATH%/images/hotspot.png"
ath="0" atv="0"
crop="0|0|26|26" onovercrop="0|26|26|26"
onclick="loadscene(panorama1);"
/>
</scene>
</krpano>
Изначально можно рассчитывать, что теперь при запуске виртуального тура должен появиться уже знакомый нам логотип в правом верхнем углу, но этого не происходит. Почему?
В krpano есть ограничения области видимости элементов тура. Под видимостью здесь подразумевается видимость с точки зрения krpano. Т.е. видит ли этот участок кода krpano в данном случае или нет. ”Область видимости” – это устоявшийся программистский термин. Возможно было бы более понятно, если назвать, например, “область работы” плагина, или другого элемента тура.
Например, плагин может работать только в одной сцене (т.е. быть видимым для krpano), а при выходе из нее удаляться. А может иметь область видимости во всем туре. Это сделано для того, чтобы не загружать память ненужными в данный момент элементами тура.
Задать область видимости элемента тура можно при помощи атрибута keep
keep=”true” – элемент тура работает во всем туре.
keep=”false” (по умолчанию) – элемент тура работает только в текущей сцене, а при выходе из нее удаляется.
Такой атрибут имеют теги plugin, event, hotspot, lensflare.
Теперь, если нам надо чтобы логотип отображался всегда, то надо его плагину прописать атрибут:
keep=”true”
Добавив эту строку в плагин logo, после запуска мы увидим логотип.
Теги плагинов (plugin), событий (event), точек перехода (hotspot) и линзовых эффектов (lensflare) можно размещать в блоке плагинов (как по структуре) или внутри сцен. Решение о том где размещать принимается на основе того, где нам необходима область видимости данного элемента.
Если необходимо на весь тур – прописываем в общем блоке плагинов и ставим keep=”true”;
если только в конкретной сцене – то оформляем внутри сцены (атрибут keep в этом случае можно не менять, он по умолчанию равен false);
если же необходимо, чтобы элемент начал работать начиная со сцены N и далее сохранился во всем туре – то прописываем его в сцене N и ставим keep=”true”.
В случае линзовых эффектов нам как раз надо чтобы они работали в сцене panorama1 и не работали в panorama2.
Скопируем в корень проекта файл krpano_default_flares.jpg.
В данном случае именно в корень, т.к. путь к изображениям линзовых эффектов задается при помощи сетов\стилей, а это выходит за рамки данной статьи. Так что воспользуемся настройками по умолчанию (а в них прописано, что изображение должно лежать в корне).
А также скопируем из предыдущего урока строку:
<lensflare name="lf0" set="DEFAULT" visible="true" ath="-138.7916" atv="-50.7045" size="0.80" blind="0.60" blindcurve="4.00" />
И поместим ее в первую сцену.
Можно задать атрибут keep=”false”, но в этом нет необходимости, т.к. по умолчанию он этому и равен.
Получится следующий код.
<krpano version="1.0.8.14" onstart="loadscene(panorama2);" >
<plugin name="logo"
align="righttop"
y="5"
x="5"
url="%SWFPATH%/images/logo.png"
alpha="0.5"
keep="true"
onover="tween(plugin[logo].alpha, 1.0, 0.5)"
onout="tween(plugin[logo].alpha, 0.5, 0.5)"
onclick="openurl('http://www.1panorama.ru', _blank)"
/>
<scene name="panorama1" >
<view hlookat="0" vlookat="0" fovtype="MFOV" fov="90" maxpixelzoom="1.0" fovmax="120" limitview="auto" />
<preview url="%SWFPATH%/panoramas/panorama1.tiles/preview.jpg" />
<image>
<cube url="%SWFPATH%/panoramas/panorama1.tiles/pano_%s.jpg" />
</image>
<hotspot name="spot1-2" url="%SWFPATH%/images/hotspot.png"
ath="-105" atv="-4"
crop="0|0|26|26" onovercrop="0|26|26|26"
onclick="loadscene(panorama2);"
/>
<lensflare name="lf0" set="DEFAULT" visible="true" ath="-138.7916" atv="-50.7045" size="0.80" blind="0.60" blindcurve="4.00" />
</scene>
<scene name="panorama2" >
<view hlookat="0" vlookat="0" fovtype="MFOV" fov="90" maxpixelzoom="1.0" fovmax="120" limitview="auto" />
<preview url="%SWFPATH%/panoramas/panorama2.tiles/preview.jpg" />
<image>
<cube url="%SWFPATH%/panoramas/panorama2.tiles/pano_%s.jpg" />
</image>
<hotspot name="spot2-1" url="%SWFPATH%/images/hotspot.png"
ath="0" atv="0"
crop="0|0|26|26" onovercrop="0|26|26|26"
onclick="loadscene(panorama1);"
/>
</scene>
</krpano>
После запуска виртуального тура видно, что в первой сцене у нас линзовые эффекты от солнца, а во втором отсутствуют. Т.е. мы ограничили область видимости элемента тура.
Реализации заставки к виртуальному туру
При добавлении заставки к виртуальному туру необходимо решить где прописывать ее плагины: в общем блоке или в сценах.
Теоретически можно их оформить в первой сцене, ведь у нас она показывается только один раз, при старте тура. Но в этом случае если мы изменим сцену, с которой стартует виртуальный тур (как в нашем случае, он стартует сейчас со сцены panorama2), то придется перекидывать плагины в другую сцену. Поэтому поступим более гибко – пропишем плагины отвечающие за заставку в общем блоке, и добавим атрибут keep=”true”. В этом случае она будет показываться при старте независимо от того какая первая сцена была загружена.
Скопируйте плагины из кода третьего урока отвечающего за заставку: button и intro. Поменяйте пути к изображениям аналогичным образом в атрибуте url, и добавьте атрибут keep=”true”.
Помимо этого скопируйте экшен, который отвечает за закрытие заставки: hideintro.
У экшенов атрибут keep не предусмотрен, у них ограничения области видимости не существуют.
Получится следующий код:
<krpano version="1.0.8.14" onstart="loadscene(panorama2);" >
<plugin name="logo"
align="righttop"
y="5"
x="5"
url="%SWFPATH%/images/logo.png"
alpha="0.5"
keep="true"
onover="tween(plugin[logo].alpha, 1.0, 0.5)"
onout="tween(plugin[logo].alpha, 0.5, 0.5)"
onclick="openurl('http://www.1panorama.ru', _blank)"
/>
<plugin name="intro"
url="%SWFPATH%/images/intro.png"
align="center"
alpha="0"
keep="true"
onloaded="tween(plugin[intro].alpha,1,1)"
/>
<plugin name="button"
url="%SWFPATH%/images/button.png"
align="center"
keep="true"
alpha="0"
x="150"
y="-50"
crop="0|0|24|24"
onovercrop="0|24|24|24"
ondowncrop="0|48|24|24"
onloaded="tween(plugin[button].alpha,1,1)"
onclick="hideintro();"
/>
<action name="hideintro">
tween(plugin[intro].alpha,0,1);
set(plugin[intro].enabled, false);
tween(plugin[button].alpha,0,1);
set(plugin[button].enabled, false);
</action>
<scene name="panorama1" >
<view hlookat="0" vlookat="0" fovtype="MFOV" fov="90" maxpixelzoom="1.0" fovmax="120" limitview="auto" />
<preview url="%SWFPATH%/panoramas/panorama1.tiles/preview.jpg" />
<image>
<cube url="%SWFPATH%/panoramas/panorama1.tiles/pano_%s.jpg" />
</image>
<hotspot name="spot1-2" url="%SWFPATH%/images/hotspot.png"
ath="-105" atv="-4"
crop="0|0|26|26" onovercrop="0|26|26|26"
onclick="loadscene(panorama2);"
/>
<lensflare name="lf0" set="DEFAULT" visible="true" ath="-138.7916" atv="-50.7045" size="0.80" blind="0.60" blindcurve="4.00" />
</scene>
<scene name="panorama2" >
<view hlookat="0" vlookat="0" fovtype="MFOV" fov="90" maxpixelzoom="1.0" fovmax="120" limitview="auto" />
<preview url="%SWFPATH%/panoramas/panorama2.tiles/preview.jpg" />
<image>
<cube url="%SWFPATH%/panoramas/panorama2.tiles/pano_%s.jpg" />
</image>
<hotspot name="spot2-1" url="%SWFPATH%/images/hotspot.png"
ath="0" atv="0"
crop="0|0|26|26" onovercrop="0|26|26|26"
onclick="loadscene(panorama1);"
/>
</scene>
</krpano>
Создание кнопок управления панорамами в виртуальном туре
Реализуем кнопки управление полноэкранный\оконный режим, включить\отключить автовращение.
Понятно, что они нам необходимы во всем туре, следовательно надо их плагины поместить в общий блок. Скопируйте плагины из кода 3-го урока: openfullscreen, closefullscreen, offrotate,onrotate.
Как и в прошлом параграфе – доработайте атрибут url, и добавьте атрибут keep=”true”.
Также скопируйте строку стартового включения автовращения:
<autorotate enabled="true"/>
и тоже добавьте в общий блок.
Помимо этого поменяйте первую строку тура так, чтобы изначально грузилась первая панорама (на ней лучше видны кнопки управления панорамами).
В результате получится код:
<krpano version="1.0.8.14" onstart="loadscene(panorama1);" >
<plugin name="logo"
align="righttop"
y="5"
x="5"
url="%SWFPATH%/images/logo.png"
alpha="0.5"
keep="true"
onover="tween(plugin[logo].alpha, 1.0, 0.5)"
onout="tween(plugin[logo].alpha, 0.5, 0.5)"
onclick="openurl('http://www.1panorama.ru', _blank)"
/>
<plugin name="intro"
url="%SWFPATH%/images/intro.png"
align="center"
alpha="0"
keep="true"
onloaded="tween(plugin[intro].alpha,1,1)"
/>
<plugin name="button"
url="%SWFPATH%/images/button.png"
align="center"
keep="true"
alpha="0"
x="150"
y="-50"
crop="0|0|24|24"
onovercrop="0|24|24|24"
ondowncrop="0|48|24|24"
onloaded="tween(plugin[button].alpha,1,1)"
onclick="hideintro();"
/>
<plugin name="openfullscreen"
url="%SWFPATH%/images/buttoncontrol.png"
align="bottomright"
keep="true"
y="10"
x="10"
visible="true"
crop="0|0|30|30"
onovercrop="0|30|30|30"
onclick="set(fullscreen,true); set(plugin[openfullscreen].visible,false); set(plugin[closefullscreen].visible,true);"
/>
<plugin name="closefullscreen"
url="%SWFPATH%/images/buttoncontrol.png"
align="bottomright"
keep="true"
y="10"
x="10"
visible="false"
crop="30|0|30|30"
onovercrop="30|30|30|30"
onclick="set(fullscreen,false); set(plugin[openfullscreen].visible,true); set(plugin[closefullscreen].visible,false);"
/>
<plugin name="offrotate"
url="%SWFPATH%/images/buttoncontrol.png"
align="bottomright"
keep="true"
y="10"
x="50"
visible="true"
crop="90|0|30|30"
onovercrop="90|30|30|30"
onclick="set(autorotate.enabled,false); set(plugin[onrotate].visible,true); set(plugin[offrotate].visible,false);"
/>
<plugin name="onrotate"
url="%SWFPATH%/images/buttoncontrol.png"
align="bottomright"
keep="true"
y="10"
x="50"
visible="false"
crop="60|0|30|30"
onovercrop="60|30|30|30"
onclick="set(autorotate.enabled,true); set(plugin[onrotate].visible,false); set(plugin[offrotate].visible,true);"
/>
<autorotate enabled="true"/>
<action name="hideintro">
tween(plugin[intro].alpha,0,1);
set(plugin[intro].enabled, false);
tween(plugin[button].alpha,0,1);
set(plugin[button].enabled, false);
</action>
<scene name="panorama1" onstart="startscene();" >
<view hlookat="0" vlookat="0" fovtype="MFOV" fov="90" maxpixelzoom="1.0" fovmax="120" limitview="auto" />
<preview url="%SWFPATH%/panoramas/panorama1.tiles/preview.jpg" />
<image>
<cube url="%SWFPATH%/panoramas/panorama1.tiles/pano_%s.jpg" />
</image>
<hotspot name="spot1-2" url="%SWFPATH%/images/hotspot.png"
ath="-105" atv="-4"
crop="0|0|26|26" onovercrop="0|26|26|26"
onclick="loadscene(panorama2);"
/>
<lensflare name="lf0" set="DEFAULT" visible="true" ath="-138.7916" atv="-50.7045" size="0.80" blind="0.60" blindcurve="4.00" />
</scene>
<scene name="panorama2" >
<view hlookat="0" vlookat="0" fovtype="MFOV" fov="90" maxpixelzoom="1.0" fovmax="120" limitview="auto" />
<preview url="%SWFPATH%/panoramas/panorama2.tiles/preview.jpg" />
<image>
<cube url="%SWFPATH%/panoramas/panorama2.tiles/pano_%s.jpg" />
</image>
<hotspot name="spot2-1" url="%SWFPATH%/images/hotspot.png"
ath="0" atv="0"
crop="0|0|26|26" onovercrop="0|26|26|26"
onclick="loadscene(panorama1);"
/>
</scene>
</krpano>
В результате у нас получилось реализовать весь функционал панорамы из урока Экшены, кнопки. Создание заставки панорамы, но уже в рамках виртуального тура.
В следующих уроках продолжится работа над текущим туром. Будут реализованы более сложные элементы виртуального тура, а также помимо этого попробуем оптимизировать отдельные работы над турами.