Волшебство! Именно так воспринимает зритель, впервые столкнувшись с активными круговыми панорамами. Конечно, лучше и вам их вначале увидеть.

Введение

Волшебство! Именно так воспринимает зритель, впервые столкнувшись с активными круговыми панорамами. Конечно, лучше и вам их вначале увидеть. Например, вы можете зайти на сайт автора статьи www.titorov.ru в разделе портфолио найти проект «Виртуальный горсовет» (рис. 1).

Как выглядят активные круговые панорамы
Рис. 1. Как выглядят активные круговые панорамы.

Передвигая мышь вправо-влево, изображение города «оживает» и тоже начинает перемещаться. Появляется эффект присутствия в данном месте.
Для создания круговых активных панорам используется две основные технологии. Во-первых, в графическом редакторе создается круговое панорамное изображение. А во-вторых, с помощью технологии Flash создается программный код, который оживляет фотографию, заставляя ее вращаться.

 

Автор статьи использовал Adobe Photoshop CS и Macromedia Flash MX 2004, но вы сможете повторить работу и в других версиях программы, как ранних, так и более современных.

Данная статья знакомит вас с этапами выполнения проекта. На сайте автора статьи (www.titorov.ru/edu/panorama) можно скачать финальный файл с проектом.

Создание панорам в Adobe Photoshop

Большинство цифровых изображений – это прямоугольники, с соотношением сторон четыре к трем, либо имеющих значение близкое к ним. Панорамное же изображение относительно невелико по высоте и имеет большой размер по длине, чтобы охватить все видимое пространство в какой-то точке. К тому же края такого изображения подобраны так, что позволяют произвести склейку картинки «без шва» (рис. 2).

Панорамное изображение
Рис. 2. Панорамное изображение.

При создании панорамы необходимы фотографии, имеющие пересекающие участки. В дальнейшем отдельные фрагменты программно склеиваются в одно целое (рис. 3).

Основной принцип создания панорам – совмещение фотографий
Рис. 3. Основной принцип создания панорам – совмещение фотографий.

Для создания панорамного изображения можно использовать различные инструменты. Так, многие современные цифровые фотоаппараты имеют встроенную функцию создания панорам. Также в последних версиях Adobe Photoshop есть команда для автоматической сшивки фотографий (Файл – Автоматизация – Объединение фото). К сожалению, далеко не каждые снимки получается объединить качественно, особенно если на них присутствуют движущиеся объекты (рис. 4).

втоматические способы совмещения действуют далеко не всегда
Рис. 4. Автоматические способы совмещения действуют далеко не всегда.

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

Вначале нам нужно сделать несколько снимков, полностью охватывающих некоторую точку пространства. Все фотографии делаются «с запасом», каждое должно содержать область, пересекаемую с предыдущим изображениями. Размер пересечения должен быть значителен, не менее двадцати процентов. При фотографировании желательно использовать штатив, но, впрочем, и без него можно достичь приемлемых результатов.

Откройте все полученные изображения в графическом редакторе Adobe Photoshop и перенесите их на один холст, разместив их на разных слоях (рис. 5).

 

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

На рисунке изображение состоит из пяти слоев
Рис. 5. На рисунке изображение состоит из пяти слоев.

Так как современные фотоаппараты создают снимки, состоящие из большого количества пикселей (например, исходные файлы для этой панорамы имели размер 2272х2112 пикселей), размер многослойного файла может быть очень большим. Работать с ним будет достаточно сложно. Так как мы готовим панорамы для размещения в сети интернет, то можно сразу уменьшить размер изображения, сделав высоту приблизительно 400-600 пикселей (меню Изображение – Размер изображения).

Изменим размер холста, по ширине (меню Изображение – Размер холста) так, чтобы все фрагменты панорамы можно было раздвинуть, и каждый оказался на своем месте.

Распределение слоев на холсте
Рис. 6. Распределение слоев на холсте.

На рисунке нет полного совмещения фрагментов, так как во время съемки происходило смещение фотоаппарата, объекты на улице меняли свое местоположение, да и освещение даже за несколько минут могло меняться значительно. Но все это не страшно, с помощью инструментов Adobe Photoshop можно исправить эти недочеты.

При совмещении у нас всегда есть два фрагмента нижнее и верхнее, так вот, к верхнему слою нужно добавить «маску». Это дополнительный слой, который управляет видимостью слоя, к которому он примнется. Можно представить маску, как замочную скважину, сквозь которую вы рассматриваете этот слой. Слой-маска может закрашиваться цветами от белого к черному:

  • белые области полностью непрозрачные;
  • черные области полностью прозрачные, маскирующие слой;
  • градации серого создают полупрозрачные области изображения.

