原文:零元学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这个功能的介绍来开场
?
如果使用者，放大大型影像的特定区域，则只会下载需要显示这些特定区域的并排显示部分。
如此一来可以大幅节省频宽，因为使用者通常只对大型影像的某些部分感兴趣。
下图显示影像金字塔的概念式外观，影像会储存为并排显示的影像金字塔。
在金字塔的每一层，影像都会以系数 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之路
喜欢我文章请推我一下或给我个回应，你的鼓励会给我无限的动力喔!
若是您有其他问题或是特别需要，请在文章回应处留言，我会尽快回覆您