使用 Expression Design 設計圖案並結合 Expression Blend 製作動畫(下)

這是一篇站長幫台灣微軟官方撰寫的Expression軟體系列文章之一，主要是講述Expression Design與Expression Blend兩個軟體之間的整合使用(本篇為下集，主要為使用Expression Blend將Expression Design繪製處理的圖形內容做動畫後製)，除了有刊載在Microsoft Expression官網之外，也同步放在此部落格上供您瀏覽參考！

本篇範例可以學習到使用Expression Blend製作下功能：

1. 將Expression Design製作的png與xaml檔案，匯入Expression Blend做運用。
2. Opacity透明淡化效果設定。
3. 製作Effect的模糊與陰影特效。
4. 同時建立並使用兩個並存的Storyboard腳本。
5. 了解設置動畫前後順序觀念。

本範例相關的素材圖檔以及原始檔，您可以點此下載本範例，以方便您做練習對照用途！本範例使用到的圖片內容物製作，請參考上一篇「使用Expression Design設計圖案並結合Expression Blend製作動畫(上) 」的說明。

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


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


在「專案」的視窗介面裡，點選項目展開後，可以看到Blend已經建立的基本環境檔案，請在滑鼠左鍵直接點選兩下開啟預設的MainPage.xaml檔。


在「物件與時間軸」的介面裡，點選「UserControl」。


再到「屬性」介面裡，將「版面配置」裡的「Width」設為640、「Height」設為480像素，將本次要製作Silverlight動畫區域的寬與高做好設定。


您可以點選功能表上的「專案」/「新增現有項目」，將要匯入的檔案增加進來，但此種正統的置入方式會比較慢與不直覺。


筆者在此推薦一個小技巧，您可以開啟電腦上的檔案總管，選擇到您要置入圖檔的目錄中，直接滑鼠左鍵點選該圖檔不放，直接拖曳進來Expression Blend的畫板區裡再放開滑鼠左鍵，如此一方面可以將檔案直接放到您要顯示的位置，另外一方面Blend也會將該檔案預設放到跟MainPage.xaml同一層的位置裡(當然您還是可以再新增資料夾將檔案做移入等調整)，這個小技巧將有助於您節省多檔置入時的調整時間。


請將bgimg1.jpg～bgimg3.jpg置入，如果您比較習慣使用美編軟體內的物件高低圖層觀念，請在「物件與時間軸」的介面裡，點選「依標記順序排列」的圖示，如此Blend裡面的各個物件高低順序，就可以很清楚的顯示排列與讓您方便進行順序調整。


接著請將icon.xaml置入Blend，不過xaml檔案格式無法直接移入到畫板區，必須把xaml檔先按著滑鼠左鍵拖曳到「專案」介面裡的清單內。


請您到「專案」介面裡，滑鼠左鍵點選兩下剛剛置入的icon.xaml，開啟後點選一個中間挖空的多邊形圖案，點選功能表上的「編輯」/「複製」。


請切換回MainPage.xaml的文件視窗，選擇功能表上的「編輯」/「貼上」，如此就能將挖空多邊形圖案複製一份到MainPage.xaml裡，點選此物件，在「屬性」/「外觀」的介面裡，按下「Effect」右方的「新增」鈕。


請選擇裡面的「BlurEffect」模糊特效，按下「確定」鈕。


下圖左方圖案為原始狀態，中間為使用模糊特效後的狀態，右方為模糊狀態並放大，可以很明顯感受到此多邊形圖案，經使用此特效後邊緣線條與裡面的漸層色確實都變得較為模糊。


將圖案仍維持點選狀態，在「屬性」/「外觀」的介面裡，將「Opacity」的數值，由原本的「100%」調整為「70%」，如此圖案就會變得比較透明淡化。


下圖左1圖案為原始狀態，左2與左3圖案為使用模糊特效，左4與左5圖案為使用70%的透明淡化效果，您可以比較這其中的差異性，模糊且半透明的圖案比較適合拿來當做背景陪襯等用途。


您可以反覆操作上述步驟，在各位置放入不同多邊型模糊且半透明的圖案，而若您需要一些輔助格線以利做對齊，可以按下「畫板控制項 」裡的「顯示貼齊格線」、「開啟貼齊至格線」的圖示，以方便您的編排調整與控制。


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


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


此時已經開始錄製動作，請選擇挖空多邊形圖案，滑鼠左鍵點選到時間軸的播放點5的位置，按下「錄製主要畫面格」鈕。


將圖案由左上角拖曳到右下角。


使用xaml格式的圖案有一個好處，就是某些屬性也可以在Blend進行調整，例如本次我們將挖空多邊形的顏色做調整，在「屬性」/「筆刷」/「漸層筆刷」裡，將漸層顏色調整成別的色彩。


接著請維持此圖案仍為選取狀態，在「屬性」/「轉換」/「Projection」/「旋轉」的介面裡，將「Z」軸設定成「360」，這表示此多邊型圖案將會進行360度的旋轉。


請在「物件與時間軸」的「Storyboard1」多邊型圖案上，滑鼠左鍵點選到時間軸播放點5的主要畫面格。


在「屬性」/「加減速」/「EasingFunction」的介面裡，選擇「Bounce In」圖示。


接著請在原多邊型圖案上，將時間軸播放點7也設定為主要畫面格，並點選此主要畫面格，在「屬性」/「加減速」/「EasingFunction」的介面裡，選擇「Back InOut」圖示，並將圖案使用滑鼠左鍵拖曳移動到右上角，在「屬性」/「外觀」的介面裡，將「Opacity」的數值，由原本的「70%」調整為「0%」。


做完上述這些動作設定，將可以產生出一個圖案由左上方旋轉邊晃動到中下方，再由中下方旋轉晃動到右上方並且變成完全透明淡出的動畫效果。

