零元学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之路

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

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

时间: 2024-10-09 02:24:52

零元学Expression Blend 4 - Chapter 23 Deep Zoom Composer与Deep Zoom功能的相关文章

零元学Expression Blend 4 - Chapter 11 用实例了解布局容器系列-「Border」

原文:零元学Expression Blend 4 - Chapter 11 用实例了解布局容器系列-「Border」 将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里的专情王子-「Border」. ? ? 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里的专情王子-「Border」. ? ? 就是要让不会的新手都看的懂! ? <专情王子?查理B> Border是Blend里最简单的布局容器,可以使用Borde

零元学Expression Blend 4 - Chapter 8 用实例了解布局容器系列-「Grid」

原文:零元学Expression Blend 4 - Chapter 8 用实例了解布局容器系列-「Grid」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的是Blend 4 里的布局容器大哥-「Grid」. ? 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的是Blend 4 里的布局容器大哥-「Grid」. ? ? ? 就是要让不会的新手都看的懂! ? ? ? <实至名归的容器大哥> Blend 4内的容器有很多种,比较常运用到的除了有Grid.Can

零元学Expression Blend 4 - Chapter 36 来玩捉迷藏吧!!!看看ScrollBar的Disabled与Hidden之差异

原文:零元学Expression Blend 4 - Chapter 36 来玩捉迷藏吧!!!看看ScrollBar的Disabled与Hidden之差异 本次要针对Disabled以及Hidden作讨论 很多人会把Disabled当成是不显示,因为选单内容有个Visible(翻译为可见or显示) 但其实Disabled是禁用而非不显示,若是想要使之不显示,请使用Hidden作隐藏即可 我想,不显示跟隐藏的意思是雷同的,但与禁用却是相差很远,所以请不要搞混喔~ 隐藏与禁用,在实务上使用起来就是有

零元学Expression Blend 4 - Chapter 3 熟悉操作第一步(制作一个猴子脸)

原文:零元学Expression Blend 4 - Chapter 3 熟悉操作第一步(制作一个猴子脸) 本篇内容会教你如何使用笔刷.钢笔.渐层以及透明度的调整,还有如何转化图层和路径,最重要的是要教你如何建立自己的笔刷. ? 本篇内容会教你如何使用笔刷.钢笔.渐层以及透明度的调整,还有如何转化图层和路径,最重要的是要教你如何建立自己的笔刷. ? ? 就是要让不会的新手都看的懂! ? 01 开始专案 打开Blend後选择Top Menu的 File->New Project(快捷键Shift+

零元学Expression Blend 4 Chapter 22 以实作案例学习Frame及HyperlinkButton

原文:零元学Expression Blend 4 Chapter 22 以实作案例学习Frame及HyperlinkButton 本章将教大家如何以实作善用Blend4的内建功能-「Frame」以及「HyperlinkButton」 本章将教大家如何以实作善用Blend4的内建功能-「Frame」以及「HyperlinkButton」 附上简单的范例,请点击进行换页,并注意换页内容 范例请点我 ? 跟着范例做做看吧! 01 使用小猴子附上的的范例档案,或是自己做一个类似下图的版面 ? (范例内的

零元学Expression Blend 4 - Chapter 15 用实例了解互动控制项「Button」I

原文:零元学Expression Blend 4 - Chapter 15 用实例了解互动控制项「Button」I 本章将教大家如何更改Button的预设Template,以及如何在Button内设置动画. ? 本章将教大家如何更改Button的预设Template,以及如何在Button内设置动画. ? ? ? 01 开启一个新专案,并且置入一个Button,调整到适当大小 ? 在Properties->可以调整Button的外观,基本设定都跟先前的教学雷同 不熟的人请看如何用Blend制作一

零元学Expression Blend 4 - Chapter 6 如何置入Photoshop档案以及入门动画设计

原文:零元学Expression Blend 4 - Chapter 6 如何置入Photoshop档案以及入门动画设计 本章将教大家如何把Photoshop档案置入Expression Blend 4,以及设置简单的动画. 只要按照步骤来,就能很容易的做出动画的效果. ? 本章将教大家如何把Photoshop档案置入Expression Blend 4,以及设置简单的动画. 只要按照步骤来,就能很容易的做出动画的效果. ? 就是要让不会的新手都看的懂! ? ------------------

零元学Expression Blend 4 - Chapter 26 教你如何使用RaidoButton以及布局容器的活用

原文:零元学Expression Blend 4 - Chapter 26 教你如何使用RaidoButton以及布局容器的活用 本章将教大家如何运用Blend的内建元件RaidoButton做出选单选项,以及配合的布局容器运用 ? 本章将教大家如何运用Blend的内建元件RaidoButton做出选单选项,以及配合的布局容器运用 ? ? 01 首先开一个新的专案,把Layout的颜色调整一下,并且在版面切完後放入一个Rectangle ? 问卷会有题目,所以我们放入一个TextBlock ?

零元学Expression Blend 4 - Chapter 25 以Text相关功能就能简单做出具有设计感的登入画面

原文:零元学Expression Blend 4 - Chapter 25 以Text相关功能就能简单做出具有设计感的登入画面 本章将交大家如何运用Blend 4 内的Text相关功能做出有设计感的登入画面 让你五分钟就能快速做出一个登入画面 ? 本章将教大家如何运用Blend 4 内的Text相关功能做出有设计感的登入画面 让你五分钟就能快速做出一个登入画面 ? 范例内有文字方块可以输入文字,以及密码栏: 很抱歉,阁下使用的浏览器并不支援 IFrame,不能正常浏览我的网页 打错字了....不