Ch 01-03 工作空間的分區 Areas of the workspace（2）

2007‧0617
　
　　‧　互動面板　Interactive Panel
　
　　‧　專案面板　Project Panel
　
　　‧　性質面板　Properties Panel ( Full & Mini Modes )
　
　　‧　資源面板　Resources Panel
　
　　‧　結果面板　Results Panel
　
　　‧　好用工具庫　Asset Library
　
　
　

　
　
　
　
互動面板　Interactive Panel
　
　
( 1 / 4 )
首先來看看 WPF / *.EXE的專案檔
　

　
　
一開啟後，下方 Interaction 面板中的 Triggers 裡就有 + Event
　

　
　
一按 + Event 後，就會出現 Window.Loaded 與其下方的一堆東東
　

　
　
再按 Loaded，又會出現一狗票東東

　
　
　
不過上述都不重要，因為目前只先討論 Silverlight，而不是 WPF / *.EXE
　
WPF / *.EXE 支援的功能當然又多又強悍，因為可以開發出 Windows Vista 的桌面程式
而 Silverlight 目前主要只支援 XAML 與 JavaScript，故功能自然受限
　
　
來看看 Silverlight 的專案檔：
１. 開啟 Silverlight 的專案檔
２. Triggers 處的功能都變灰色，不能用了 ( 啊就因為不是 WPF / *.EXE 咩 )
３. 跟之前的 WPF / *.EXE 相較：
　 ‧Window 變成了 [Canvas]
　 ‧LayoutRoot 不見蛋了
　

　
Interactive 面板中有兩大部份：Triggers、Objects and Timeline ( 物件與時間軸 )
既然在 Silverlight 的專案裡 Triggers 會無效，那麼就在 ▼Triggers 上按一下，Triggers 就會縮小到左側 ( 再按一次就會復原 )
多出來的空間，就利於等一下時間軸的擺置
　
　
　
( 2 / 4 )
　
１. 首先拉一個 Canvas，以利於觀察 ▼ Objects and Timeline 中的層級關係
　
２. 在 Canvas 中畫出 3 個矩形，如此，在 ▼ Objects and Timeline 中就可以看到：
　
　　▼ [Canvas] ← 頂畫布 ( 工作區 )
　　　▼ [Canvas] ← 步驟１的畫布
　　　　 [Rectangle] ← 矩型
　　　　 [Rectangle] ← 矩型
　　　　 [Rectangle] ← 矩型
　
３. 同步驟１、２，再拉出一個畫布，置入 3 個橢圓 ( Ellipse )
　 如此層級的關係就很清楚了
　
４. 有了層級後，再開啟 Timeline ( 時間軸 )，以利比對 層級間的物件 與 時間軸 的關係
　
５. 按了步驟４的 ＋ 號後，會開啟時間軸的設定
　

　
　
開啟了 Timeline 之後，請先點選一個物件 ( 如左上方的粉紅色矩形 )，然後開始作業：
先點選到物件，然後移動時間軸的 黃橘色垂直線 ( 時間軸軌線 ) 到適當的時間位置
　

　
　
接著再移動物件 ( 即：先移動時間軸軌線 ＋ 再移動物件 ＝ 動畫的最基礎設定 )
　

　
　
再移動時間軸軌線
　

　
　
再移動物件 ( 第二段的動畫 )
　

　
　
又再移動時間軸軌線
　

　
　
最後再移動物件 ( 第三段動畫，形成一個封閉曲線的路徑 )
　

　
　
看動畫效果：
１. 回到第一格
２. 播放動畫
　

　
　　　上面只移動矩形，若是移動畫布，畫布裡的所有物件也會跟著移動
　　　( 畫布縮放，裡面的物件一樣也會跟著縮放 )
　
　
　
( 3 / 4 )
　
如果不考慮 ActionScript，那麼 Flash 幾乎就只有 動畫、遮罩 ( Mask )、Alpha 透明度 等基本功能
　
‧看完上述最簡單的動畫後，再來看看其它的動畫效果：
　
　。轉動、Alpha 透明度的動畫
　
　　先畫好一個平躺的橢圓形
　
　　
　
　
　　１. 移動時間軸軌線
　　２. 再移動物件到定點，轉動之、縮小之
　　３. 調整 Alpha 透明度 ( ← 與 Flash 一模一樣 )
　　４. 也可以調整 Properties 面板 > Appearance > Opacity ( ← 與 Photoshop 的 Layer 很類似 )，來達到有透明度的效果
　
　　
　
　
　。沿著路徑移動的動畫（Motion Path）
　
　　很不幸地，只有 WPF / *.EXE 才支援此功能
　　Silverlight 無法在 Expression Blend 中，直接按一按就搞出此效果
　　( 當然啦，在 XAML 的標籤頁面中，靠 XAML、Javascript 也可以做得到，但不是直接在面板上按一按就搞出來 )
　
　　所以也只能 frame by frame 一格一格按出來：
　
　　
　
　
　
‧圖檔的透明度：
　
　在看透明度之前，先來看看圖檔的置入效果
　
　首先，在 Photoshop 載入一張已背景透明的 PNG 檔
　當 顯示大小 為 80% 時，可以看到連 Photoshop 都無法讓圖緣無鋸齒
　( 不過若是把 圖檔縮小 為原始尺寸的 80% 時，就不會有圖緣鋸齒了 )
　
　
　
　
　Flash 在這方面非常弱：一縮小尺寸後，就到處是鋸齒
　
　
　
　
　來看看 Expression Blend ( 含 Silverlight )：
　
　載入背景透明的圖檔 ( 這類圖檔最難處理 ) 後，在 Expression Blend 中圖緣很漂亮
　按 Ctrl +/- ( 即令顯示放到很大 )，圖緣依舊平順 → 所以小圖也可以當大圖用 !!
　
　
　
　
　縮小尺寸為 80% 後，圖緣還是平順 !!
　
　
　
　Expression Blend ( Silverlight ) 不只是 FlashKiller 這麼簡單的目標，連圖檔的置入與縮放，都優於Photoshop
　Flash 已經推到第 9 版了，連圖緣都處理不好
　Expression Blend、Expression Design 只是第 1 版，Silverlight 只是 1.0 β 版 ( 1.1 α 版 )，就注意到如此細節的問題
　這些都是筆者看好 Expression Blend 與 Silverlight 的原因之一
　
　
　再來看看圖檔的透明度
　
　向量圖要調透明度有兩種方法：Alpha 與 Opacity
　圖檔要調透明度 一樣可以用 Alpha 與 Opacity，夠酷吧 !!!!!
　
　
　
　
　
‧遮罩：
　
　 Expression Blend ( for Silverlight ) 設定遮罩的方法有很多，先舉兩例
　
　。漸層遮罩：調整 Alpha 與漸層，就可以有遮罩的效果
　
　　
　
　
　 。物件遮罩：
　　１. 按 Shift 鍵，選取遮罩與被遮罩的物件
　　２. 下拉選單 > Object > Path > Make Clipping Path
　　３. 遮罩完成
　
　　
　
　
雖然 Expression Blend（Silverlight）的功能遠不及 Expression Blend（WPF / *.EXE）來得多
　
但是卻遠比 Flash 方便很多、也遠比 Flash 有彈性許多
　
　
　
( 4 / 4 )
　
如同 Flash 一樣，時間軸是很重要的功能，故此區有一大堆的功能
不過也不急著現在就搞清楚，待討論到範例時再適時細究，才比較好懂
　

