Панорама как для школьника

   В последнее время замечен рост популярности панорамных фотографий. На их основе создаются панорамные обзоры и виртуальные туры. Наибольшое применение этому находим  как в рекламном деле - салон магазина, ресторана, автомобиля, отеля, так и в туризме – панорамы великолепных видов природы и виртуальный тур по музею или театру. Привязать панораму по координатам уже позволяют сделать на своих картах Яндекс.Карты и Гугл.мапс.

Как создать панорамную фотографию.

Один из лучших сайтов посвященных панорамной фотографии здесь.

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

Форматы панорамных фотографий.

Панорамные фотографии передаются клиенту в нескольких форматах. основой для всех форматов вывода является tif файл с соотношением сторон 2:1, из которого можно получить любой формат отображения панорамы - как для Интернета, так и для печати. На данный момент основным форматом воспроизведения панорам является Flash.

Flash Panorama Player
Самый известный flash движок - Flash Panorama Player.
Официальный сайт движка - http://flashpanoramas.com
Форум пользователей и разработчиков - http://www.flashpanos.com
Ресурс, посвященный панорамной фотографии - VRMag http://vrmag.com
Ресурс, посвященный плагинам - http://wirestam.com/panos/Flash/plugins/#picMenu

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

Установка панорамы на страницу
Наглядный пример here.

Если у нас есть html файл, куда мы хотим вставить панораму, то нам нужно сделать следующие действия:
в html файле вставляете ссылку на скрипт- script src="swfobject.js" type="text/javascript"

Далее вставляете блок, в котором указывается размер окна отображения var so = new SWFObject("pano.swf", "pano", "100%", "800", "9", "#282828");
(в данном случае - 100% по ширине окна и 800 пикселей по высоте) и ссылка на xml файл (so.addVariable("xml_file","index.xml")).

script type="text/javascript"
var so = new SWFObject("pano.swf", "pano", "100%", "800", "9", "#282828");
so.addVariable("xml_file","index.xml");
so.addParam("allowFullScreen","true");
so.addParam("allowScriptAccess","sameDomain");
so.write("flashcontent");
window.document["pano"].focus();

Панорама описывается в xml-файле index.xml. Именно XML файл "собирает" панораму из 6 jpg файлов (сторон куба), каждый из которых в конце имени имеет приставку (к примеру _d - нижняя сторона куба). В файле XML мы указываем параметры отображения панорамы и ссылаемся на используемые плагины.

< panorama>
< parameters>
panoName = images/news_pano/2007-12-29_Duma_evening_hall_04__
(где 2007-12-29_Duma_evening_hall_04__ - это название jpg файла без расширения и последнего нижнего подчеркивания)
zoomHome = 0.3 (начальный zoom )
layer_2 = autorotator.swf
(ссылка на плагин автопрокрутки)
layer_4 = openFullscreen.swf (ссылка на плагин раскрывания панорамы на полный экран)
< /parameters>
< autorotator>speed = -0.1 interval = 30 pause = 1 quality = low< /autorotator>
< /panorama>

Именно это свойство отличает Flash Panorama Player от других движков. В Pano2VR, к примеру, фото панорамы вписывается в сам swf-файл, при этом естественно сам файл становится большого размера. А в нашем случае index.xml позволяет поменять панораму в два клика. Судите сами. Отличия от оригинала – это разумеется 6 новых картинок: файлы Google Street View, перекресток в час пик!) И новая запись в параметре “panoName = new”.

Это Все! Новая панорама готова.

Более подробное описание возможностей работы с панорамой Вы можете найти на официальном сайте Flash Panorama Player.

Как наиболее эффективно использовать панораму на странице.

Самая распространенная ошибка - выложить на свой сайт в том виде, в котором мы отдали панорамы. Грамотнее всего будет, если вы дополните уже существующие страницы панорамами и дадите возможность пользователю в отдельном окне загрузить панораму в более высоком разрешении. Панорама в небольшом окне будет "весить" до 200кб. В большем разрешении - до 1-3 Мб. Наиболее удобно, если страница с панорамой в высоком разрешении будет содержать дополнительную информацию - текст, фотографии, звук, а сама панорама будет занимать 70-80% окна. Все равно из этого режима вы можете подключить плагин полноэкранного режима, и панорама будет разворачиваться на полное окно. Панорама - это не панацея и не замена "всего" - это лишь дополнительный эффективный инструмент.

Размер и вес панорамы.

Сейчас панорамы отображаются, используя 6 jpg файлов (стороны куба) - верх, низ, лево, право, перед, зад. Итоговый размер (вес) панорамы будет зависеть от качества, в котором необходимо отобразить панораму и складывается из суммы размеров этих 6 сторон куба. В среднем, flash панорамы весят до 800-900 Kb и в этом качестве могут вполне отображаться на полный экран. Сторона этих панорам - 1000 пикселей, , качество jpg сжатия 50% и каждый из шести файлов весит весят по 150 - 250 кб. Если нужно такую панораму отобразить на странице в небольшом окне со стороной 250 пикселей, тогда есть смысл сделать копии jpg файлов со стороной 300-500 пикселей и сжатием 30-40%. Тогда панорама будет "весить" не 800 Кб, а 250 Кб.  Но, если Вам нужно отображать панорамы на DVD - Вы можете использовать jpg файлы со стороной в 1500 px и качеством jpg в 80-90% - тогда панорама будет весить до 6-9 Мб.

Точки переходов (hotspot).
Точки переходов образуют виртуальный тур. Они устанавливаются в xml файле:
spot pan="0" tilt="0" url="images/arrow.png" linked="images/2008-02-29_Room1_3_final_1500" onClick="loadPano(?panoName=images/2008-02-19_Ayvazovskiy_05)" /

pan="0" tilt="0" - указывают на место, где будет расположена точка
url="images/arrow.png" - какое изображение используется для обозначения перехода
linked="images/2008-02-29_Room1_3_final_1500" - указывается название текущей панорамы
onClick="loadPano(?panoName=images/2008-02-19_Ayvazovskiy_05 - какая панорама загрузится после клика на точке перехода.

В качестве изображения для точки перехода может использоваться практически любое изображение или swf анимация. Чаще всего используют картинку PNG с альфа-каналом.


Штатные возможности.
Широко востребованными возможностями являются:
- приближение отдаление панорамного изображения - с помощью скрол колеса мыши или клавиш Ctrl/Shift
- запуск панорамы в полноэкранном режиме - с помощью соответствующего плагина
- автопрокрутка панорамы - с помощью соответствующего плагина
- точки переходов в виртуальном туре.

Все эти возможности осуществляются с помощью соответствующих плагинов (на которые ссылаетесь в xml файле):

< parameters >
panoName = images/2008-02-19_Ayvazovskiy_05
zoomHome = 0.5
layer_2 = files/autorotator.swf
layer_3 = files/hotspots.swf
layer_4 = files/openFullscreen.swf
< / parameters >


Дополнительные возможности.

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

Замечания.

Хотелось бы заметить, что не всегда нужна кубическая(шаровая) панорама вместо той же цилиндрической(круговой). Почему так ? Судите сами – разве в панораме природы Вам будет интересно что у фотографа было под ногами или какое чистое небо ? Вряд ли)). В таком направлении человек не смотрит и в реальных условиях. Кубическая панорама нужна в салоне автомобиля, в ресторане, возможно в отеле или магазине. Во всех остальных случаях достаточно цилиндрической панорамы. Это сэкономит Вам и место на диске и средства в кошельке.

За оригиналом сюда.