2010年5月29日 星期六

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

這是一篇站長幫台灣微軟官方撰寫的Expression軟體系列文章之一,主要是講述Expression Design與Expression Blend兩個軟體之間的整合使用(本篇為上集,主要為Expression Design先繪製物件或做圖檔去背等事前的準備動作),除了有刊載在Microsoft Expression官網之外,也同步放在此部落格上供您瀏覽參考!

本篇範例可以學習到使用Expression Design製作下功能:
  1. 多邊型繪製與路徑剪裁。
  2. 匯出xaml與png格式。
  3. 材質文字與外框文字特效製作。
  4. 圖形去背(背景透明鏤空效果)。

製作完成各項圖形物件後,下一篇範例還會教您在Expression Blend裡,匯入這些檔案進行後續運用,以製作成Silverlight動畫。

本範例相關的素材圖檔以及原始檔,您可以點此下載本範例,以方便您做練習對照用途!

開啟Expression Design,開始進行多邊形繪製,請先到屬性面板,在「屬性」/「外觀」/「筆觸」,設定「寬度」為1像素。
1

在工具箱裡,將矩形工具群組裡切換到「多邊形」,點選滑鼠左鍵先拖曳出一個圖案,並維持點選在此圖案的狀態。
2

請到屬性面板,在「屬性」/「編輯多邊形」裡,將「點」設定成為6,「內部深度」設定為20%,「螺旋角度」設定為0%。
3

請到屬性面板,在「屬性」/「外觀」/「填滿」裡,選擇下拉式的「更多樣本」,挑選「漸層色彩」。
4

請設定成「放射漸層」,並在漸層列上分別點選漸層停駐點,使用色彩選擇器挑選合適的色彩。
5

在工具箱裡,選擇「漸層轉換」,將多邊形的放射狀漸層做適度的位置調整。
6
請您再複製出另外一個多邊形,使用工具箱上的「選取」工具並同時按著鍵盤上的「Shift」鍵,將複製的多邊形圖案做等比例縮小,接著同時選取兩個多邊形,選擇功能表上的「排列」/「對齊」/「置中」。
7

兩個多邊形仍維持選取狀態,選擇功能表上的「物件」/「路徑操作」/「後面剪去前面」,如此就可以得到一個中間挖空的多邊形圖案。
8

分別複製出幾個挖空多邊形圖案,並將這些新複製出來的多邊形置,在屬性面板上「屬性」/「外觀」/「填滿」裡,使用色彩選擇器,分別換上不同的顏色漸層。
9

完成6組不同顏色的多邊形圖案後,將這些圖案同時選取,按下滑鼠右鍵,選擇「匯出」指令。
10

由於我們希望之後這些多邊形匯入到Expression Blend內時,除了能夠保持有向量格式,還可以再變更漸層色彩等修改屬性,所以在此匯出的屬性介面裡,請挑選成「XAML Silverlight3畫布」這個匯出檔案格式。
11

請點選「文字」裡的路徑,以及點選「即時效果」裡的「轉換成XAML效果」,其餘選項請取消勾選!
12

請確認您要的檔案名稱,存檔位置請按下「瀏覽」鈕進行挑選,這些項目都確認無誤後,請按下「全部匯出」鈕,挖空多邊形物件即製作完畢,完成的原始設計檔案,您也可以開啟範例裡的「icon.design」進行觀看。
13

接著我們要製作外框材質的文字效果,請點選功能表上的「檔案」/「匯入影像」,選擇置入背景影像檔案(本例分別為匯入fontbg1~3的三個jpg圖檔),並使用工具箱上的「文字」工具,在剛剛匯入的三個圖檔上,分別輸入您需要的文字內容、字型與調整成合適大小,並確認文字擺在圖檔上的適當位置後,點選此文件物件,選擇功能表上的「物件」/「將物件轉換成路徑」,如此每個字元都會轉換為個別的路徑物件。
14

此時此文字已經轉換成路徑物件的屬性,繼續維持選取狀態,在功能表上,選擇「物件」/ 「複合路徑」/「製作」。
15

這樣做的目的,是因為文字轉換成路徑物件後,在圖層裡可以觀看到整個是變成一個群組,而群組裡面每個文字是變成獨立的物件,這樣在後續製作上會有問題,所以必須將這個群組內的文字,透過「物件」/ 「複合路徑」/「製作」的流程,將這些文字變成單一的路徑物件。
16

接著請使用工具箱上的「選取」工具,同時選取文字路徑物件以及底下的jpg圖檔,點選功能表上的「物件」/「剪裁路徑」/「使用最上層路徑製作」。
17

若您沒有依照上面的順序步驟做,則系統可能會出現下圖的提醒視窗,告知您無法建立遮罩,所以請您務必留意與遵照這些操作順序。
18

順利完成材質文字的製作後,您可以使用工具箱上的「選取」工具點選此文字,到屬性面板,在「外觀」裡,挑選「基本」筆觸,設定「寬度」為1像素,並在色彩選擇器裡,選擇一個適當的色彩,如此即完成簡易外框字的設定動作。
19

請點選外框材質文字,按下滑鼠右鍵,選擇「匯出」,出現匯出視窗後,輸入您要的檔名與按下「瀏覽」鈕,以選擇您的圖檔所要儲存的位置。
20

