Ch 01-02 工作空間的分區 Areas of the workspace（1）
2007‧0613
‧ 分區 Areas
‧ 工具箱 Toolbox
分區 Areas
Expression Blend 主要還是處理 XAML 檔
‧桌面程式 ( *.exe )：XAML 搞 UI，C# or VB 寫程式
‧網路應用 ( Silverlight )：XAML 搞 UI，具多媒體互動功能
所以 Document Windows ( 文件視窗 ) 都是以 XAML 為主
不管是設計師或是工程師，都可以在 Authoring Views 切換 Design / XAML，以利處理自己的分工項目
不管是 Design Workplace 還是 Animation Workplace，這兩種 Workplace 所有的面板都一樣 ( 只有 Interactive 面板被換了位置 )
目的是把 Interactive 面板 這一區搞得寬一點，以利時間軸的擺置
工具箱 Toolbox
……………………………………………………………………………………………………………………………………………………………………………………
Expression Blend 2 May Preview 目前可供編製 Silverlight 的工具比較少 ( 相信日後會比較多 )，而可供編製 WPF / *.EXE 的工具則多很多 !!
本系列文章，主要是討論 Silverlight，故以下也只討論與 Silverlight 有關的工具
……………………………………………………………………………………………………………………………………………………………………………………
Expression Blend 編製 Silverlight 的功能並不多，這和 Flash 很類似：
管它是不是 RIA，反正都是多媒體 整合，不是無中生有多媒體，故也不需太多工具
( 像 Macromedia Director 就是因為工具太多，反而不易於學習與推廣 )
因為 XAML 的強大，所以也不需要有太多的工具 ( 換句話說，想玩精 Expression Blend，最後勢必得 Coding 之 )
比起 Flash 的 Action Script 來說，XAML 成熟穩健，不會胡亂改版，您投資的時間比較有保障
Expression Blend 與 Silverlight 有關的工具就只有下面這幾個：( 還有 Panels )
就先來看綠點處：( 只要您玩過向量軟體，這六個綠點馬上能通 )
首先，開啟一個新的 Silverlight 專案
１. 以 選取工具 點選到 工作區
２. 切換到 Properties 面板
３. 設定長寬
４. 設定好長寬之後，可以發現工作區仍處於 被點選 的狀態 ( 現在也可以拉 編輯點 改變長寬 )
按 空白鍵 就等於是按 Pan Tool，可以移動工作區
切換到 鋼筆 工具，在工作區上按一下 ( Click ) 馬上拖曳 ( Drag )，就可以拉出曲線
練一下吧 ( 第４步驟是為了要完成一個封閉曲線 )
如果只 Click 不 Drag，就只能按出直線
至若 鉛筆 工具，就是直接畫出曲線
切換到 Direct Selection ( 引導選取工具 )，就可以編輯節點
他ㄋㄋ的，Direct Selection 還真難翻，明明講 節點工具 就很好懂，但是又會和英文原文不襯
所以大家一定要用英文版，名詞比較統一，也不會有一堆奇怪的翻譯 ^^
縮放工具：
按 Alt ＋ Click 則可縮小
( 和 Photoshop 一樣，按 Ctrl + / - 亦可縮放 )
……………………………………………………………………………………………………………………………………………………………………………………
不管是 Expression Blend 還是 Flash，都是 RIA
而 RIA 基本上都是多媒體 整合，也同時都是 Vector-Based ( 骨子裡是向量 ) 的軟體
不管是 Expression Blend 還是 Flash，都有向量的功能，但都不強 ( 也不需要強 )
因為 RIA 軟體是拿來整合用的，不是拿來無中生有一張向量圖
故使用 RIA 軟體的首要觀念就是多媒體整合：所謂多媒體就是多軟體
‧複雜一點的向量圖
。要嘛就在 Expression Design 畫好，然後就直接 Copy / Paste 到 Expression Blend
。要嘛也可以在 Expression Design 畫好、Copy XAML 之，再到 Expression Blend 的 XAML 頁面去 Paste 之
。要嘛更可以在 Expression Design 輸出 XAML 檔，再於 Expression Blend 按 Ctrl + I 之
。當然啦，Expression Blend 也可以載入 AI 檔，然後再以上述適當的情況處理之
。Illustrator CS2 也有 XAML 的 Tools / Plug-Ins
‧點陣圖 ( Jpeg、PNG )
就直接載入 ( Ctrl + I ) 之
‧3D 檔
有一堆工具可以轉成 XAML，然後就可以載入 ( Ctrl + I ) 之
‧AV 檔
就直接載入 ( Ctrl + I ) 之
XAML 的一堆 Tools，在 這邊 都已介紹過了
反正 RIA 軟體的正確使用觀念就是：除非是簡單的介面繪製，不然一切 Import 之
您要呈現越豐富的多媒體，就要先學會那麼多的軟體 ( 啊就說過多媒體就是多軟體咩 ) ...
……………………………………………………………………………………………………………………………………………………………………………………
再來，看看其餘的工具：
要畫出矩形、橢圓，直線都太簡單了
Expression Blend 要拉出 圓角矩形，簡直是世界簡單：在矩形 左上角凸出來的那兩條 拉一拉即可
( 也可以在 Properties 面板 > Appearance 中的 RadiusX / Y 中設定 )
拉出一個矩形
１. 點選 變換筆刷工具
２. 點選到 漸層筆刷 ( Gradient Brush ) 的標籤
３. 選擇起點顏色
４. 選擇終點顏色
最後移動下圖上方漸層箭頭的頭、中、尾部到滿意的位置
當你畫好漸層，想要複製到別的物件該怎辦 ?! ( 文字等物件的屬性複製亦然 )
來看下面的例子：( 把右側的漸層屬性複製到左邊新增的空白矩型去 )
首先點選到 選取工具，在矩形上點選之
點選到 滴管工具，在右側的矩形上 Click 以吸其屬性
當左側矩形在被選取的請況下，滴管一吸右側矩形的屬性，左側的矩形馬上就複製其屬性了 ( 填上漸層色 )
再來就是 畫桶工具
畫桶工具 與 滴管工具 的使用方式剛好相反：
‧滴管工具是 被選取的物件 去吸 ( 複製 ) 別人的屬性
‧畫桶工具則是把 被選取物件的屬性，倒 ( 複製 ) 在別的物件上
先選取一個物件，左側的矩形，等一下點選到畫桶工具後，就可以把左側矩形的屬性倒在別的物件上
倒在右上的矩形
倒在右下的矩形
事實上按 Alt 就可以切換 滴管工具 與 畫桶工具
最後，只剩下畫布與文字區這兩個工具
文字區 再簡單不過了，就是拉個區塊、然後填入文字
Expression Blend 一開檔 ( Silverlight ) 的白色部份，就是 畫布
這是 頂畫布，所以筆者稱其為 工作區
先畫好一個物件 ( 圓球 )，再按畫布工具拉出一個畫布
請注意紅色箭頭處：此時圓球與畫布的位階都一樣 ( 都在頂畫布 ( 工作區 ) 之下的第一層 )
把圓球移近畫布，就會出現：ALT-drag to place into [canvas]
即按 Alt 鍵，就可以把圓球拖曳到畫布中 ( 圓球變成畫布的附屬物件 )
看到紅色箭頭處沒 ?! 此時圓球的位階就低畫布一級 ( 變成畫布的一部份 )
即一移動畫布，圓球也會跟著動
把頂畫布視為 HTML 檔，而加入的畫布視為 iFrame 就很好懂了
等到適當的實例，再來仔細討論畫布工具
