Deep Zoom и Deep Zoom Composer

Технология Deep Zoom позволяет работать с большими изображениями (плакатами), перемещая их, увеличивая или уменьшая. Например, если имеется информативная страница со множеством элементов. Надписи на них сложно прочитать. Но если приблизить картинку, то надписи становятся легко читаемыми, при этом, не теряя своего качества. Данная технология позволяет создавать насыщенные фотографиями сайты (интернет магазины, сайты социальных сетей, …), создавать большие меню. При этом, трафик расходуется оптимально: "качается" только та часть картинки, которая в данный момент на экране. Естественно, происходит кэширование уже "скачанных" частей.

Данные части можно назвать "пазлами". Картинка автоматически делится на необходимое число пазлов. При разной степени увеличения отображается разное число пазлов, чем выше, тем больше. Первоначально отображается 1 пазл, затем 4, затем 16. Главное, чтобы качество всей картинки оставалось максимальным. Переход из одного состояния в другое осуществляется плавно и незаметно для пользователя (см. рис. 5.1).

увеличить изображение
Рис. 5.1. Пазлы в Deep Zoom

Удобным инструментом для создания Silverlight приложения, использующего технологию Deep Zoom, является Deep Zoom Composer 3.0, доступный для скачивания с июля 2009 г. Суть процесса создания приложения такова: сначала подготавливаются картинки и импортируются в проект Deep Zoom. Затем импортированные картинки располагаем на экране будущего приложения в произвольном порядке, согласно фантазии дизайнера. Каждая картинка имеет свой размер на полотне. Если нужно, создаются слайдшоу и веб ссылки. В конечном итоге экспортируем проект Deep Zoom в проект Visual Studio.

Примеры реализации Deep Zoom

http://www.vertigo.com/deepzoom.aspx - пример меню.

http://www.silverlightshow.net/olympics - символы олимпиад, начиная с олимпиады в Афинах 1896 года.

http://memorabilia.hardrock.com - символы хард-рока. Гитары, одежда и т.д. известных исполнителей.

http://livelabs.com/seadragon-ajax - велосипед

http://deepzoompix.com/Default.aspx?pzRedir=true - сайт PhotoZoom

Импорт картинок

Импорт картинок в Deep Zoom Composer осуществляется в окне "Import". Это можно сделать переносом Drag&Drop из Windows Explorer, либо клавишей "Add image". Затем переходим в окно "Compose" для создания композиции.

увеличить изображение
Рис. 5.2. Импорт картинок в Deep Zoom Composer

Создание композиции

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

увеличить изображение
Рис. 5.3. Создание композиции в Deep Zoom Composer

Навигация при помощи слайдшоу

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

Чтобы составить слайдшоу надо воспользоваться функцией Drag&Drop, перетащив слайд со вкладки "Layers". Порядок показа слайдов регулируется клавишами "вверх", "вниз".

увеличить изображение
Рис. 5.4. Создание слайдшоу в DeepZoomComposer