2011年3月24日 星期四

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

這一次來介紹不需要寫程式,也可以做到酷炫的微軟新型態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」。

1

 

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

2

 

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

 

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

 

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

5-1

 

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

5-2

 

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

5

 

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

6

 

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

7

 

按下到「Export」階段裡。

8

 

在「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」鈕。

9

 

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

10

 

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

11

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

12

 

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

13

 

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

13-1

 

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

14

 

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

15

 

請開啟Expression Bleng,在功能表列上選擇「檔案 / 開啟專案/解決方案」。

16

 

請將瀏覽的目錄選擇到之前Deep Zoom Composer輸出的目錄下,就可以看到一個.sln的專案檔,請按下「開啟舊檔」鈕。

17

 

在「專案」裡,就可以看到xaml原始檔以及相關使用C#開發的原始檔,可以使用Expression Blend 裡的各種功能加以增加功能或修飾調整,如果需要寫更多的程式功能,也可以在某個檔案上按下滑鼠右鍵,選擇「在Visual Studio編輯」。

18

 

完成後可以選擇「專案 / 執行專案」進行確認。

19

 

預設出現的功能畫面如下圖所示。

20

 

若此特效只想要在Expression Blend裡設計的部分區域使用,有興趣者可以參考另一篇文章製作Silverlight的Deep Zoom網頁動畫效果(二)



0 意見:

張貼留言

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