製作 Silverlight 動畫很簡單！使用 Expression Blend 設計動畫並置入到網頁上

首先您需了解一下，在開啟 Expression Blend 時，專案類型有分成 Silverlight 與 WPF 兩者的差異性，WPF(Windows Presentation Foundation)是基於XML、.NET Framework、向量繪圖等元素形成的 Microsoft 新技術，被廣泛用於下一代的 Windows 平台的介面開發。而 WPF/E 是 WPF 的子集合(全名是：Windows Presentation Foundation EverywherE)，在基於 XAML 與 JavaScript 之下，可跨越各種平台，目前 WPF/E 已演化轉稱為 Microsoft Silverlight，是微軟在 RIA(Rich Interactive Application,Rich Internet Application) 策略的主要應用程式開發平台之一，以瀏覽器的外掛元件方式，提供 Web 應用程式中影音串流多媒體與高度互動性前端應用程式的解決方案。

在上一段文字的介紹裡，您可以知道在 Expression Blend 裡選擇 Silverlight 或 WPF，會導致後續在 Blend 的介面裡某些功能選項上會有所差異，一般來說 Silverlight 因受限於瀏覽器外掛元件的網頁模式限制，選項功能上一般來說會比 WPF 要來的少一些(但以網路程式與動畫的角度來看已經比傳統的網頁技術強悍非常多了)，全球各地 Silverlight 成功案例可參考：http://silverlight.net/showcase/，由於 Silverlight 動畫是在瀏覽器內執行，所以需要安裝外掛元件，若您之前沒有安裝，請至 http://www.microsoft.com/silverlight/get-started/install/default.aspx 下載安裝(只需安裝一次，未來若有新版會自動更新)。

請您在 Blend 裡選擇專案類型為「Silverlight」，並且挑選「Silverlight 3 應用程式+網站」這個次選項，在「名稱」欄位輸入本專案您想要命名的名稱，並在「位置」裡瀏覽本次專案所要存放的目錄位置，「語言」則選擇預設的「Visual C#」，並按下「確定」鈕。

附註：其實語言選擇「Visual C#」或「Visual Basic」對於 Expression Blend 使用者來說並沒有太大差異，因為 Blend 會依據您拖拉或選取設定的指令自動幫您產生出程式碼，對於網頁視覺設計師來說是沒有影響，但您可以考量若此專案未來有要與程式開發者協同合作開發時，該程式開發者或團隊擅用的程式語言是哪一種，因為此處選擇使用的語法，對程式開發者的後續影響會比較大。

為了本範例講解介面一致與方便性考量，請您點選「視窗」/「工作區」，選擇成「動畫」的工作區模式。

接著請您確認一下是否在「視窗」裡有勾選「專案」，在之後的說明裡，若您發現沒有某些視窗介面可使用，請確認此處是否有勾選開啟對應的視窗名稱。

在專案的視窗裡，點選項目展開後，可以看到Blend已經建立的基本環境檔案，其中的 .xaml 就是將您在 Blend 做的動作指令記錄轉換成程式碼儲存的地方，網頁視覺設計師不一定需要會 XAML(eXtensible Application MarkuP Language) 語言，但完成設計的 XAML 檔案可以連同整個專案目錄與 .sln 專案檔，一起交給程式開發者，程式開發者則可以使用 Microsoft Visual studio 2008 或 2010 去開啟進行後續複雜程式的撰寫與資料庫整合等動作，這樣的分工模式可以將把視覺介面開發以及後台程式邏輯做很適當的區隔搭配，使視覺設計師與程式開發者能有更好的整合與合作，以降低維護和更新的成本。

當然如果您同時兼具視覺設計師與程式開發者兩種身分，也可以在 Blend 的專案視窗裡找到 XAML 檔，並可在其上點選滑鼠右鍵，選擇呼叫 Visual studio 直接編輯 XAML 檔裡面的程式碼(在本範例中並不需要用到此功能)。

在本次範例裡，筆者將引導您學會製作一個簡單的網頁 Silverlight 動畫(您只要按照這些步驟做一定能學得會)，並且可以將做完的動畫放置到一般網頁上。

請在滑鼠左鍵直接點選兩下開啟 MainPage.xaml 檔後，在「物件與時間軸」的介面裡，點選「UserControl」。

再到「屬性」介面裡，將「版面配置」裡的「Width」設為500、「Height」設為 300 像素，如此就將此 Silverlight 動畫的區域寬高做好設定了。

到「物件與時間軸」介面裡，點選「LayoutRoot」。

再到「屬性」介面裡，將「筆刷」/「單色筆刷」裡的顏色挑選成「#FFFAF7BD」，如此就完成此 Silverlight 的動畫的黃底色設定，而 LayoutRoot 裡面的「版面配置」再此不需要設定，讓它維持「自動」抓取之前我們在 UserControl 設定的寬高數值即可。

開始繪製一個圓形，請您在「工具」介面裡，滑鼠左鍵點選「矩形」圖示不放，選擇彈出的「橢圓形」圖示，並在畫面上按住滑鼠左鍵不放拖曳出一個圓形。

@H_607_105@

在圓形被選取的狀態裡，選擇「屬性」/「筆刷」/「漸層筆刷」，並將此筆刷選擇成「放射漸層」，並給予此漸層兩側顏色分別為「#FFADE2F6」與「#FF196884」，「外觀」/「strokeThickness」請設定為「0」，這表示此圓形不需要外框線，「版面配置」裡的「Width」設為 50、「Height」設為50，如此就把此圓形設定成寬與高皆為50像素的正圓形，請再使用「工具」介面上的「選取」圖示，滑鼠左鍵按著正圓形不放，將此正圓形拖曳到區域的右下角位置。

在「工具」介面裡，滑鼠左鍵點選「漸層工具」圖示。

