По следам… хотя скорее вслед своему ролику на TechDays — обзор Deep Zoom Composer и того, что не вошло в ролик (minutes cut).
Уверен, вы уже неоднократно видели и слышали про проект Memorabilia HardRock Cafe, выполненный усилиями компании Vertigo (⇒ История проекта).
Memorabilia — проект, конечно, уникальный — в особенности по части контента, но тем не менее proof of concept весьма хороший. Самая что ни на есть интерактивная online-галерея.
Насколько сложно сделать что-нибудь похожее? В смысле из своих собственных фотографий…
Или вот еще пример:
Как? Вы еще не видели? :) Только сильно не обольщайтесь, сейчас там только 60-е. Кстати, тоже Vertigo делали.
Тут уже сложнее — для поиска было проиндексировано содержание, но интерактивности от галереи это никак не отнимает, скорее даже наоборот.
Это все Vertigo. Они молодцы — выстроили под это дело целую инфраструктуру — называется Vertigo BigPicture™. А нам бы как-нибудь по-простому и быстренько.
Тут на сцену выходит…
Простая, бесплатная программа для создания собственных галерей фотографий и изображений. Кушает даже большие и очень большие.
Скачать Deep Zoom Composer можно тут: http://cut.ms/iLu.
Обратите внимание, как много команд приложило усилий к созданию и развитию этого проекта, Israel Innovation labs — это Microsoft Research. Чувствуете запах пороха?
А внутри — Seadragon (⇒ Что такое Seadragon?). Давайте посмотрим, как это все работает.
Работа в Deep Zoom Composer чрезвычайно проста и поэтому делится на три простых этапа.
1. Импорт. Работает Drag&Drop, можно перетаскивать мышкой или выбирать из меню.
2. Композиция. Внизу список доступных файлов. Справа панель слоев (Layers). По центру — рабочее пространство:
Перетаскиваем файлы из списка в рабочую область. Размещаем относительно друг друга, накладываем друг на друга, меняем размеры.
3. Экспорт. Выбираем способ экспорта — залить на сервер online или сделать локальный проект. Нажимаем соответственно Publish или Export (+Preview) — и получаем нужный результат.
1. Размещение по сетке. Выделяем группу фотографий, щелкаем по ней правой кнопкой, Arrange → Arrange into Grid. Выбираем количество столбцов или строк, расстояние между фотографиями.
Ok. Вуаля…
2. Размещение относительно друг друга. Deep Zoom Composer также помогает размещать объекты рядом, на одном уровне и т.д. Для это работают:
3. Накладывание. Если вы хотите вложить одну фотографию в другую, то можно воспользоваться таким фокусом: сначала увеличить (Zoom!)подложку, а потом перенести фотографию из списка внизу в рабочую область — она сразу будет подходящего размера. Так намного быстрее.
Не забудьте про панель слоев (Layers) справа.
А еще Deep Zoom Composer умеет крестиком вышивать панорамы склеивать — это уже проделки MSR. Кстати, эта же технология используется в Windows Live Photo Gallery и Microsoft ICE — специальной программе для создания панорам (⇒ Подробнее про Microsoft ICE).
Чтобы проделать этот фокус, нужно выдлить серию фотографий, щелкнуть правой кнопкой мыши по выделенной группе → Create Panoramic Photo…
Начнется процесс сращивания фотографий. Дальше останется только обрезать:
Важно, что созданное склеенное (панорамное) изображение тут же импортируется в Deep Zoom Composer и с ним можно продолжать работать.
В релизной (1.0) версии Deep Zoom Composer добавилась целая “серия” новых интересных возможностей по наращиванию интерактивности:
1. Слайдшоу. Проигрывание фотографий в заданном порядке (кстати, работает в полноэкранном режиме). Для создания открываем панель Slideshow и перетаскиваем фотографии из панели Layers:
Внутри фотографии можно перемещать, размещая в нужном порядке.
2. Меню. Меню позволяет 1) создать список фотографий, 2) явно выделить отдельные фотографии (в том числе названием), 3) быстро перейти к конкретной фотографии.
Для создания меню откройте соответствующую вкладку и нажмите кнопку обновить (круговые стрелочки). Создастся меню “по умолчанию” со списком фотографий в рабочей области. Дальше остается только перетасовать, добавить пункты иерархии и там, где надо, переименовать.
3. Ссылки. Ссылки бывают двух видов: внутренние и внешние. Внутренние по клику на фотографию или область делают переход к одной из фотографий или областей. Внешние — открывают указанную страницу в интернете.
Область — это выделенная область в рабочем пространстве (например, на фотографии или изображении). Для создания щелкните по иконке в списке изображений:
далее выберите область:
Теперь эту область можно использовать как “кнопку” или как объект для ссылок.
Чтобы создать внутреннюю ссылку, выберите область или изображение, щелкните правой кнопкой, в меню нажмите Add Internal Link, в открывшемся окне выберите, куда нужно перейти по клику:
Чтобы создать внешнюю ссылку, выберите область или изображение, щелкните правой кнопкой, в меню нажмите Add External Link, в открывшемся окне заполните “карточку” ссылки:
Списки ��сех внешних и внутренних ссылок можно посмотреть в соответствующих меню:
Изображения теперь имеют несколько интересных свойств:
1. Теги. Теги — это замечательная и крайне полезная вещь — они позволяют фильтровать фотографии, примерно так, как это делается в HardRock Memorabilia.
Правда, тут есть один важный нюанс: чтобы теги работали, нужно, чтобы плеер их поддерживал. Плеер по умолчанию, который предлагает Deep Zoom Composer — Deep Zoom Navigation — такой поддержки не имеет. Однако вы можете выбрать в экспорте шаблон Tag Browser:
Получится примерно вот так:
Впрочем, тут самое главное не это, а то, что теги поддерживаются в Silverlight — а тут уже все зависит от вашей фантазии.
2. Подсказки. Они же tooltips. Свойство позволяет вывести подсказку при наведении мыши на фотографию или область:
3. Видимость. Вот эта штука меня сильно позабавила, т.к. нигде толком не описана — пришлось разбираться методам “тыка” и “чтения комментариев”. Отвечают за видимость два простых поля: Min и Max — пойди угадай, что в них писать ;)
Раскрываю секреты. Итак, что же такое “видимость” в контексте Deep Zoom? Это… так называемый семантический зум (Semantic Zoom), когда в зависимости от уровня приближения может показываться то или иное изображение.
Как это работает? Уровни приближения начинаются с самого маленького (1), когда все далеко-далеко и виден только один пиксель. Далее, чем ближе вы рассматриваете, тем больше уровень.
Min указывает, начиная с какого уровня картинка становится видной. По умолчанию 1.
Max указывает, заканчивая каким уровнем картинка еще видна. По умолчанию “самое большое число”.
Если вы указываете оба значения, то картинка видна только между этими уровнями приближения включительно. В определенном смысле, “видимость” позволяет обойти ограничение жесткости слоев.
По мере того, как одно изображение скрывается, за ним может появляться другое, потом второе, третье… это может быть “обложка”, сюрприз — все, на что хватит вашего воображения.
Ключевой вопрос: откуда узнать правильное значение уровня приближения?
Самый простой способ: увеличить (Zoom) до нужного размера картинку в рабочей области, щелкнуть правой кнопкой мыши, в меню выбрать Set Visibility Limits → Set this as minimum или Set this as maximum.
Обратите внимание, что сама рабочая область моделирует видимость тоже, если картинка на текущем уровне приближения “невидима”, то она становится полупрозрачной.
Варианта экспорта коллекции фактически два: залить на online-сервис DeepZoomPix или сохранить локально.
DeepZoomPix. Об этом сервисе можно рассказывать отдельно, но если вкратце, то получится примерно так: 1) Silverlight + Deep Zoom + Windows Azure, 2) Бесплатный хостинг коллекций фотографий из Deep Zoom Composer, 3) Интерактивная online-галерея для ваших фоток с компьютера, facebook, flickr и любой rss-ленты, 4) Вставка галерии в любой блог или сайт.
Сейчас нам особенно интересен второй пункт: экпорт из Deep Zoom Composer. Для экспорта понадобится LiveID:
После входа выбираем альбом или создаем новый, указываем обложку, качество фотографий, жмем Publish.
Ссылку на готовый альбом можно разослать друзьям, либо вставить в блог, скопировав соответствующий код (Share):
Там же справа есть небольшой социальный блок:
Да, кажется, DeepZoomPix пока не поддерживает уровни видимости :(
Локальный экспорт. С локальным экспортом все просто. Выбираем тип вывода:
Images — это просто DeepZoom-коллекция изображений. Silverlight Deep Zoom — это Silverlight-плеер, Seadragon Ajax — плеер на AJAX (JavaScript) (⇒ Использование Seadragon Ajax во Всемирной цифровой библиотеке).
Далее имя, расположение.
Последний блок — выбор способа экспорта изображений. Композиция — это когда все изображения рассматриваются как единое мега-изображение и соответствующим образом дробятся на тайлы. Коллекция — это когда каждое изображение рассматривается отдельно, в коллекции изображениями можно управлять с помощью тегов.
В зависимости от выбранных настроек, могут быть доступны различные шаблоны.
Опять-таки, если вы использовали уровни видимости, то вам будет доступен только экспорт композиции.
Спасибо, что дочитали до конца :)
И Вам Спасибо за подробного описание :)
Куда пропал www.deepzoompix.com ? Уже сколько сколько пытаюсь зайти и не получается.
По-моему, его прикрыли %(