При создании маски (меню Маска – Добавить слой маску – Показать все) слой закрашивается белым цветом, это означает, что верхний слой полностью непрозрачен, перекрывает собой слой нижний. Если теперь на слое маске создать градиент от черного к белому, то верхнее изображение будет плавно изменять свою прозрачность и для зрителя нижнее изображение будет плавно перетекать в верхнее (рис. 7).

Возможно, изображение будет несколько двоиться, это означает, что верхнее изображение не точно наложено на нижнее, вам нужно изображение (а не его маску!) переместить вправо-влево, для этого удобно использовать клавиши «Вправо», «Влево» при нажатой клавише Ctrl.

обавления маски к верхнему слою
Рис. 7. Добавления маски к верхнему слою.

Важно отметить, что, работая со слоем-маской, вы не изменяете само изображение, и в любой момент вы можете изменить видимость любого фрагмента. Это особенно важно для тонкой доводки совмещенных изображений. Выбрав инструмент «Кисть», и выбирая соответственно черные и белые цвета, вы можете маскировать верхний слой по своему усмотрению (рис. 8).

Тонкая доводка с помощью инструмента кисть
Рис. 8. Тонкая доводка с помощью инструмента кисть.
Обратите внимание на слой-маску, в нем к градиенту добавлены белые пятна.

Описанную операцию маскирования нужно последовательно применить ко всем слоям. Я советую вам сохранить вашу панораму в отдельном файле и соединить все слои в один (меню Слой – Объединить видимые). Результатом этой достаточно долгой и кропотливой работы станет панорамное изображение, у которого совмещены все фрагменты, но не совмещены края, на схемеони закрашены серым цветом (рис. 9).

Соединение краев панорамы, создание «кольца»
Рис. 9. Соединение краев панорамы, создание «кольца».

Для совмещения краев изображение необходимо разрезать в произвольном месте. Для этого выделите прямоугольную область фотографии инструментом «прямоугольная область» и, щелкнув правой клавишей мыши на выделении, в контекстном меню выберите команду «Вырезать на новый слой». Теперь верхний слой (фрагмент «Б» на схеме) сдвиньте влево, а нижний слой (фрагмент «А») – вправо. Проведите операцию совмещения, описанную выше, еще раз, не забудьте в конце последний раз объединить слои и сохранить полученную панораму в формате jpg.

Оживляем панораму

Полученную панораму необходимо импортировать в Flash (меню Файл – Импортировать на сцену). Изображение конвертировать в клип (меню Модификация – Конвертировать в символ), а под изображением создать кнопку (нарисовать и конвертировать в символ библиотеки, только в типе символа указать «Кнопка»).
Символ библиотеки, размещенный на сцене, называется экземпляром символа и ему можно на панели свойств задать имя, по которому к клипу можно будет обращаться программно (рис. 10).

Панорама импортирована на сцену, превращена в клип
Рис. 10. Панорама импортирована на сцену, превращена в клип
и экземпляру библиотеки присвоено имя «pan1».

При наведении на кнопку панорама должна начать перемещение, для этого нам потребуется конструкция «трехкадровый цикл». Как следует из названия, в нем на отдельном слое создано три ключевых кадра (рис. 11).

 

Подробней о трехкадровом цикле можно прочитать в статье «Основы Flash-программирования»; «Информатика и образование» №№ 11-12 2004 г., № 1 2005 г. либо на сайте автора статьи www.titorov.ru/edu/kurs_flash_prog/

Создание трех кадров
Рис. 11. Создание трех кадров на слое «action».

Каждый кадр выполняет свою функцию. Ниже перечислены назначения кадра, программный код, который вы должны написать для каждого кадра в панели «Action» и комментарии к нему (находятся между символами /* … */).

  • первый кадр содержит начальные параметры;

dx = 10;
stop();
/* dx – переменная, задающая на сколько пикселей будет смещаться панорама, команда stop(); не дает возможности автоматически перейти к последующим кадрам и начать вращение */

  • второй кадр отвечает за единичное смещение панорамы;

if (n == 1) {
pan1._x += dx;
}
if (n == 2) {
pan1._x –= dx;
}
/* В основе единичного смещения – условный оператор. Если во второй кадр передана переменная n равная одному (обратите внимание два знака равенства), то значение свойства _x (координата х) увеличивается на значение dx */

  • третий кадр отвечает за зацикливание.

gotoAndPlay(2);
/* Совершив единичное перемещение Flash-плеер переходит к третьему кадру, а там находится команда вновь вернуться ко второму кадру и следовательно единичное перемещение будет выполняться вновь и вновь. */

