原文:零元学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之路
喜欢我文章请推我一下或给我个回应,你的鼓励会给我无限的动力喔!
若是您有其他问题或是特别需要,请在文章回应处留言,我会尽快回覆您