Практикум

Deep Zoom и Deep Zoom Composer

На данном занятии должно быть разработано приложение Silverlight, которое предоставляет доступ к графической информации с помощью технологии Deep Zoom. Для выполнения задания необходимы средства разработки Microsoft Visual Studio 2008 и Deep Zoom Composer 3.0.

Задание

Создать проект в Deep Zoom Composer "автопортреты", экспортировать проект Deep Zoom в проект Silverlight и ASP.NET.

Создание проекта Deep Zoom

Откроем Deep Zoom Composer и создаем новый проект "автопортреты".

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

Добавим автопортреты художников прошлого. Это картинки Леонардо да Винчи.jpg (464x650 пикселов), Лоренцо Джованни.jpg (650x831), Никола Пуссен.jpg (500x594), Рафаэль Санти.jpg (500x696) и Филиппино Липпи.jpg (460x661).

увеличить изображение
Рис. P.41. Добавление изображений в проект Deep Zoom

После добавления увидим добавленные изображения справа. Переходим к составлению композиции по вкладке " Compose ".

увеличить изображение
Рис. P.42. Добавленные изображения в проект Deep Zoom

На панели размещаем импортированные изображения, как позволяет фантазия дизайнера. Deep Zoom Composer позволяет масштабировать изображения как угодно. Например:

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

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

Чтобы создать слайдшоу, необходимо открыть панель "Slideshow" и методом drag&drop перетащить изображения на панель. Создаем нужный порядок. Кнопкамиэтот порядок можно изменить.

увеличить изображение
Рис. P.44. Изготовление слайдшоу Deep Zoom

Чтобы создать меню, необходимо открыть панель "Menu" и методом drag&drop перетащить изображение на панель меню. Название дается автоматически по имени файла, но мы можем его переименовать. Кнопкойможно автоматически создать дерево меню (default menu), согласно вложенности изображений друг в друга. Меню Deep Zoom Composerпозволяет (слева направо):

• автоматическое создание меню по-умолчанию
• удаление пункта меню
• создание нового пункта меню
• повышение уровня вложенности пункта меню
• понижение уровня вложенности пункта меню
• изменение порядка пункта меню вверх
• изменение порядка пункта меню вниз

Рис. P.45. Создание меню Deep Zoom

Чтобы создать систему внутренних переходов, необходимо открыть панель "Internal Links", щелкнуть правой клавишей мыши по изображению, нажатие на которое приведет к переходу, "Add Internal Links".

Рис. P.46. Добавление внутренней ссылки

И затем выбрать изображение, на которое произойдет переход.

увеличить изображение
Рис. P.47. Добавление внутренней ссылки. Выбор ссылки

Чтобы создать систему внешних ссылок, необходимо выбрать в главном меню Deep Zoom Composer выбрать пункт "Tools/Manage External Links". И задать URL ссылки, отображаемое название и описание ссылки. Имя ссылки "Энциклопедия замечательных людей" адрес http://www.abc-people.com/data/bernini/work-1.htm.

увеличить изображение
Рис. P.48. Добавление внешней ссылки

Затем методом drag&drop перетащить изображение "Бернини" на панель внешних ссылок. Откроется окно выбора внешних ссылок. Выбираем нужную ссылку. При нажатии на "Бернини" произойдет переход на сайт с его жизнеописанием.

увеличить изображение
Рис. P.49. Привязка внешней ссылки к изображению

К одной ссылке можно привязать несколько изображений.