Если вы сейчас запустите ваш ролик, то ничего не произойдет, так как в первом кадре команда stop() останавливает дальнейшую программную анимацию. Для запуска добавим программный код к кнопкам. Ниже приведен код для кнопки, перемещающей фотографию вправо.

 

Вообще-то, нажимая на кнопку вправо, мы словно хотим посмотреть, что там находится и панорама, должна начать перемещаться влево. Именно на такой метафоре основаны все прокрутке в компьютере. Сравните, при чтении документа мы нажимаем кнопку вниз, а текст прокручивается вверх. Но мы для простоты будем считать «вправо» относится и к кнопке и к панораме.

on (rollOver) {
n = 1;
gotoAndPlay(2);
}
on (rollOut) {
n = 0;
stop();
}
/* Здесь описываются действия для двух событий: rollOver – наведение мыши на кнопку и rollOut – убирание мыши с кнопки. При наведении во второй кадр передается значение переменной n.*/

Запустив ролик теперь мы увидим, как панорама начнет перемещаться, уезжая за край холста. Для того чтобы зациклить движение, создать эффект непрерывного кружения на месте нам потребуется два экземпляра символа панорамы (рис. 12).

Принцип «вечного вращения»
Рис. 12. Принцип «вечного вращения». Прямоугольник на заднем плане – холст.

На основной сцене находятся два экземпляра одного и того же символа библиотеки. Обе панорамы располагаются «встык» так, чтобы шва не было видно (1). Каждый экземпляр имеет уникальное имя, задаваемое на панели свойств, например, pan1 и pan2. При нажатии кнопки вправо, оба экземпляра начинают одновременно перемещаться вправо (2). При достижении некоторой точки панорама, ушедшая за границу холста перепрыгивает влево (3) и все продолжается сначала.

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

d = pan1._width;
/* В переменную d значение длины панорамы, оно нам нужно будет чтобы выполнять смещение во втором кадре.*/

А во втором кадре добавить проверку, не достиг ли каждый фрагмент границы, при которой нужно совершить «прыжок».

if (n == 1) {
pan1._x += dx;
pan2._x += dx;
if (pan1._x>1000) {
pan1._x = pan1._x-2*d;
}
if (pan2._x>1000) {
pan2._x = pan2._x-2*d;
}
}
if (n == 2) {
pan1._x -= dx;
pan2._x -= dx;
if (pan1._x<-3000) {
pan1._x = pan1._x+2*d;
}
if (pan2._x<-3000) {
pan2._x = pan2._x+2*d;
}
}
/* Так как в моем случае длина панорамы более 2000 пикселей, то правая граница мной принята в 1000 пикселей, а левая в -3000 пикселей. У вас эти значения могут несколько изменяться.*/

Осталось совсем немного, на отдельном слое создать экран, на который смотрит зритель. Форма и цвет экрана может быть произвольными. Для слоя задайте тип «маска» (правый щелчок на слое и в контекстном меню выбираем «маска»).

Добавление маски к панораме
Рис. 13. Добавление маски к панораме.

Можно опубликовать полученный ролик (меню файл - Публикация). Размер полученного swf-файла в примере получился менее 500 КБ. Его при желании можно опубликовать в сети интернет, одновременно создается html-файл с кодом, который можно внедрить в любую интернет страницу.

 

Удивительно, но исходный файл с фотографией панорамы в формате jpg занимает 625 КБ.

Дальнейшее развитие проекта

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

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

Эти приемы можно увидеть еще в одном проекте автора статьи www.titorov.ru/design/flash_kedrko Важно отметить, что проекты для коммерческих и государственных структур, очень быстро пришли в школу и на спецкурсах ученики с интересом создают свои круговые панорамы. Так, начиная с 2006 года, в Классическом Лицее города Кемерово живет проект «С любовью к городу». В нем учащиеся информационно-технологического профиля создают панорамы красивых мест родного города. После этого кусочки соединяются в единый проект и он размещается в сети Интернет www.gkl-kemerovo.ru

Проект является социально-значимым, помимо развития навыков работы с графической информацией и программированием, его главная цель – формирование уважения, любви к родному городу. Хочется подчеркнуть несколько важных моментов:

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

Файлы для примера, описанного в этой статье были выполнены ученицами 11 «Д» класса МНОУ «Лицей» г. Кемерово Богуновой Дарьей и Мищенко Лизой в 2007 году.

Надеюсь, что эта статья поможет и вам создавать вместе со своими учениками интересные проекты. Вы можете задать свои вопросы и написать свои комментарии автору.

информация о работе:
автор: Титоров Даниил
создание: июнь 2008 г.
публикация: научно-методический журнал «Информатика и образование» №12 2008 г.

файл с проектом zip-фрхив (600 КБ)