零元学Expression Blend 4 - Chapter 23 Deep Zoom Composer与Deep Zoom功能

原文:零元学Expression Blend 4 - Chapter 23 Deep Zoom Composer与Deep Zoom功能

最近有机会在工作上用到Deep Zoom这个功能，我就顺便介绍一下这个一直很夯的功能吧!





虽然有很多前辈已经写过Deep Zoom的相关介绍文章了，但我想用自己的方式再把Deep Zoom这个功能整理的更完整一点。

?

最近有机会在工作上用到Deep Zoom这个功能，我就顺便介绍一下这个一直很夯的功能吧!

?

虽然有很多前辈已经写过Deep Zoom的相关介绍文章了，但我想用自己的方式再把Deep Zoom这个功能整理的更完整一点。

?

下面这个网站是一个很经典的Deep Zoom范例，如果有参加微软的座谈会或是发表会的朋友应该会觉得很眼熟：

动动你的滑鼠滚轮玩看看吧!

<Hard Rock Cafe Memorabilia >http://memorabilia.hardrock.com/

?

接着，我先引用Msdn对Deep Zoom这个功能的介绍来开场

?

Deep Zoom 档案格式

如果使用者，放大大型影像的特定区域，则只会下载需要显示这些特定区域的并排显示部分。

如此一来可以大幅节省频宽，因为使用者通常只对大型影像的某些部分感兴趣。

下图显示影像金字塔的概念式外观，影像会储存为并排显示的影像金字塔。

在金字塔的每一层，影像都会以系数 4 缩小 (每一个尺寸的系数为 2)。

同时，影像会并排显示为 256x256 图块。

?

假设您放大影像仅查看影像之反白显示的中间部分，则 Deep Zoom 只会载入反白显示的并排，而不会显示整个 1024x1024 影像。

?

Deep Zoom 案例

Deep Zoom 可用於许多不同的地方，不过有三个主要状况特别适合使用 Deep Zoom。

(一)浏览超大型或高解析度的影像：

典型的例子即是将大型地图的几个区域放大以不同详细程度来观看，然後使用滑鼠在地图上移动检视区。当使用者移动检视区时，则利用动画让使用者感觉他们是从影像的某个地方「移动」到另一个地方。另一个例子是浏览由高解析相片构成的专业级相片构图。

?

(二)立体摄影：

连续对房间拍照，以产生能构成一张房间 360 度图片的一组相片。将相片拼在一起，使用者即可上下左右观看房间。

?

(三)广告：

可以建立解析度相对较低的影像以呈现广告的完整主题，接着再建立解析度较高且包含更多产品外观细节与资料的影像。

当包含广告的页面首次载入时，将会接连载入较高解析度的影像，让广告逐渐且流畅地变得愈来愈清晰，以引起观看者的注意。

由於广告以渐进方式载入，因此广告对使用者整体的网站使用体验不会有明显的影响。除此之外，当使用者将滑鼠移到广告上时，广告的不同部分将会放大。

?

Deep Zoom 功能

Deep Zoom 使用多重解析度影像，达成较高的画面播放速率，并提供快速开启超大影像的体验。

在载入时，只需要载入少量资料，以便在萤幕上快速地显示一些内容。初始载入体验是要显示影像的低解析度版本，然後再混合可以使用的较高解析度版本。

这是 Deep Zoom 可营造由模糊变清晰之体验的原因，也说明了为什麽不论影像大小，Deep Zoom 似乎都能够立即开启影像，而且载入影像资料的等待时间也不长。

除了初始载入之外，使用者在与应用程式互动 (例如缩放和移动) 时也会有相同的行为体验。

?

?

接着进入正题噜!

?

01

要制作Deep Zoom效果，我们必须要运用Deep Zoom Composer这个软体配合着Blend进行

请先下载Deep Zoom Composer

下载完成後，执行安装：

?

安装完成，你可以发现他被整合於Expression下：

?

02

开启Deep Zoom Composer：

?

建立一个新档案：

?

03

在Import模式下，视窗画面右上方会有一个Add image…

请点击此钮，让我们来加入图片

?

可以一次选取全部或单张

?

按下开启旧档完成後，图片就被载入到专案内

?

04

接着我们切到Compose模式

?

画面最下方会有你置入的所有图片，请拖拉你要的图片放到中间的工作区：

(Deep Zoom Composer内建了对齐线)

已拉入的图片会在下排工作列中变淡。

?

你也可以一次放入全部的图片

?

再使用内建排列工具来调整位置

(如果遇到上千张图片，这可是很方便的工具喔!)

?

Deep Zoom Composer 也建有图层观念：

使用Layer下的上下箭头来调整图层

?

也可以点选後方的眼睛图案隐藏该图片：

?

05

在图片上单击滑鼠右键，我们看看还有什麽功能：

?

今天小猴子仅对External Link(外部连结)跟Internal Link(内部连结)做介绍

?

External Link：

在图片上单击右键後，点选Add External Link 会出现外部连结管理视窗，如下图：

(不能新建URL吗?请点击Existing URLs旁的文件图示一下)

?

建立完成後，你可以在External Links的管理表上看到新建立的Link

?

Internal Link：

我做了一个范例，这样比较可以看的出Internal Link的功能

?

我做了海边、景点以及饭店(皆为jpg图片而已)准备当成我等等内部连结的对应图片

接着，我在海边上点右键->Add Internal Link

出现Direct Link後选一张图片，按下右下角的OK

?

在Internal Links 可以看到，海边->帆船图，这就表示，当使用者点选海边後，就会跳到这帆船图来

?

都完成後，切换到Export模式，我们要进入Deep Zoom Composer内的最後阶段：

在右侧会有一个Settings功能表

?

在Output type类别中，选择其中一个选项：

选择 [Silverlight Deep Zoom]，则会产出 Silverlight Deep Zoom 影像。

若选择 [Seadragon Ajax]，则会产出Seadragon Ajax Deep Zoom 影像。

?

06

Export options 类别中，选择Composition 与 Collection有什麽不同呢?

我发现艾小克大大有很详细的介绍喔!所以我就不多做介绍了。

?

?

按下Preview看看成果：

您应该会看到 Deep Zoom 影像填满整个浏览器视窗

有发现影像一开始很模糊，然後才变清晰吗?

?

07

?

那该如何把做好的Deep Zoom放进Blend呢?

有了 Deep Zoom 影像之後，您必须有 Deep Zoom 物件 (例如 MultiScaleImage) 才能在Blend载入它。

?

在Properties->Common Properties的Source载入刚刚制作好的档案

?

你可以在Expression资料夹内的Deep Zoom Composer Projects里，找到Export Data内档名有_output的xml档

?

我们看看放入Deep Zoom後的Xaml

		   1: <MultiScaleImage Margin=”0” Source="source/dzc_output.xml" />

?

接下来就可以使用熟悉的Blend继续你的专案噜!

?

?

本篇的教学就到此。

?

?

?

(若有任何错误的地方，请各位前辈或同好能不吝指教，小女子都会虚心接受；若是你喜欢我的教学，请给我点鼓励，谢谢。)

?

一步一步迈向HIE之路

喜欢我文章请推我一下或给我个回应，你的鼓励会给我无限的动力喔!

若是您有其他问题或是特别需要，请在文章回应处留言，我会尽快回覆您