• Expression成員Blend


在Expression Studio中,Expression Blend是一個針對視覺互動設計師而來的專屬工具,在微軟.NET 3.0平台扮演著「介面體驗」上的重要角色,特別是WPF(Windows Presentation Foundation)與Silverlight使用者介面上的呈現方式。

利用Expression Blend可以清楚地將使用者介面與資料內容完全切開,不僅如此,還能自行建立專屬的介面外觀、連結資料與介面上的關係,更可以整合圖片、影像與3D內容。

微軟照顧到了大部分的設計者因對WPF程式操控略感不易,也因此提供了視覺化編輯工具「Expression Blend」,以加速彰顯WPF在表現層上的強烈震撼,使得不管是繪圖、動畫、控制元件與資料連結等,都能感覺出視覺上的互動效果。

藉由Expression Blend與微軟Visio Studio開發工具,讓設計師與程式人員之間的協同合作,有了前所未有的緊密配合,更容易創造出新一代的視窗與網頁應用系統。

  • Blend介面快速瀏覽


我們先來綜觀一下Blend在介面上有哪些功能是令人耳目一新。





圖1:整體Expression Blend介面環境

功能表:

主要有檔案、編輯、檢視、物件、專案、工具、視窗、說明等功能,除了檔案、專案、工具在面版上較沒有相對應功能外,大部分的功能其實在面版上都可以找到,可以直接點選使用,而說明功能表裡有相關使用者指南及學習性資源,如:內建範例、教學課程、線上社群等。

工具箱:

區塊成五大功能,讓你可以直接點選,立即使用,從上到下有「選取工具」、「檢視工具」、「筆刷工具」、「物件工具」、「資產工具」等,如圖2所示。





圖2:工具箱五大常用功能。

互動面版(物件與時間軸):

互動面版裡主要有二個子面版,就是「觸發程序」及「物件與時間軸」二部分,如圖3。

在觸發程序中會有選取時間軸時的觸發程序清單,並且依照所選擇的觸發而列出動作清單與動作值。(後續實際範例我們會講到)。

物件與時間軸子面版,詳細紀錄物件播放的時間關係、位置、範圍等,好讓控制在畫板上的物件如何依據時間來走動。





圖3:互動面版(含觸發程序及物件與時間軸二區塊)。

畫板:

這是你的設計界面的主戰場,也是你的工作園地,日後輸出的畫面內容都在這裡編輯。概念上就是在其他面版上的設定與動作,反映到此畫板中。

專案、屬性、資源

專案:只要是你目前開啟的專案檔,就會把此專案的相關檔案通通列在這裡,也容易讓你看出專案裡的檔案架構,不僅如此也能夠連結程式的資料來源與參照。如圖4所示。





圖4:專案面版裡參照的檔案架構。



屬性:對於物件上的屬性特徵都在這邊來做設定,項目有筆刷、外觀、版面版置、通用屬性、轉換、雜項等,如圖5所示,因為項目很多,所以上面也多了一個搜尋功能,只要輸入英文字的關鍵字就會為你馬上浮現顯示在面版上。





圖5:屬性面版針對物件特性來分類顯示。



資源:在這邊同樣會列出目前開啟專案的資源列表,可以用來建立新資源字典、應用程式層級的資源,相關連結的資源、物件層級資源及縮圖預覽等。如圖6。





圖6:顯示目前開啟專案上的資源列表。

結果顯示:

當你專案製作完成後就會執行「測試專案」或「建置專案」等,而如何得到輸出結果的文字訊息?就是在這結果面版來顯示,如圖7,一旦有發生任何錯誤,你也可以在這裡找到蛛絲馬跡。





圖7:所有專案輸出與錯誤結果會立即出現在結果面版上。



常用的模式切換及面版快速鍵:



常用模式切換:

一般在Expression Blend的環境中,為了編輯使用上的方便,或功能上的需求,就會切換模式,以便順利操作相關內容,因此在模式上的切換就需要了解它,我們常會用到的模式切換如下。

1.設計與XAML中切換,在視覺設計顯示的背後就是由XAML來主導,你可以看到你所設計的內容,背後長的程式是如何,如圖8。你可以直接在面版上用滑鼠點選切換,或按F11(設計)與F12(XAML)快速鍵來取代也是一樣。





圖8:設計的背後就是由XAML程式碼所運作。

當然,你也可以在上方功能表的檢視->設計,或者XAML都是同效果。

2.設計與動畫上的切換,在Expression Blend中的顯示也有所不同,你可以按快速鍵F6(設計工作區)與F7(動畫工作區)來切換工作環境,你可以發現到互動面版上的差異,只是被拉下來而己,而?向來看,畫板就變寬了。

3.大部分的面版都會有一個浮動的按鈕,當你按下浮動按鈕後,就會將面版跳出來,之後就可以像視窗般,任意的移動,若你再按一次就會被吸回去,變成固定位置了。

4.每一個物件放置在畫板上時,為了方便對好位置,你也可以利用下方的格線與貼齊格線來輔助,這樣就很容易把物件對齊。左邊第一個則是畫板裡的顯示百分比,你可以用滑鼠往上或往下來,達到快速顯示。

5.還有一個常用的切換,就是畫板中的全螢幕與實際大小顯示,可以直接在檢視->全螢幕,或檢視->實際上小來切換。

面版快速鍵:

除了剛才上述有些也可以執行快速鍵之外,我們再列出一些實用的面版快速鍵,記下來將有助各位日後操作上更加快速。



執行內容
快速鍵說明

1.編輯文字

F2

2.建置專案

CTRL+SHIFT+B

3.測試專案

F5

4.顯示或隱藏物件控點

F9

5.微調物件

向上鍵、向下鍵、向左鍵和向右鍵

6.限制物件的比例

按住 SHIFT

7.移動瀏覽工作區

按住空格鍵

狼翔月影 發表在 痞客邦 PIXNET 留言(0) 人氣()