5. Створення віртуального туру. Структура туру «1panorama

1. Про що тут?
2. Що потрібно?
3. Загальна структура віртуального туру на krpano
4. Обмеження області видимості елементів туру. Атрибут keep
5. Реалізації заставки до віртуального туру
6. Створення кнопок управління панорамами в віртуальному турі
7. Всі статті по роботі з krpano

У цій статті продовжимо роботу над віртуальним туром і більш докладно зупинимося на його структурі.

Про що тут?

У минулому уроці ми створили найпростіший віртуальний тур: 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 є обмеження області видимості елементів туру. Під видимістю тут мається на увазі видимість з точки зору 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.

В даному випадку саме в корінь, тому що шлях до зображень лінзових ефектів задається за допомогою сетів \ стилів, а це виходить за рамки даної статті. Так що будемо використовувати настройками за замовчуванням (а в них прописано, що зображення повинно лежати в корені).

А також скопіюємо з попереднього уроку рядок:

І помістимо її в першу сцену.

Можна задати атрибут keep = "false", але в цьому немає необхідності, тому що за замовчуванням він цього і дорівнює.

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

Після запуску віртуального туру видно, що в першій сцені у нас лінзові ефекти від сонця, а в другому відсутні. Тобто ми обмежили область видимості елемента туру.

Реалізації заставки до віртуального туру

При додаванні заставки до віртуального туру необхідно вирішити де прописувати її плагіни: в загальному блоці або в сценах.

Теоретично можна їх оформити в першій сцені, адже у нас вона показується тільки один раз, при старті туру. Але в цьому випадку якщо ми змінимо сцену, з якої стартує віртуальний тур (як в нашому випадку, він стартує зараз зі сцени panorama2), то доведеться перекидати плагіни в іншу сцену. Тому зробимо більш гнучко - пропишемо плагіни відповідають за заставку в загальному блоці, і додамо атрибут keep = "true". В цьому випадку вона буде показуватися при старті незалежно від того яка перша сцена була завантажена.

Скопіюйте плагіни з коду третього уроку відповідає за заставку: button і intro. Поміняйте шляху до зображень аналогічним чином в атрибуті url, і додайте атрибут keep = "true".

Крім цього скопіюйте екшен, який відповідає за закриття заставки: hideintro.

У екшенів атрибут keep не передбачений, у них обмеження області видимості не існують.

Вийде наступний код:

Створення кнопок управління панорамами в віртуальному турі

Реалізуємо кнопки управління повноекранний \ віконний режим, включити \ відключити автовращеніе.

Зрозуміло, що вони нам необхідні в усьому турі, отже треба їх плагіни помістити в загальний блок. Скопіюйте плагіни з коду 3-го уроку: openfullscreen, closefullscreen, offrotate, onrotate.

Як і в попередньому параграфі - доопрацювати атрибут url, і додайте атрибут keep = "true".

Також скопіюйте рядок стартового включення автовращенія:

і теж додайте в загальний блок.

Крім цього поміняйте перший рядок туру так, щоб спочатку вантажилася перша панорама (на ній краще видно кнопки управління панорамами).

В результаті вийде код:

В результаті у нас вийшло реалізувати весь функціонал панорами з уроку Екшени, кнопки. Створення заставки панорами , Але вже в рамках віртуального туру.

У наступних уроках продовжиться робота над поточним туром. Будуть реалізовані більш складні елементи віртуального туру, а також крім цього спробуємо оптимізувати окремі роботи над турами.

Всі статті по роботі з krpano

Залишилися питання?