首先您需了解一下，在開啟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」，並且挑選「Silverlight3應用程式+網站」這個次選項，在「名稱」欄位輸入本專案您想要命名的名稱，並在「位置」裡瀏覽本次專案所要存放的目錄位置，「語言」則選擇預設的「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設定的寬高數值即可。
開始繪製一個圓形，請您在「工具」介面裡，滑鼠左鍵點選「矩形」圖示不放，選擇彈出的「橢圓形」圖示，並在畫面上按住滑鼠左鍵不放拖曳出一個圓形。
在圓形被選取的狀態裡，選擇「屬性」/「筆刷」/「漸層筆刷」，並將此筆刷選擇成「放射漸層」，並給予此漸層兩側顏色分別為「#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組譯 )此專案並呼叫瀏覽器進行瀏覽，若瀏覽的效果符合您的需求，則可確認此Silverlight動畫已製作完畢，反之則請您再進入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動畫分鏡動作，依序概略如下圖所示。
0 意見:
張貼留言
若對於本篇文章有任何批評指教或鼓勵建議，歡迎您留言讓我知道...