若製作途中您有些物件一開始想先做隱藏，或者不想做淡化消失(「Opacity」數值改為「0%」)，則可以將該物件在「屬性」/「外觀」/「Effect」裡，將狀態改為「Collapsed」，如此可將該物件隱藏起來，等到後面有需要顯示此物件時，再將此物件的時間軸裡，選擇適當的播放點位置設定主要畫面格，將「屬性」/「外觀」/「Effect」裡的狀態改回「Visible」即可。


其他圖案的設定可以依此類推將其完成，完成後請關閉Storyboard1這個腳本。


接著請您再產生一個新的「Storyboard2」腳本。


請在「物件與時間軸」介面裡選擇「bgimg1」這張底圖，請將滑鼠左鍵點選到時間軸的播放點10的位置，按下「錄製主要畫面格」鈕。


在「屬性」/「外觀」的介面裡，將「Opacity」的數值，改為「0%」。


在「物件與時間軸」介面裡選擇「bgimg2」這張底圖，將滑鼠左鍵點選到時間軸的播放點20的位置，按下「錄製主要畫面格」鈕。


在「屬性」/「外觀」的介面裡，將「Opacity」的數值，改為「0%」。


如此就完成製作背景圖淡出的轉場效果，完成後請先關閉Storyboard2這個腳本。


請將文字標題「titlefont1.png」、內文「font1.png」、產品圖「image1.png」這三個圖檔置入到畫板區內，並調整到適當位置，按著鍵盤上的「Shift」鍵不放，同時滑鼠左鍵點選「titlefont1.png」與「image1.png」，使這兩個圖檔呈現被選取狀態。


在「屬性」/「外觀」的介面裡，按下「Effect」右方的「新增」鈕。


請選擇裡面的「DropShadowEffect」陰影特效，按下「確定」鈕。


如此文字標題與產品圖案背後都加上了陰影效果。


請到「物件與時間軸」介面裡選擇進入「Storyboard2」腳本。


按著鍵盤上的「Ctrl」鍵不放，滑鼠左鍵同時選擇文字標題、內文、產品圖這三個圖檔，將滑鼠左鍵點選到時間軸的播放點0的位置，按下「錄製主要畫面格」鈕。


在「屬性」/「外觀」的介面裡，將「Opacity」的數值，改為「0%」。


三個圖檔仍保持被選取的狀態，將滑鼠左鍵點選到時間軸的播放點2的位置，按下「錄製主要畫面格」鈕。


在「屬性」/「外觀」的介面裡，將「Opacity」的數值，改為「100%」，這樣做的目的是將三個圖檔由一開始進入時的透明逐漸變成清晰的動畫狀態。


三個圖檔仍保持被選取的狀態，將滑鼠左鍵點選到時間軸的播放點8的位置，按下「錄製主要畫面格」鈕。


將滑鼠左鍵點選到時間軸的播放點10的位置，按下「錄製主要畫面格」鈕。


在「屬性」/「外觀」的介面裡，將「Opacity」的數值，改為「0%」，這樣做的目的是將三個圖檔由清晰再轉換成透明淡出的動畫狀態。


請您將另外兩組的文字標題、內文、產品圖置入。


另外兩組的文字標題、內文、產品圖，依照前述步驟進行製作，但時間軸上的播放點區段分別由10~20以及20~30處開始進行，播放點10~12以及20~22設定淡入效果，播放點18~20以及28~30設定淡出效果。


若您希望產品圖載入時的動畫效果再炫一些，請到「物件與時間軸」介面裡選擇進入「Storyboard2」腳本，分別將每一段的產品圖點選，時間軸選擇一開始進入的播放點。


在「屬性」/「轉換」/「RenderTransform」/「縮放」的介面裡，將「X」與「Y」的數值設定為2，如此產品圖一開始會有放大兩倍，再逐漸縮成原尺寸進來的動畫效果。


下圖為「Storyboard2」腳本第一個介紹畫面的分鏡截圖，提供給您參考！


請分別點選「物件與時間軸」介面上的「Storyboard1」與「Storyboard2」腳本。


在「屬性」/「一般屬性」介面中，將「RepeatBehavior」裡設定成「Forever」，這則是設定動畫會一直持續反覆來回動作的選項。


上述做好的動畫，雖然您在時間軸裡拖曳是可以動作的，但實際上做輸出時，動畫檔預設是不會自動產生動作的，此部份請您參考筆者之前撰寫「製作 Silverlight 動畫很簡單！使用 Expression Blend 設計動畫 」這篇文章內的相關敘述設定。

本範例使用到的功能，其實並沒有很艱深，只是步驟比較繁瑣，且本次同時動用到兩個Storyboard腳本，您在設計時需要養成什麼時機該做哪些設定，並了解動畫前後的銜接順序等配置觀念。完成的網頁可以參考範例中「html」目錄下的demo.html，原始檔案請參考範例中的「banner」目錄裡的相關檔案。

如正確製作完成本範例，第一段動畫的分鏡截圖如下，一開始「Storyboard1」與「Storyboard2」腳本會同時出現，並將裡面的動畫呈現出來。


第二段動畫的分鏡截圖如下，背景逐漸由綠色轉換成橘色，產品圖仍舊是一開始載入時會放大，並出現另外一個模糊透明的多邊形動畫在後方。


第三段動畫的分鏡截圖如下，一樣維持著兩個Storyboard腳本運行，最後畫面做淡出效果，並循環回到第一段動畫。


本範例相關的素材圖檔以及原始檔，您可以點此下載本範例，以方便您做練習對照用途！本範例使用到的圖片內容物製作，請參考上一篇「使用Expression Design設計圖案並結合Expression Blend製作動畫(上) 」的說明。