再到圓形上滑鼠點選箭尾符號不放，拖曳漸層較淡處到左上方，營造圓形的立體圓球感覺。

在「工具」介面裡，點選「矩形」圖示，滑鼠左鍵拖曳繪製出一個矩形。

請在矩形仍在被選取的狀態時，選擇「屬性」/「筆刷」/「漸層筆刷」，並將筆刷選擇成「線性漸層」，並給予此漸層兩側顏色分別為「#FFF4C299」與「#FFD8821C」，「外觀」/「RadiusX」與「RadiusY」請設定為「10」，這表示讓此矩形變成圓角矩形，「版面配置」裡的「Width」設為80、「Height」設為25。

在「工具」介面裡，滑鼠左鍵點選「TextBlock」圖示，輸入文字例如「Hello」。

請在文字被選取的狀態裡，選擇「屬性」/「筆刷」/「單色筆刷」，並給予此漸層顏色為「#FFA90F0F」，並在「文字」裡挑選適當的字型與字體大小，「TextAlignment」裡選擇「Center」將此文字設定為置中對齊。

在「物件與時間軸」介面裡，按著鍵盤上的 Ctrl 鍵不放，點選圓角矩形與文字，讓它們同時成為被選取的狀態。

在「物件」/「對齊」裡，設定「水平置中」與「垂直置中」，讓兩個物件居中對齊。

接著兩個物件仍維持在選取狀態，在「物件與時間軸」裡的兩個物件上按下滑鼠右鍵，選擇「群組置入」/「Grid」後，將此群組移到區域的左下角位置。

在「物件與時間軸」介面裡，點選「LayoutRoot」，按下「開新檔案」鈕。

建立一個 Storyboard 腳本，輸入名稱「Storyboard1」後，請按下「確定」鈕。

此時已經開始錄製動作，請選正圓形物件，滑鼠左鍵點選到時間軸的播放點 5 的位置，按下「錄製主要畫面格」鈕後，將正圓形由右下角拖曳到左上角，並在「屬性」/「版面配置」裡，將「Width」與「Height」由原本的 50 改設訂成為 100 像素，上述的動作是讓此正圓形能由右下角移動到左上角並有逐漸變大的效果。

接著用相同的做法，點選圓角矩形與文字的 grid 群組物件，一樣在時間軸播放點5的位置，按下「錄製主要畫面格」鈕後，將 grid 群組由左下角拖曳到右上角，並在「屬性」/「轉換」裡，將「RenderTransform」裡的「Angle」數值設定成 360 度，上述的動作是讓此 grid 群組能由左下角移動到右上角並且能夠同時跟著有旋轉的效果。

請點選「物件與時間軸」介面上目前正在錄製的「Storyboard1」腳本。

在「屬性」/「一般屬性」裡，勾選「AutoReverse」，這樣做的目的，是設定當正圓形與 grid 群組的動畫移動到區域上方邊緣時，能夠有自動產生碰撞彈回的效果。「RepeatBehavior」裡請設定成「Forever」，這則是設定動畫會一直持續反覆來回動作的選項。

動畫腳本的錄製在此告一個段落，請在「物件與時間軸」介面裡，按下「關閉腳本」鈕。

上述做好的動畫，雖然您在時間軸裡拖曳是可以動作的，但實際上做輸出時，動畫檔預設是不會自動產生動作的，要讓動畫輸出後能自動播放，您必須在「資產」介面裡，選擇「行為」，將「ControlStoryboardAction」按住滑鼠左鍵拖曳至「物件與時間軸」介面的「LayoutRoot」上。

點選此「ControlStoryboardAction」。

在「屬性」/「觸發程序」裡，「EventName」選擇「Loaded」，這樣做的目的，是設定「LayoutRoot」載入時會做觸發動作。接著在「一般屬性」裡，將「ControlStoryboardoption」裡選擇成「Play」，「Storyboard」裡挑選我們之前錄製的「Storyboard1」腳本，如此這個動畫就會在一開始載入時，播放Storyboard1這個腳本內已經錄製好的動畫效果。

請按下「專案」/「執行專案」。

Blend 會同時建置(Compiler 組譯 )此專案並呼叫瀏覽器進行瀏覽，若瀏覽的效果符合您的需求，則可確認此 Silverligh t動畫已製作完畢，反之則請您再進入 Blend 修改後重新進行組譯與執行專案。

接著請您開啟 Microsoft Expression Web，並開啟一個新的 .html 網頁，我們準備要將剛剛製作好的 Silverlight 動畫置入網頁中，將滑鼠游標點選到您要放置動畫的網頁插入點後，請選擇「插入」/ 「多媒體」 /「Silverlight 」。

請瀏覽之前用 Expression Blend 存放建立的專案目錄，找到「ClientBin」目錄，之前在 Blend 裡建置好的 Silverlight 動畫會被封裝成一個 .xap 的檔案，請挑選此檔後，按下「開啟舊檔」鈕。

接著在 Expression Web 的網頁上會產生此插入物件的區域，請在此區域上點選滑鼠左鍵兩下，會出現「ActiveX 控制項」的內容畫面，請將裡面寬與高度，分別改成之前在 Blend 的 UserControl「版面配置」裡設定「Width」與「Height」的像素數值，這樣動畫的區域大小才會符合原本設定的尺寸。

存檔後您就可以按下鍵盤上的「F12」鈕進行瀏覽，若您要用「http://」式的網址開頭做測試，則可以在Expression Web內的「網站」/「網站設定」/「預覽」裡，選擇「使用網站 URL 預覽」，勾選「使用Microfost Expression Development Server」，並挑選「所有網頁」的選項，按下「確定」鈕即可。

完成的 Silverlight 動畫分鏡動作，依序概略如下圖所示。