2011年3月26日 星期六

製作Silverlight的Deep Zoom網頁動畫效果(二)

在上一篇製作Silverlight的Deep Zoom網頁動畫效果(一)裡,我們學習到了不需要寫程式,也可以產生Deep Zoom放大縮小的特效,但若此特效只想要在Expression Blend裡設計的部分區域使用,則可以參考本篇文章,順便也可以藉此了解一下,如何參照額外的.dll檔來進行擴增,以快速加入某些新功能。

請先到Expression gallery 下載 DeepZoom Touch & Mouse這外掛的行為(Behavior)檔案,網址在http://gallery.expression.microsoft.com/DeepZoomTouch/,點選位於右下角的「DOWNLOAD BEHAVIOR」鈕,下載DeepZoomTouch.zip檔案到您的電腦裡。

 

完成下載後,記得將檔案解壓縮,會看到產生的目錄裡有一個DeepZoomTouch.dll,請記得此檔所在位置。

 

開啟Expression Blend,在功能表上選擇「檔案 / 新增專案」。
21

選擇「Silverlight / Silverlight 應用程式+網站」,給予名稱與資料夾位置後,語言選擇C#,版本選擇4.0,按下「確定」鈕。
22

 

請先到「專案」裡,在此專案名稱下的「參照」上,按下滑鼠右鍵選擇「新增參照」。
23

 

將位置選擇到之前我們下載並解壓縮後的DeepZoomTouch.dll後,按下「開啟舊檔」鈕。

24

加入參照後,需要執行功能表上的「專案 / 重建專案」。

25

此時再回到「專案」區裡,就可以看到產生了一個「ClientBin」的資料夾,請在此資料夾上按下滑鼠右鍵,選擇「在Windows檔案總管中開啟資料夾」。
26

請另外開一個檔案總管,把在上一篇文章裡,使用Deep Zoom Composer產生的檔案(兩個資料夾與一個.xml)進行複製。
27

將資料複製到剛才在Expression Blend裡,「在Windows檔案總管中開啟資料夾」所打開的資料夾下。
28

完成後請回到Expression Blend,在「專案」裡「ClientBin」的資料夾上,按下滑鼠右鍵,選擇「重新整理資料夾」。

29

就可以看到剛剛複製過去的資料。
30

接著請在「資產 / 位置」裡,挑選「MultiScaleImage」物件,並將此物件使用滑鼠拖曳到「物件與時間軸」裡的「LayoutRoot」下面。
31

如此「LayoutRoot」下就會顯示出「MultiScaleImage」物件。

32

維持點選「MultiScaleImage」物件的狀態,在「屬性 / 一般屬性」裡的「Source」按下「選擇影像」鈕。

33

挑選dzc_output.xml,就可以看到MultiScaleImage物件裡已經有顯示圖片了,您可以再使用工具箱上的「選取」工具,將MultiScaleImage物件移到適當位置以及調整大小。

34

完成後的MultiScaleImage物件,目前仍是無法支援使用滑鼠滾輪變大變小的DeepZoom效果,還需要到「資產 / 位置 / DeepZoomTouch.dll」裡,將DeepZoomMouse物件拖曳到MultiScaleImage物件下。

35

完成上述步驟後,請選擇功能表上的「專案 / 執行專案」,到瀏覽器上看一下效果吧!確實可以完成一個局部區域影像的DeepZoom效果,在上面使用滑鼠滾輪,確實可以達成放大縮小的動畫特效。

36



0 意見:

張貼留言

若對於本篇文章有任何批評指教或鼓勵建議,歡迎您留言讓我知道...