Добавляем в 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!

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

Добавить комментарий

Ваш адрес email не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.