Заметил, что посетители попадают ко мне на сайт по запросу «Как сделать маленькую планету в виртуальном туре», но статьи, в которой было бы об этом подробно рассказано, у меня нет. А ведь создание заставки «маленькая планета» в krpano — совсем несложная затея, и отлично работает «из коробки».
Итак, чтобы сделать заставку в виде маленькой планеты, вам понадобится виртуальный тур, созданный в krpano. Если у вас пока что нет своего тура или лицензии krpano, можете использовать мой тур, скачав его на странице.
Скачав тур и распаковав архив, вы увидите папку примерно такого содержания:
Чтобы посмотреть, как выглядит тур, воспользуйтесь виртуальным сервером krpano.
Чтобы сделать заставку в виде маленькой планеты, вам понадобится стандартная функция, добавленная создателями этого панорамного движка. Открыв файл tour.xml в текстовом редакторе, вы увидите примерно следующие строки:
<krpano version="1.19" title="Virtual Tour">
<include url="skin/vtourskin.xml" />
<skin_settings maps="false"
maps_type="bing"
maps_bing_api_key=""
maps_zoombuttons="false"
gyro="true"
littleplanetintro="false"
title="true"
thumbs="true"
thumbs_width="120" thumbs_height="80" thumbs_padding="10" thumbs_crop="0|40|240|160"
thumbs_opened="false"
thumbs_text="false"
thumbs_dragging="true"
thumbs_onhoverscrolling="false"
thumbs_scrollbuttons="false"
thumbs_scrollindicator="false"
thumbs_loop="false"
tooltips_buttons="false"
tooltips_thumbs="false"
tooltips_hotspots="false"
tooltips_mapspots="false"
deeplinking="false"
loadscene_flags="MERGE"
loadscene_blend="OPENBLEND(0.5, 0.0, 0.75, 0.05, linear)"
loadscene_blend_prev="SLIDEBLEND(0.5, 180, 0.75, linear)"
loadscene_blend_next="SLIDEBLEND(0.5, 0, 0.75, linear)"
loadingtext="loading..."
layout_width="100%"
layout_maxwidth.normal="900"
layout_maxwidth.mobile=""
controlbar_width.normal="-44"
controlbar_width.mobile="100%"
controlbar_height.normal="38"
controlbar_height.mobile="34"
controlbar_offset.normal="22"
controlbar_offset.mobile="0"
controlbar_offset_closed="-40"
controlbar_overlap.normal="7"
controlbar_overlap.mobile="2"
design_skin_images="vtourskin.png"
design_bgcolor="0x000000"
design_bgalpha="0.5"
design_bgborder="0 0xFFFFFF 1.0"
design_bgroundedge.normal="9"
design_bgroundedge.mobile="1"
design_bgshadow="0 0 9 0xFFFFFF 0.5"
design_thumbborder_bgborder="4 0xFFFFFF 1.0"
design_thumbborder_padding="2"
design_thumbborder_bgroundedge="5"
design_text_css="color:#FFFFFF; font-family:Arial; font-weight:bold;"
design_text_shadow="1"
/>
<!--Здесь будет еще много строк кода-->
</krpano>
Здесь нас интересует одна строчка: littleplanetintro=»false» — имено этот параметр отвечает за вызов функции заставки «маленькая планета». Просто поменяйте его на littleplanetintro=»true» и обновите страничку в браузере.
Вот как выглядит этот тур у меня.
Всё, теперь у вас есть заставка «маленькая планета», которая сразу после загрузки браузера красиво перетекает в нормальный ракурс, который вы выбрали для этой панорамы в предыдущем уроке. Маленькая планета запускается только 1 раз, при открытии виртуального тура. Если вы используете deeplinking, то можете скопировать ссылку на любую из панорам виртуального тура, а также ракурс. Открыв тур по этой ссылке, зритель увидит сначала заставку Маленькая планета, а через несколько секунд проекция сменится и покажет зрителю тот ракурс, ссылку на который вы скопировали в адресной строке.
На текущий момент «маленькая планета» работает на всех современных устройствах, в том числе на Android и iOS.
