製作Silverlight的Deep Zoom網頁動畫效果(一) --- WebOK部落格- 原創性軟體教學,課程資訊,網路行銷,學習紀錄分享

這一次來介紹不需要寫程式，也可以做到酷炫的微軟新型態Silverlight動畫，產生Deep Zoom放大縮小的特效，並了解怎樣在各軟體間切換記行整合運用。

請下載Deep Zoom Composer這個英文版免費軟體，http://www.microsoft.com/downloads/en/details.aspx?familyid=457b17b7-52bf-4bda-87a3-fa8a4673f8bf&displaylang=en，並安裝完成(若您很早之前有完過此軟體，請重新下載安裝，版本有更新)。

開啟Deep Zoom Composer，選擇「New Project」。

設定好名稱與目錄位置，按下「OK」鈕。

在「Import」階段裡，按下「Add image」鈕，匯入幾張您要製作的圖檔。

可匯入圖擋(格式為.tif、.jpg、.bmp、.png)，建議匯入的圖檔解析度需要較高些，未來效果會較佳。

按下到「Compose」階段裡，在下方「Images」區裡，使用「Selection」工具，點選某張圖片，按下滑鼠左鍵不放拖曳到主視覺區裡，移動到合適的位置裡再放開。

在主視覺區裡，使用「Selection」工具，點選某張圖片，會出現8個白色節點，可以將滑鼠游標移至某個白節點上，使用滑鼠左鍵拖曳，以對此圖片進行尺寸大小的調整。

當需要將畫面放大以利調整時，可以使用「Zoon」工具進行畫面放大，若同時按下鍵盤上的「Alt」鍵，則會變成畫面縮小的功能。

需要移動到畫面不同區域時，則可以使用「Pan」工具。

依此類推上述步驟，完成各圖片置入主視覺區的動作

按下到「Export」階段裡。

在「Setting」裡，在「Output type」中選擇「Silverlight Deep Zoom」，「Name」裡輸入您想要的名稱，在「Location」裡按下「Browse…」鈕選擇輸出路徑，「Export options」裡選擇「Expor as a collection(multiple images)」，「Templates」選擇「Deep Zoom Navigation(Default)」，在「Image settings」裡的「Format」裡，可以選擇輸出的圖檔格式為JPEG或PNG，「Quality」裡可以設定圖片壓縮率(數值越小檔案壓縮越小，但品質也會越來越差，本選項若上面選擇成PNG則不會出現)，「Image Width」則可設定圖片寬度尺寸，上述設定確認後，請按下「Export」鈕。

完成後可以按下「View Image Folder」。

可以看到輸出的檔案與目錄。

如果要將剛剛設計的Deep Zoom放到網頁上，可以使用Microsoft Expression Web，開啟一個網頁後，滑鼠游標點選在網頁裡，選擇工具列上的「插入 / 媒體 / Deep Zoom」。

選擇剛剛檔案輸出的目錄位置，點選dzc_output.xml檔案，按下「開啟舊檔」鈕。

會出現如下視窗，可以在此調整關高大小與縮放速度，按下「確認」鈕，系統會產生對應的javascript檔案，即可完成置入Deep Zoom效果物件到網頁裡。

後續若您需要變更此置入物件的寬高大小，可以在此物件上滑鼠左鍵點兩下，會出現ActiveX控制項設定視窗。

若您是希望將此Deep Zoom效果，之後轉到Microsoft Expression Blend裡使用，則在Deep Zoom Composer裡的「Templates」，必須選擇成「Expression Blend 4 + Source」的選項進行匯出，會變成一個可以使用Expression Blend 或Visual Studio開啟的專案檔。