　↑ 在編製 Silverlight 時，Triggers 可以縮小到左側
　
　
　

　
　
　
　
專案面板　Project Panel
　
　
如果是編製 WPF / *.EXE，那麼專案面板就會複雜一些
但是編製 Silverlight，專案面板就很簡單了
　
　
一開啟 Silverlight 的專案，就會產生：
　
　　
　
　
.csproj ＝ C# ( C Sharp ) Project 檔 ＝ C# 的專案檔
先不管它，不過這也預告了未來 Silverlight 一定會支援 C# 與 VB 到一定的程度 !!
　
事實上在編製 WPF / *.EXE 時，就可以與 C# 協同作業
而且在 Visual Studio 2005 後繼版本 Orcas ( beta ) 中，更可以直接就編製出 Silverlight 的格式
　
　
Default.html：( 也就是一般的首頁檔, index.htm )
‧載入了 3 個 JavaScript
‧定義長寬
‧Silverlight 在 HTML > body 中的語法
　

　
　
Default.html.js：( 這個 JavaScript 是 Default.html 的主要 Script )
‧主要是用來產生 Silverlight
‧Silverlight 的來源則是 Scene.xaml
　

　
　
Scene.xaml：也就是 Expression Blend 的 XAML 標籤頁面模式
　
Scene.xaml.js：這個 JavaScript 是 Scene.xaml 的主要 Script
　
Silverlight.js：有了 HTML 檔與其 Script，有了 XAML 檔與其 Script
　　　　　　　　還要有 Script 來連繫 Browser 的 Plug-In，就是這個 JavaScript
　
　
　
如果按 Ctrl + I 載入圖檔，也會出現在專案檔 ( Project Panel > Files ) 中
　

　
　
檢查一下儲存的檔案夾，圖檔已被 Copy 進來了
也就是說，若是要上傳到網路去，這些檔案全部都得上傳：
　

　
　
　　　　當然也可以只載入 Link：( 檔案就不會被 Copy 到儲存的檔案夾 )
　
　　　　
　
　
　　　　Link 的東東，在左下角會有個箭頭
　
　　　　
　
　
　

　
　
　
　
性質面板　Properties Panel ( Full & Mini Modes )
　
　
１. 點選物件
２. 性質面板就會因為點選到不同類別 ( 如向量圖、文字、點陣圖、… ) 的物件而跟著不同
３. 還有進階的功能
　

　
Expression Blend 右側面板 ( 特別是 性質面板 ) 是很先進的 UI：
‧有點像 CorelDRAW 一樣地省空間，又會適時地變換
‧又有點像 3D Studio MAX 的側邊功能
‧操作起來很像是 Photoshop 的面板
‧還有類似 Dreamweaver / Frontpage ( Expression Web or SharePoint Designer ) 的 設計 / 語法 之標籤頁面可以切換
　
不像 Flash or Dreamweaver 的面板，太多又太佔空間了
想想，自從 Flash MX 起，您工作區的面積只剩下多少 ....
　
　
按 F4 or Tab 鍵，就可以把面板與時間軸縮小
　
　　　　　　　　　　　　　　　　
　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　
無巧不成書地，Photoshop CS3 與 Expression Blend 都可以把面板縮到最小
這代表著 UI 設計 與 工作區面積的大小 越來越受到重視
　
而 WPF 讓 UI 設計可以有著比以前更大的彈性：故以後軟體的外觀，肯定會更有變化
　
Adobe Illustrator 在 7 版之前，堅持自己的介面
後來 Adobe 終於把 Illustrator 的介面改成很像 Photoshop，就開始大賣 !!
　
基於上述，筆者對於 Expression Blend 的介面是大大地推崇
　
不過 Expression Blend 的介面還是有以下的缺點：
第一、下拉選單黑白對比太強烈了
第二、性質面板中的上下順序無法自行更改
第三、右鍵功能過少
第四、對 Silverlight 的支援還可以再多、更多、多很多 ....，如下圖：( Properties Panel > Events )
　
　　　　　　　　　　　　　　　　　　　　　　　
　
動不動就只支援 WPF / *.EXE 而不支援 Silverlight，實在很叫人失望 ....
　
　
　

　
　
　
　
資源面板　Resources Pannel
　
　
是的，在 Silverlight 專案的一般狀況下，又是空空如也 ....
　

　
　
　

　
　
　
　
結果面板　Results Pannel
　
　
主要是測試 WPF / *.EXE 的程式有無錯誤
不過在 Silverlight 專案裡，若是 XAML 的語法有誤，一樣會顯示出來
　

　
　
　

　
　
　
　
好用工具庫　Asset Library
　
　
這個最難翻譯，這東東裡面都是控制項，但若是翻譯成「控制項庫」，反而更奇怪 ...
反正文章是俺寫，名詞俺來訂，就稱其為「好用工具庫」
　
最起碼在 Expression Blend 2 May Preview 版，Asset Library 只支援 WPF / *.EXE
　

　
( Silverlight 專案的這三個 Asset Library，在工具箱中都有了 )