檔案格式請在「匯出屬性」裡,選擇「格式」為PNG,並勾選「透明度」與「消除鋸齒」的選項,完成後請按下「全部匯出」鈕,外框材質文字物件即製作完畢,完成的原始設計檔案,您也可以開啟範例裡的「titlefont.design」進行觀看。
21

過來我們要進行的是圖形去背(圖案背景裡有透明鏤空效果),點選功能表上的「檔案」/「匯入影像」,選擇置入一個影像檔案後,請選擇工具箱上的「聚合線條」工具。
22

在您要去背的圖形上,開始點選滑鼠左鍵,依您要的範圍進行輪廓圈選,必須讓圈選區域起始點與終點最後有相交到,即可完成一個紅色線條的封閉型選取區域。
23


當然第一次做成封閉型圈選區域時,難免會有沒有圈選好的小瑕疵,此時可以使用工具箱上的「直接選取」工具,對產生出來的封閉型選取區域,進行各別節點的移動、調整等再次編輯的動作。
24
將封閉型選取區域調整到您比較滿意的狀態後,請依然使用工具箱上的「直接選取」工具,同時按著鍵盤上的「Shift」鍵不放,點選圖形上原本非圈選區域的部份,讓封閉型選取區域以及非圈選區域同時維持被選取的狀態。

25

選擇功能表上的「物件」/「裁剪路徑」/「使用最上層路徑製作」。
26

如此就可以將此圖案進行周圍背景去除的動作,再到此圖案上按下滑鼠右鍵,選擇「匯出」指令。
27

出現匯出視窗後,輸入您要的檔名與按下「瀏覽」鈕,以選擇您的圖檔所要儲存的位置。
28

檔案格式請在「匯出屬性」裡,選擇「格式」為PNG,並勾選「透明度」與「消除鋸齒」的選項,完成後請按下「全部匯出」鈕,圖形去背即製作完畢,完成的原始設計檔案,您也可以開啟範例裡的「image.design」進行觀看。
29

附帶說明一下,若您對於圈選去背的範圍,事後感覺到不滿意想要重做,可以在原始檔裡,點選已完成封閉型選取區域的圖形,選擇功能表上的「物件」/「裁減路徑」/「釋放」,即可將原本去背的遮罩效果解除,恢復成圖形原本的狀態。
30

最後要製作的是一些說明的內文物件,我們要將內文做外框字效果,以免屆時內文受背景干擾不易觀看閱讀,所以請您使用工具箱上的「文字」工具,輸入相關內文,完成文字輸入後,複製此文字成為另一份出來,並點選原本的文字,在屬性面板上,在「外觀」裡,挑選「基本」筆觸,設定「寬度」為3像素,並在色彩選擇器裡,選擇一個適當的色彩。
31

或許有人會有疑問,為何此處不直接將文字做筆觸外框就好呢?您可以觀看下圖,第一個是直接將文字使用筆觸外框,設定寬度為1像素,外框線條比較細,不符合本次需求;第二個則是直接將文字使用筆觸外框,設定寬度為3像素,外框線條雖然變粗但同時也將線條往內縮,造成文字不美觀;第三個則是採用兩個文字重疊,下方的文字筆觸外框,是設定寬度為3像素,上方文字則不使用筆觸,這樣做的目的,可以比較明顯將外框線突顯出來,同時也能兼具美觀。
 32

完成內文外框字製作後,請選取內文物件,按下滑鼠右鍵,選擇「匯出」指令。
33

出現匯出視窗後,輸入您要的檔名與按下「瀏覽」鈕,以選擇您的圖檔所要儲存的位置。
34

檔案格式請在「匯出屬性」裡,選擇「格式」為PNG,並勾選「透明度」與「消除鋸齒」的選項,完成後請按下「全部匯出」鈕,內文外框字即製作完畢,完成的原始設計檔案,您也可以開啟範例裡的「font.design」進行觀看。
35

另外提醒一下,如果您覺得在Expression Design裡觀看圖形或文字邊緣,覺得不是很清晰與平滑時,可以點選功能表上的「檢視」/「像素預覽」,可以在設計畫面裡呈現比較好的視覺效果。
36 

本範例相關的素材圖檔以及原始檔,您可以點此下載本範例,以方便您做練習對照用途!


製作 Silverlight 動畫很簡單!使用 Expression Blend 設計動畫

這是一篇站長幫台灣微軟官方撰寫的Expression軟體系列文章之一,主要是講述使用Expression Blend製作Silverlight動畫的基本概念,以及如何將動畫使用Expression Web置入網頁中,除了有刊載在Microsoft Expression官網之外,也同步放在此部落格上供您瀏覽參考!

首先您需了解一下,在開啟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會依據您拖拉或選取設定的指令自動幫您產生出程式碼,對於網頁視覺設計師來說是沒有影響,但您可以考量若此專案未來有要與程式開發者協同合作開發時,該程式開發者或團隊擅用的程式語言是哪一種,因為此處選擇使用的語法,對程式開發者的後續影響會比較大。
1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

點選此「ControlStoryboardAction」。
28

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

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

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

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

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

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

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

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


Related Posts Plugin for WordPress, Blogger...

訂閱RSS