最近有機會在工作上用到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繼續你的專案嚕!
本篇的教學就到此。