不必 Decompiler

2007-07-08T21:03:00.001+08:00

2007‧0722
　
這是香港的某個 Flash 網站，筆者的朋友因為公司內部簡報的需要，必須瞭解這個網站的架構 ( 簡單來說就是要 *.fla 檔啦 )
而筆者朋友他們公司的協力廠商又沒能力把整站還原成 *.fla 檔，所以就找上筆者
( 基於技術研究，故有此文，註明始末；所有原始智財權，皆歸凱旋門所有，各位網友不得援用 )
　
話說回來，該站的編製頗為細心，本來就值得大家參考與學習
　
　
　
筆者朋友公司的需求：
　
第一、抽出該站某個視訊檔 ( 下圖紅框處 )，以利簡報
　
　　　
　
第二、瞭解與參考該站的架構
　
　
　

　
　
　
Temporary Internet Files
　
　
首先，請清空 Temporary Internet Files 中所有 Cookie 之外的檔案
　

　
　
接著，就可以檢視 Temporary Internet Files 這個檔案夾 ( 只剩下 Cookie 檔 )
　

　
　
開啟香港那個網站，逐一點選所有的 Links ( 以下只是一部份 )
　

　
至此 Cookie 之外的檔案，就是該站所有的檔案 ( *.htm、*.jpg、*.swf、甚至是 *.flv、…，但是該站開啟的 *.pdf 檔不會出現在其中 )
　
　
　

　
　
　
Sothink SWF Decompiler 3.7
　
　
我們的目的並不是在破解，而是在瞭解、參考與學習好網站的架構、設定、語法、…、等等
　
在 Temporary Internet Files 中：
‧首頁是 www.thearch.com.hk，按右鍵看原始碼，其中包著的是 welcome.swf
‧按首頁「中文」的 Link 後，彈出的視窗是 loader_chi.html，包著的是 loader_chi.swf

只要從破解 loader_chi.swf 開始，就可以瞭解整站的檔案夾架構，於是乎祭出 Sothink SWF Decompiler 3.7：
( Sothink SWF Decompiler MX 2005 是舊版，最新的版本是 3.7 )
　
　
先把 Temporary Internet Files 相關的檔案 Copy 出來 ( Copy 出來後，檔名會增加個 [1]，請移除之 )，以下只示範兩個檔案
　
welcome.swf 是首頁所包著的 SWF 檔：
　

　
　
按「中文」的 Link 後，彈出來網頁中所包住的 SWF 檔 ( 即 load_chi.swf )
　

　
會黑黑的是因為被 Load 進來的 swf 檔沒有從 Temporary Internet Files 中 Copy 出來 ( 若是檔名、路徑不對，也一樣會是黑黑的 )
　
　
　
在左側點選 load_chi.swf，然後只要按上方的 Export FLA，就會把這個 *.swf 檔轉成 *.fla 檔，帥吧 !!!!!
　

　
　
輸出 fla 後，以 Flash 開啟之，檢視其 ActionScript，就可以發現要 Load 進來的 MovieClip ( victory.sef ) 是擺在 chi 的檔案夾中
　

　
　
建立一個 chi 的檔案夾，把 victory.swf 丟進去，畫面就不會黑黑的了
　

　
　
　
即：
第一、先清空 Temporary Internet Files ( 千萬不要把 Cookie 給清掉 )
第二、點選要破解的 Flash 網站所有的 Links
第三、在 Temporary Internet Files 中，把 Cookie 以外的所有檔案 Copy 出來 ( Rename：把 [1] 去掉 )
第四、從首頁包著的 swf 檔開始，以 Sothink SWF Decompier 轉成 fla 檔
第五、依據 fla 檔 > ActionScript 中所顯示的路徑，重建檔案夾 ( 含子目錄 )，把每個 swf 檔擺在對應的檔案夾中
第六、至此就重建整個網站 ( 可離線觀看、也可上傳到自己的 FTP )，同時也重建所有的 Source Codes ( *.fla )
簡單吧 ( 其實花不了多少時間 ) !!
　
　
比較看看：( 筆者可沒誆您喔 )
‧原站
‧筆者重建 ( 總不能叫筆者貼出 *.fla 檔吧 )
　
　
　

　
　
　
Flv
　
　
本頁一開始所提到的視訊檔是 *.flv 檔，可以在 Temporary Internet Files 中找到
不管是 YouTube 還是其它的 Flash 視訊，也可以在 Temporary Internet Files 中找到
( swf 檔與 flv 檔，都是串流檔，所以要等到播放完後，才會完整地出現在 Temporary Internet Files 中 )
在 Flash 輸出 flv 檔，請自行參考 Flash 的相關資料，本篇主要是 focus 在 flv 的轉檔
　
　
Online Converters
　
Flv 無法以 Windows Media Player ( 含其它常用的 Player ) 觀看，輔之還藏在 Temporary Internet Files 中，實在是很麻煩
所以線上看到 Flash 視訊 → 直接貼上該視訊的 Links → 線上轉檔 → 儲存 → 最省事的方法
　
‧GooTube FLV Retriever　( 線上轉檔 )
‧vixy.net　( 線上轉檔 )
　
( 若是嫌下述某些 Offline 的 Converter 不好用，也可以把 flv 上傳，然後以 Online 的方法轉檔 )
　
　
Flv Tools
　
這類的 Tools 很多，筆者就不再仔細介紹了
　
‧Riva FLV Encoder　( Flv 的轉檔軟體 ) Free !
‧Riva FLV Player　( Flv 的播放軟體 ) Free !
‧太多了
　
　

　
　
　
破解 Silverlight
　
　
Flash 在視訊轉檔上的麻煩，可謂是罄竹難書、濯髮難數：
　
‧光是 Video ( 如 AVI ) → SWF，您就可能很頭大了，要去找轉檔軟體
‧而 SWF → Video ( 如 AVI )，通常都會遺失 MovieClip，所以大概只能使用 Flashants 公司的 SWF2Video
‧Flash → Flv，您可能使用 Flash 與 Flash Video Encoder
‧抓取網際網路上的 Flv 檔，您可能要使用線上轉檔的服務，或是一堆 Flv 的 Tools
‧若是轉檔不順暢，您可能要準備更多的轉檔軟體
‧………
　
　
也因為 Flash 本身的功能很有限，所以市面上有著數以百計各種的 Flash Tools ← 要瞭解這些 Tools，也夠整人的
　
　
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
　
　
Silverlight 1.0 則很不一樣，就只是呼叫外部的視訊檔，然後以 JavaScript 來控制
所以要抓取其中的視訊檔，是再簡單不過的事了，後續也沒有轉檔問題
　
　
先來看看 Silverlight 最騙人 的示範：驚奇四超人
　
為啥說是最騙人 ?!
　
第一、視訊檔是以 Windows Media Player 來播放，目的是讓您錯覺 Silverlight 有超強的視訊播放能力
　　　這其實也是 Silverlight 的優點：與 OS 的資源充份整合
　　　而 Windows Media Player 縮放鮮有嚴重的失真，自然是賣點上的強項，故本例直接就 IE 全螢幕 ( 在 IE 中撐到滿 )
　
第二、其中視訊檔所在地的頻寬特別大，目的是讓您錯覺 Silverlight 串流的效能特別強
　　　只要換看微軟其它 Silverlight 的視訊案例，很多都慢到爆，於是便知
　
　
微軟雖然故意製造錯覺，但無礙於 Silverlight 的強悍：
說 Expression Blend 是 Flash Killer，太委曲 Expression Blend 了
說 Silverlight 是 FlashPlayer Killer，也一樣是太委曲 Silverlight 了
　
　
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
　
　
要破解 Silverlight 1.0 的檔案，只要一個工具－－ Wondows 的記事本
　
　
首先，因為是 IE 全螢幕，所以不管您在視窗中哪裡按右鍵，一律都是 About Microsoft Silverlight
故採 IE 下拉選單 > 檢視 > 原始檔 的方式，來查看 HTML 碼
　

　
　
HTML 碼也很簡單：


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- saved from url=(0024)http://www.microsoft.com/ -->
<html>

<script type='text/javascript' src="Silverlight.js"></script>
<script type='text/javascript' src="MicrosoftAjax.js"></script>
<script type='text/javascript' src="BasePlayer.js"></script>
<script type='text/javascript' src="player.js"></script>
<script type='text/javascript' src="StartPlayer.js"></script>

<style type="text/css">
    html, body {margin: 0; width:100%; height:100%;}
    #bg {width:100%; height:100%;}
    #divPlayer_0 {position:absolute; top:0px; width:100%; height:100%;}
    #logo {position:absolute; top:0px; left:0;}
    #history, #strOut {display:none;}
    #actions {position: absolute; top:0; left:0; z-index:-1;}
    body
    {
        background-color:#202020;
    }
</style>

<body>
    <div id="divPlayer_0">
      <script  type='text/javascript'>
          var player = new StartPlayer_0();
      </script>
    </div>
</body>
</html>

計有 5 個 JavaScript
　
　
　
‧先開啟一個新的檔案夾，把首頁存成 index.htm
　
‧再來依序 Copy / Paste 這 5 個 JavaScript 的檔名到網址列去
　
　
　
　按 Enter 鍵，存檔到與 index.htm 相同的檔案夾
　
　
　
‧再來以 Windows 記事本來開啟 StartPlayer.js
　。可以發現 JPG / WMV 檔與其路徑，故開啟一個新的檔案夾，更名為 media，把 StartPlayer.js 中的 JPG / WMV 檔 Copy 進去
　。也可以發現到 player.xaml 與其路徑，把它 Copy 到根目錄中
　
‧最後以 Windows 記事本來開啟 player.xaml
　可以發現 JPG / PNG 檔與其路徑，故開啟一個新的檔案夾，更名為 images，把 JPG / PNG 檔 Copy 進去
　
　
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
　
　
根目錄 的所有檔案：
　

　
　
media 檔案夾中的所有檔案：
　

　
　
images 檔案夾中的所有檔案：
　

　
　
　
看看筆者重建 ( 破解 ) 的網頁，能夠重建，就能夠參照、學習、編修、大改之
　
　
另一種置入 Silverlight 的方式：
　

　
　
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
　
　
下載 WMV 以外的所有檔案：( WMV 檔太大了，請自行下載並儲存到 media 的檔案夾中 )
　

　
　
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
　
　
在 Expresion Blend 中也可以順利開啟
　

Ch 01-04　專案管理　Managing Your Projects（1）

2007-06-17T06:10:00.001+08:00

很無奈地，以下要先講一些 WPF / *.EXE、Silverlight 與 XAML 的例子，不然您將很難瞭解 Expression Blend 的面板與功能
當然啦，這些經驗值大部份都可以轉移到 Silverlight 去
　
HTML 的經驗值，一樣可以轉移到 XAML
您將發現：比起 Flash + ActionScript 來說，Expression Blend + XAML 既簡單、又易學、而且功能更強大 !!
　
　
　　‧　沿著路徑移動的動畫　Motion Path
　
　　‧　淡入淡出　Fade In / Out
　
　　‧　Silverlight 1.0 基礎（1）
　
　　　　。　基礎
　
　　　　。　基本範例　Basic
　
　　　　　　-　頂畫布上的物件　the Canvas object
　
　　　　　　-　繪製與填色　Drawing and Painting
　
　　　　　　　　　　‧　橢圓　Ellipse
　　　　　　　　　　‧　矩形　Rectangle
　　　　　　　　　　‧　線　Line
　　　　　　　　　　‧　多邊形 / 折線　Polygon / Polyline
　　　　　　　　　　‧　路徑　Path
　　　　　　　　　　‧　以筆刷填色　painting shapes with brushes
　　　　　　　　　　　　。　純色筆刷　SolidColorBrush
　　　　　　　　　　　　。　線性漸層筆刷　LinearGradientBrush
　　　　　　　　　　　　。　放射漸層筆刷　RadialGradientBrush
　　　　　　　　　　　　。　影像筆刷　ImageBrush
　　　　　　　　　　　　。　視訊筆刷　VideoBrush
　
　　　　　　-　通用的圖形性質　Common Graphic Properties
　
　　　　　　　　　　‧不透明度　Opacity Property
　　　　　　　　　　‧不透明度遮罩　OpacityMask Property
　　　　　　　　　　‧裁切　Clip Property
　　　　　　　　　　‧變形　RenderTransform Property
　
　　　　　　-　影像　Images
　
　　　　　　-　文字　Text（TextBlock）
　
　　　　　　　　　　‧文字區元素　TextBlock Element
　　　　　　　　　　‧通用文字區性質　Common TextBlock Propeties
　　　　　　　　　　‧運行元素　Run Element
　　　　　　　　　　‧多種字型的設定　Specifying Multiple Fonts
　
　　　　　　-　媒體　Media ( Audio / Video )
　
　　　　　　　　　　‧置入媒體　MediaElement ( 以 *.WMV 與 *.WMA 檔為主 )
　　　　　　　　　　‧加上介面的基礎物件 ( UIElement Objects )
　　　　　　　　　　‧套用放射漸層筆刷
　　　　　　　　　　‧全螢幕播放　Full-Screen Media Playback
　　　　　　　　　　‧視訊檔填塗　Painting With Video
　　
　
　

　
　
　
　
沿著路徑移動的動畫　Motion Path
　
　
( 1 / 3 )　版面
　
首先，開啟 WPF / *.EXE 的專案
　

　
　
切換到性質面板 ( Propreties Panel ) 的 版面 ( Layout )，然後調整文件的長寬
　

　
　
在性質面板 ( Propreties Panel ) > 筆刷 ( Brushes ) > Background 右側的小方塊按一下，設定底色
( 在 Silverlight 的專案中，底色可以設為透明 )
　

　
　　　　　　　　　　↑　注意到沒，在 Silverlight 專案中的 Canvas，現在變成了 Window > LayoutRoot
　
　
按 空白鍵 ( 手形工具 )，把工作區移到 Artboard 的中央
( 連按兩下手形工具、連按兩下縮放工具 ( 放大鏡 ) 亦可 )
　

　
　
　
( 2 / 3 )　畫顆球
　
１. 切換到橢圓 ( Ellipse ) 工具
２. 按 Shift 畫出個正圓
３. 切換到性質面板，準備填色 ( 要像一顆球，但不要有邊框 )
４. 在筆刷區 ( Brushes ) 作業
　　4.1　OpacityMask 已是 NoBrush，故不需再處理
　　4.2　Stroke ( 筆劃、外框 ) 是黑色外框，等一下要去掉
　　4.3　圓形填入的顏色是白色，等一下要改成放射狀漸層
　

　
　
點選到 Stroke 欄、按右側的小框框、然後點選 Reset ( 重置 )，外框就去掉了
　

　
　
點選到 Fill ( 填色 ) 欄，再點選到 Gradient Brush ( 漸層筆刷 ) 的標籤，就可以看到圓的填色變成了從黑到白的線狀漸層
　

　
　
點選到漸層色盤下方的 Radial Gradient ( 放射狀漸層 )，可以發現已有球的樣子了
但中間應該是比較亮的反光面，周圍應該深一點
　

　
　
點選到漸層色盤左側的控制鈕，然後選擇比較淡 ( 亮 ) 的顏色
　

　
　
同理，點選右側的控制鈕，選擇比較深的顏色
　

　
　
這樣子就像顆球了
　

　
　
　　　　如果想要改變中心點的物置，用 Brush Transform ( 變換筆刷工具 ) 即可
　
　　　　
　
　
　
( 3 / 3 )　路徑動畫
　
不管是 HTML、CSS、DIV、JavaScript、ActionScript，通常在編撰時，都會給物件一個名稱 ( ID or Name or .... )
XAML ( 不管是 WPF / *.EXE or Silverlight ) 也不例外
因為有了名稱，做起事來才會方便很多 ( 不然誰知道你要叫哪個物件去動作 )
　
點選到物件時，在 Properties 面板最上方來命名最快，也最方便
也可以在時間軸 ( Objects and Timeline ) 左側，按右鍵 > Rename 之
　
把剛才那顆球，命名為火星球
　

　
　
開始畫路徑：以鉛筆工具大概畫個路徑的粗胚即可 ( 等一下還可以再修改 )
不過之前火星球的填色設定還在，所以鉛筆工具畫完後會自動填色之
　

　
　
切換到 Properties > Brushes，先點選到 Fill 欄，然後再點選其左下方的 No Brush 的標籤
路徑就沒有那個討人厭的填色了 ( 即：單純就只是路徑線 )
　

　
　
路徑畫好後，填色去掉後，在路徑是被選取的情況下，按下拉選單 > Object ( 物件 ) > Path ( 路徑 ) > Convert to Motion Path ( 轉成路徑動畫 )
啊這個路徑動畫要對哪一個物件作用勒 ?! 在彈出來的視窗中，點選剛命名的火星球
　

　
　
至此，路徑線已經可以功成身退了，點選之，然後按 Delete 鍵
　

　
　
按一下播放鍵 ( Play ) 看看，確實是照著路徑走 !!
　

　
　
按火星球左側的小三角形，直到 Motion Path 出現為止
( 這就是剛才之所以刪掉路徑物件的原因：一 Convert 後，就會把路徑塞到火星球中 )
物件中的路徑，在時間軸中只有頭尾兩個小欄框可以控制
　

　
　
把起點與終點的小藍框拉到滿意為止
　

　
　
最後，以 Direct Selection ( 引導選取工具 ) 工具就可以再編修路徑
　

　
　
一切都滿意後，按 F5 看成品
　
　
　
　　　　筆者還是不死心，以 Silverlight 的專案再試了一次，依舊不行：( 下拉選單 > Object > Path 中，無法使用 Convert to Motion Path )
　
　　　　
　
　　　　　　　這種基本的功能 Silverlight 居然不支援 ( 雖說以 Frame by Frame 的方法來搞也很快 )，有點扯 ....
　
　
　

　
　
　
　
淡入淡出　Fade In / Out
　
　
先來看看下面這兩個例子：( 在本 Blog 每一頁的最下方，亦可看到 )
　
　
　
上兩例不管是以 JavaScript 的方式或是以 Flash 來搞，本質上都只是 Fade In / Out 而已
所以就來看看 Expression Blend 的 Fade In / Out 的功能
　
　
先準備 3 張圖：( 可以拖曳到 Photoshop 中 )
　

　
　　
　
　
先按 Ctrl + I，載入上述三張圖檔
　

　
　
連按兩下，就可以把圖檔置入到工作區 ( 本例是底圖 )
　

　
　
再載入 Gaussian Blur 的那張圖
　

　
　
打開時間軸
　

　
　
‧替這兩張圖命名 ( Background、Blur )
‧在 Blur 欄上點一下、把時間軸軌線拉到第一格、然後按時間軸上方左側的 Record Keyframe 以產生關鍵格
　

　
　
再把時間軸軌線拉到第 2秒，再按時間軸上方左側的 Record Keyframe 以產生關鍵格
　

　
　
本例先把 Gaussiab Blur 那張圖 Fade Out ( 淡出，即慢慢變透明 )
所以要在第 2 秒這個關鍵格把圖變透明：
　
‧可以在漸層筆刷的標籤中，把起點與終點色之 Alpha 調為 0%
　
　
　
　
‧也可以在純色筆刷標籤中，把 Alpha 調為 0%
　
　
　
　
‧還可以把 Appearance > Opacity 設為 0%
　
　
　
　
按 F5，就可以在 IE 中觀看：( 下圖是 Fade Out 中 )
　

　
　
再載入沒有 Gaussian Blur ( 命名為 Clear ) 的圖檔，依下圖調整時間軸與 Alpha ( α )，就完成了 Fade In / Out 的效果
　

　
　
下載上述 Fade In / Out 的範例：
　

　
‧點選其中的 Default.html，就可以看網頁檔 ( 要再看一次請按 F5 )

‧載入檔案的方式：
　按下拉選單 > File ( 檔案 ) > Open Project ( 開起專案 )，就可以開啟剛下載的檔案了
　
　
　
　
　如果工作區裡的東東沒出現，請 DbClick Project 面板中的 Scene.xaml
　
　
　
　
　如果時間軸沒出現，按紅框處的下拉選單，點選 Timeline1 即可
　
　
　
　
　

　
　
　
　
Silverlight 1.0 基礎（1）
　
　
基礎　
　
　
看看 Expression Blend ( Silverlight 專案 ) 的面板
　

　
看起來最少要 5 個檔案：Default.html, Default.html.js, Scene.xaml, Scene.xaml.js, Silverlight.js
以下就以 Silverlight 官網的這一篇為腳本來小小研究一下
　
　
　
準備
　
要搞 Silverlight 的東東，至少必需準備下面 3 種東東：
　
‧The Silverlight Plug-in
　沒有 Browser 的 Plug-In，就無法看到 Silverlight 的東東 ( 這一點跟 Flash Player 完全一樣 )
　如果您還沒安裝 Silverlight 這個 Browser 的 Plug-In，請趕快安裝： Silverlight 1.0 Beta or 1.1 Alpha ( 反正都是測試版，就安裝 1.1 Alpha 唄 )
　
‧HTML 檔
　既然是 Browser 的 Plug-In，當然得有個網頁來包住 Silverlight
　有不少人的習慣很不好：搞完一個 Flash 後，就把 *.swf 檔直接丟上網路 ( 沒有以 HTML 包住 )
　
SampleHTMLPage.html ( 第 1 個檔案 ) ← 對應到 Silverlight 專案中的 Default.html
　

第 1, 2 行，在筆者正式寫 Expression Web 之前，請先參考筆者以前寫的底稿 ( 第 #3 ～ #5 則 )
開啟 Windows 記事本，然後 Copy / Paste 上述語法，再存成 *.html 檔 ( 下述會一直在這個 HTML 檔裡面加入語法 )
　
【註】: 上面的語法框是修改自 Ticore' Blog，特此聲明 ( see also: Google Code )
　
　
‧Text Editor ( 文字編輯器，如 Windows 記事本，甚至是 Dreamweaver、Expression Web )
　要編製 HTML 檔，當然得有個文字編輯器
　
　
　
Step 1：在 HTML 頁面中加入 Silverlight.js
　
請先下載 Silverlight.js ( 右鍵 > 另存目標 )，把 Silverlight.js ( 第 2 個檔案 ) 與上述的 HTML 檔擺在同一個檔案夾
再把載入 Silverlight.js 的 JavaScript 語法，擺在 <head></head> 中
　

Silverlight.js 的主要目的就是以 JavaScript 來控制，以確保 Silverlight 的東東可以跨平台
　
　
　
Step 2：在 HTML 頁面中加入 createSilverlight.js
　
請先下載 createSilverlight.js ( 右鍵 > 另存目標 )
‧同 Silverlight.js 一樣，儲存在與上述 HTML 檔相同的檔案夾
‧與 Silverlight.js 不一樣，Silverlight.js 不需要修改，但是 createSilverlight.js 的內容得視情況修改
　

第 6 行：在 <head></head> 中塞入 createSilverlight.js ( 第 3 個檔案 ) ← 對應到 Silverlight 專案中的 Default.html.js
　
　
createSilverlight.js：( 大概看得懂即可 )
　

function createMySilverlightControl()
{
    Sys.Silverlight.createObject(
        "myxaml.xaml",                  // Source property value. 《 XAML 檔的路徑與檔名 ( 第 4 個檔案 ) 》
        parentElement,                   // DOM reference to hosting DIV tag. 《　請參考：1、2、3、4，原則上不懂無傷 》
        "mySilverlightControl",          // Unique control ID value. 《 控制項的唯一名稱 》
        {                                // Control properties.
            width:'300',                // Width of rectangular region of 《 寬度, pixels, 畫素 》
                                              // control in pixels.
            height:'300',               // Height of rectangular region of 《 高度, Pixels, 畫素 》
                                              // control in pixels.
            inplaceInstallPrompt:false, // Determines whether to display 《 偵測 Silverlight 的版本，若有必要會提示安裝 》
                                              // in-place install prompt if
                                        // invalid version detected.
            background:'#D6D6D6',       // Background color of control. 《 背景色 》
              isWindowless:'false',       // Determines whether to display control 《 決定是否要顯示一般 Windows 的外觀 》
                                              // in Windowless mode.
            framerate:'24',             // MaxFrameRate property value. 《 每秒最大的格數 》
              version:'0.9'               // Control version to use. 《 Silverlight 的版本，即 Silverlight 1.0β = 0.9 版 》
        },
        {
            onError:null,               // OnError property value -- 《 onError 值 = 空 》
                                              // event handler function name.
            onLoad:null                 // OnLoad property value -- 《 onLoad 值 = 空 》
                                              // event handler function name.
        },
        null);                          // Context value -- event handler function name. 《 Context 值 = 空 》
}

　
　
Step 3：置入 Silverlight
　

mySilverlightControlHost

// Retrieve the div element you created in the previous step.

mySilverlightControlHost

// This function creates the Silverlight control.

createMySilverlightControl

‧第 5、6 行：載入上述的兩個 JavaScript 檔
　
‧第 10 ～ 12 行：Silverlight 就擺在這邊
　
　。網頁裡要出現的東東，當然要擺在 <body></body> 中，所以 10 ～ 12 行也得擺在 <body></body> 中
　
　。一個網頁裡，可能擺置了一個以上的 Silverlight
　　故每一個 Silverlight 都要有自己的 ID ( 同一頁網頁裡，每一個 Silverlight 的 ID 都不能相同 )
　　Silverlight 都放置在 DIV 中，本例則為：id="mySilverlightControlHost"
　　( 您也可以改成您好記的 ID，但是別忘了所有相關的語法處，都得一併修改之 )
　
‧第 14 ～ 23 行：載入了 JavaScript，也給 Silverlight 一個 ID，但是這兩者尚未連接上，所以需要一段 Script 來執行之
　
　。這段 Script 要緊跟在 Silverlight </DIV> 的後面
　
　。每新增一個 Silverlight，就得新增一段 Script，一樣得跟在屁股後面 ( 但是別忘了，相關的 ID 也要跟著修改 )
　
　
　
【整理】一個 Silverlight 檔，共計至少需要 4 個檔案：
　
　
　
　
　
Step 4：微軟，俺被你打敗了…
　
‧就只是語法的簡單說明，微軟 Silverlight 的官網就可以寫得「很有學問 ( ← 很難懂之意 )」、文義與段落還前後錯置 ....
　
‧還可以把檔名、ID 等命名，故意搞得跟 Expression Blend 的 Silverlight 專案檔 ( 上圖 ) 不同
　
‧最後還又玩一次，要您下載 ( ←筆者已經幫您整理成一包了 ) 命名又不一樣的東東 …，俺真的徹底被打敗了　＝..＝凸
　
‧還沒完，更扯的是檔案有誤 ( 上述的下載檔，筆者已經更正其錯誤之處 )　凸＝..＝凸
　
‧然後您還被誤導以為是很多個 Silverlight 擺在同一個網頁，結果只是一個圓 ....　凸凸凸＝..＝凸凸凸
　
　
　
　
…………………………………………………………………………………………………………………………………………………………………………………………………
　
　
再來，看看 Part 2 －－ XAML 的基礎 ( 不是啥驚動萬教的範例，就只是上圖那個圓 )
Again, 檔案與語法又是亂七八糟，所以請以筆者上述下載檔中的 SampleProject.xaml 為準：
　

‧第 1 行：Canvas = 畫布 = Layout = 300 Pixels × 300 Pixels
　
‧第 2, 3 行：類似筆者以前寫的《 XMLns ( NameSpace ) 》底稿 ( 第 #3 ～ #5 則 )
　
‧第 5, 6 行：依序為橢圓形的高 / 寬各為 200 px、橢圓形距畫布的左 / 上距離各為 30 px、外框為黑色、外框粗細為 10 px、填色為淺藍
　
　
把上述的語法 Copy / Paste 到 Expression Blend 的 XAML 標籤頁面，對照一下就很好懂了
　

　
　
…………………………………………………………………………………………………………………………………………………………………………………………………
　
　
基本範例　Basic　
　
　
頂畫布上的物件　the Canvas object　　
　

Silver

DeepSkyBlue

Lime

請比較第 8、13、18 行：如同向量軟體一樣，越後面繪製的物件，就會蓋過 ( 置前 ) 前面的物件
　

　
　
　
如同 CSS 一樣，設定 ZIndex，就可以改變置前置後的順序：( 數字越大，就在越上面 )
　

Silver

ZIndex="3"

DeepSkyBlue

ZIndex="2"

Lime

ZIndex="1"

　

　
　
　
　　　　　　　　
　
　
…………………………………………………………………………………………………………………………………………………………………………………………………
　
　
初學 Expression Blend 會有非常多的困擾：
　
第一、很多人一開始根本就不知道 Silverlight 要如何置入到網頁中
　　　在剛才的 Silverlight 基礎 > Step 3：置入 Silverlight 中，才知道原來要放在 DIV 中
　
第二、好不容易才搞懂 Silverlight 要如何置入到網頁中，但是長寬卻搞不定（下例）
　
　
看看語法，畫布 ( 頂畫布、工作區 ) 的長寬都是 200px，圓的直徑也是200px
按理來說圓的右下側應該被裁掉才對，不過按 F5 預覽，不但沒被裁掉，網頁的大小也遠遠超過 200 × 200 px
　　

Width="200" Height="200"

Height="200" Width="200"

　
頂畫布只有 200 × 200 px
　

　
　
圓的右下角不但沒被裁掉，而且看看捲軸 ( 網頁的右下角 )，Silverlight 的大小還遠超過 200 × 200 px
　

　
　
頂畫布不能決定 Silverlight 的大小，頂畫布只不過是為了底色等用途
Default.html 才能決定Silverlight 的大小 ( Default.html.js 中，也有長寬的參數 )
把 Default.html 中的長寬改為 200 × 200 px，圓的右下角就順利被裁掉了
　

　
　
改變 Browser 的大小，捲軸也不會出現
　

　
　
　
另一種狀況：
Default.html 的 640 × 480 px 維持不變
　

　
　
Default.html.js 中，長寬原本都是100%，改成 200 px
　

　
　
按 F5 看網頁：
圓的右下角被裁掉了 ( 頂畫布的尺寸是 200 × 200 px )
不過網頁裡的東東卻佔了很大的面積，捲軸出現了 ( Silverlight 的大小是640 × 480 px )
　

　
　
…………………………………………………………………………………………………………………………………………………………………………………………………
　
　
Canvas ( 頂畫布 ) 中，還可以再塞入其它的 Canvas
　

Canvas

/Canvas

　
　
請注意，這兩個是填了色的畫布，而不是填了色的矩形
　

　
　
　
　
繪製與填色　Drawing and Painting　　
　
　
Silverlight 支援的向量圖形 ( Shape Elements, 造形元素 ) 計有：Ellipse 橢圓 , Rectangle 矩形 , Line 線 , Polyline 折線 , Polygon 多邊形 , 和 Path 路徑
其中最基本的就是 Ellipse, Rectangle , Line
　
‧橢圓　Ellipse
　Ellipse 可以藉由寬 ( Width ) 高 ( Height ) 來描述出正圓與橢圓

‧矩形　Rectangle
　Rectangle 可以藉由寬 ( Width ) 高 ( Height ) 來描述出正方形與矩形
　同時也可以藉由 RadiusX 和 RadiusY 來描述圓角
　　
‧線　Line
　Line 則是藉由 X1, Y1, X2, Y2 來描述一條直線
　

Ellipse

Rectangle

Line

　

　
　
　　　　在 Expression Blend 中，直線工具的語法是 <path>，而不是 <line>
　　　　( 不過 Expression Blend 一樣支援 <line> )
　
　　　　
　
　
‧多邊形 / 折線　Polygon / Polyline
　

Polyline

Polygon

　

　
　
　　　　在 Expression Blend 中，折線工具與多邊形工具的語法是 <path>，而不是 <Polyline> 與 <Polygon>
　　　　( 不過 Expression Blend 一樣支援 <Polyline> 與 <Polygon> )
　
　　　　
　
　
‧路徑　Path
　Path 可以描述出比較複雜的造型：折線、多邊形、曲線、圓弧、…
　Path 比教特殊的參數是 Data，可以參考下例
　

Path

Data

Path

Data

Path

Data

　

　
　
如果您對 Path 的標籤語法 ( Markup Syntax ) 有興趣，可以在 Silverlight SDK 中找到資料
　
　
…………………………………………………………………………………………………………………………………………………………………………………………………
　
　
題外話：( 對不怕語法的人來說，上述的 XAML 一看便懂，但是對於不熟悉語法的人而言，已經要他們的命了…，所以休息一下唄 )
　
Photoshop 自從 7 版開始，逐步加強了筆刷 ( Brushes ) 的功能，這讓很多原本玩 Painter 的 user，紛紛改玩 Photoshop
( 倒不是 Photoshop 在筆繪的功能比 Painter 強，而是筆繪與影像處理都在 Photoshop 中搞，可說是再方便不過的了 )
不過筆刷功能徹底活用的觀念，還是本天下無敵火星人所開啟的 ^++++++++++++^
　
下述都是以筆刷的觀念出發，每一張圖也花沒多少時間：( 少則三分鐘，多則一小時 )
　
　

　
　

　
　

　
　

　
　

　
　

　
　

　
　
筆刷讓 Photoshop 不再只能搞一些相片處理、合成與特效，而是可以無中生有出比較有人性的東東
　
　
當初微軟併購 MetaCreations 的 Expression ( 即 Expression Design ) 這套 向量筆刷 軟體時，筆者就很納悶：
幹嘛不去併購功能更強悍的 CorelDRAW ?! ( 甚至去併購 ACDSee Canvas or Xara Xtreme 都好 )
或許是微軟想通了：比起一般的向量軟體，筆刷與筆繪比較有人性
　
Flash 讓向量軟體的觀念大放光明
Silverlight + Expression Design 或許可以讓向量筆刷軟體的觀念如銀光 ( Silverlight ) 瀑灑 ?!
搞不好微軟表面電腦 ( Surface ) 的 UI 就是 WPF + 向量筆刷 ?!
　
　
先來看看 Expression Design 的筆刷：( 在Expression Design 中，隨便以筆刷畫條線 )
　

　
　
Copy / Paste 到 Expression Blend ( 筆刷的邊緣有透明度喔 )
　

　
　
切換到 XAML 的標籤模式
　

　
　
語法：( 由 4 個 Path 所構成 )
　

Path

　
　
大致瞭解了 Expression Blend ( WPF, Silverlight ) 與 Expression Design 的筆刷觀念後
接著看下述的 Brush 觀念，就比較不會困擾了
　
　
…………………………………………………………………………………………………………………………………………………………………………………………………
　
　
以筆刷填色　painting shapes with brushes
向量物件都有邊框 ( Stroke ) 與填色 ( Fill )，不管是邊框或是填色，對 XAML 來說，都是筆刷 ( Brush )
　
　
Silverlight 目前支援 5 種筆刷：
　
‧純色筆刷　SolidColorBrush
‧線性漸層筆刷　LinearGradientBrush
‧放射漸層筆刷　RadialGradientBrush
‧影像筆刷　ImageBrush
‧視訊筆刷　VideoBrush
　
　
純色筆刷　SolidColorBrush
　
‧Fill="顏色" ( 如 Black, red )
‧Fill="#rrggbb"
‧Fill="#aarrggbb" ( aa 代表 alpha 透明度 )
‧Color="顏色"
　

black

#000000

#ff000000

Color

Black

　
　
　
線性漸層筆刷　LinearGradientBrush
　

　
　
分述如后：
　
　( 已放大 )
　

<Rectangle Width="140" Height="70" Canvas.Left="10" Canvas.Top="10">
  <Rectangle.Fill>
    <LinearGradientBrush>
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

　

　
‧XAML 的漸層預設是：左上到右下
‧每換個漸層色 ( 不管是起點、中間點或是終點 ) 就要有個 Stop ( 停駐點 )
‧Offset 是位移 ( 與最左側的距離 )
‧剩下的對照一下，應該一看就懂
　
……………………………………………………………………………………………………………
　

　

<Rectangle Width="140" Height="70" Canvas.Left="155" Canvas.Top="10">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

　
調整為水平線形漸層
　

　　
　
　
放射漸層筆刷　RadialGradientBrush
　

　

<Rectangle Width="140" Height="70" Canvas.Left="10" Canvas.Top="110">
  <Rectangle.Fill>
    <RadialGradientBrush>
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
    </RadialGradientBrush>
  </Rectangle.Fill>
</Rectangle>

　

　
從圓心向外放射
　
……………………………………………………………………………………………………………
　

　

<Rectangle Width="140" Height="70" Canvas.Left="155" Canvas.Top="110">
  <Rectangle.Fill>
    <RadialGradientBrush GradientOrigin="1,0">
      <GradientStop Color="Yellow" Offset="0.0" />
      <GradientStop Color="Red" Offset="0.25" />
      <GradientStop Color="Blue" Offset="0.75" />
      <GradientStop Color="LimeGreen" Offset="1.0" />
    </RadialGradientBrush>
  </Rectangle.Fill>
</Rectangle>

　

　
改變放射原點
　
　
　
影像筆刷　ImageBrush
　

Stretch="Uniform"

　
影像筆刷會直接塞滿黑框的矩形 ( 上圖左 )
如果不想要比例跳掉，就可以加上 Stretch="Uniform" ( 上圖右 )
　
　　
　
視訊筆刷　VideoBrush　( 等一下討論 Media 時，就會講到 )
　
　
　
通用的圖形性質　Common Graphic Properties　　
　
　
Silverlight 的 UIElement Objects ( Silverlight 介面的基礎物件 ) 計有：Canvas 畫布、Shapes 造形 ( 向量物件 )、TextBlock 文字區
　
而上述這幾種物件，又有一些通用的圖形性質：
‧Opacity property　不透明度
‧OpacityMask property　不透明度遮罩
‧Clip property　裁切
‧RenderTransform property　變形
　
　
不透明度　Opacity Property
　

Opacity="1.0"

Opacity="0.6"

　
　
　
不透明度遮罩　OpacityMask Property
　

OpacityMask

LinearGradientBrush

GradientStop Offset="0.25" Color="#00000000"

GradientStop Offset="1" Color="#FF000000"

　
　
從 Offset = 0.25 開始完全透明 ( alpha = 00 ) 到 Offset = 1 的完全不透明 ( alpha = FF )
　

　
　
OpacityMask 可以套用任何一種筆刷，不過比較常使用 LinearGradientBrush, RadialGradientBrush 與 ImageBrush
上例是 OpacityMask 套用在一個矩形上
　
　
　
裁切　Clip Property
　

RectangleGeometry Rect="0, 0, 100, 100"

　
　
以 Geometry Object ( 幾何物件 ) 來裁切，在 Geometry Object 以外的部份會被切掉
本例是以 RectangleGeometry ( 矩形幾何物件 ) 來裁切 Ellipse ( 橢圓 )：
　　
　
　
　
　
變形　RenderTransform Property
　
　
RenderTransform 有下面幾種功能：
‧旋轉變形　RotateTransform
‧歪斜變形　SkewTransform
‧比例變形　ScaleTransform
‧移動　TranslateTransform
　
如果要套用上述超過一種以上的變形，則要加用變形群 ( TransformGroup )
　
原圖：
　

　

RenderTransform

RotateTransform Angle="45"

RenderTransform

SkewTransform AngleX="30"/

RenderTransform

ScaleTransform ScaleX="1.3" ScaleY=".5"

RenderTransform

TransformGroup

RotateTransform Angle="45"

ScaleTransform ScaleX=".5" ScaleY="1.2"

SkewTransform AngleX="30"

　
　
　
旋轉變形　RotateTransform
　

<Rectangle Height="100" Width="100" Canvas.Left="70" Canvas.Top="10" Fill="Black">
  <Rectangle.RenderTransform>
    <RotateTransform Angle="45"/>
  </Rectangle.RenderTransform>
</Rectangle>

　

　
　
　
歪斜變形　SkewTransform
　

<Rectangle Height="100" Width="100" Canvas.Left="130" Canvas.Top="10" Fill="red">
  <Rectangle.RenderTransform>
    <SkewTransform AngleX="30"/>
  </Rectangle.RenderTransform>
</Rectangle>

　

　
　
　
比例變形　ScaleTransform
　

<Rectangle Height="100" Width="100" Canvas.Left="10" Canvas.Top="190" Fill="blue">
  <Rectangle.RenderTransform>
    <ScaleTransform ScaleX="1.3" ScaleY=".5"/>
  </Rectangle.RenderTransform>
</Rectangle>

　

　
　
　
變形群　TransformGroup
　

<Rectangle Height="100" Width="100" Canvas.Left="160" Canvas.Top="130" <Fill="Green">
  <Rectangle.RenderTransform>
    <TransformGroup>
      <RotateTransform Angle="45"/>
      <ScaleTransform ScaleX=".5" ScaleY="1.2"/>
      <SkewTransform AngleX="30"/>
    </TransformGroup>
  </Rectangle.RenderTransform>
</Rectangle>

　

　
　
　
影像　Images　　
　

Image Source="01.png" Canvas.Left="-65" Canvas.Top="-36"

　
　
Expression Blend ( Silverlight ) 對於圖檔的表現度，是遠遠超過 Flash !!
之前已講過，在 Expression Blend 縮放去背的圖檔 ( *.png )，圖緣都不會鋸齒化，也不易模糊

XAML 置入透明背景的 *.png 檔，也比 Flash 直覺多了
　
　
伸展　Stretch Property
　

Stretch="None"

Stretch="Fill"

Stretch="Uniform"

　
　　　　None：原尺寸
　　　　Fill：填滿
　　　　Unform：依比例縮放
　
　
　
文字　Text（TextBlock）　
　
　
文字區元素　TextBlock Element
　
在 Expression Blend ( Silverlight ) 的工具箱中，就只有文字區 ( TextBlock ) 這一個文字工具 ( 即為本例的 <textblock> )
　

　
　

<TextBlock>

</TextBlock>

　
　
　
通用文字區性質　Common TextBlock Propeties
　
　
　　　　前面講過：
　　　　Silverlight 的 UIElement Objects ( Silverlight 介面的基礎物件 ) 計有：Canvas 畫布、Shapes 造形 ( 向量物件 )、TextBlock 文字區
　
　　　　而上述這幾種物件，又有一些通用的圖形性質：
　　　　‧Opacity property　不透明度
　　　　‧OpacityMask property　不透明度遮罩
　　　　‧Clip property　裁切
　　　　‧RenderTransform property　變形
　
　
除了適用於上述的通用性質之外，文字區也有一些自己的性質：
‧FontSize：文字尺寸 ( pixels )
‧FontStyle：文字樣式 ( Normal 一般，Italic 斜體，Oblique 傾斜 ← 若字型無 Italic 這附加選項時，則用 Oblique )
‧FontWeight：文字粗細 ( Thin, ExtraLight, Light, Normal, Medium, SemiBold, Bold, ExtraBold, Black, ExtraBlack )
‧FontFamily：文字家族
‧Foreground：前景色 ( solid color, gradient, or an image )
　
文字區的性質 + 漸層：
　

　
　
整體來說
‧Expression Blend 與 Silverlight 的文字功能並不強
‧Silverlight 測試版也不支援中文 ( 2 byte )《不過 Expression Blend 倒能正確顯式中文字》
‧不過其物件化夠徹底，輔之還有通用的圖形性質 ( Common Graphic Properties )，在處理上倒是加分不少
Silverlight 未來正式版若是能加強文字的功能、加入對 2 byte 的支援，還是非常有前景
　
　
　
運行元素　Run Element
　
如果要改變字串中文字的大小，就可以套用 <run>，在 <run> 中也可以加用文字區的各種性質
　

<Run FontSize="90" Foreground="#FFB43535">

</Run>

　
　
　
多種字型的設定　Specifying Multiple Fonts
　
跟 HTML 一樣，字型也可以設定優先順序
還有萬用字型－－ Portable User Interface，可以保證任何電腦都能支援 ( 但 Silverlight 目前是測試版，不支援中文，故一樣沒輒 ... )
　

Arial, Times New Roman

Times New Roman, Arial

Portable User Interface

　
　
　
媒體　Media（Audio / Video）　
　
　
置入媒體　MediaElement ( 以 *.WMV 與 *.WMA 檔為主 )
　

MediaElement

　← Click
　
　
　
加上介面的基礎物件 ( UIElement Objects )
　

<Ellipse Height="200" Width="200" Canvas.Left="30" Canvas.Top="30"
Stroke="Black" StrokeThickness="10" Fill="SlateBlue"
Opacity="0.6"

　← Click
　
　
　
套用放射漸層筆刷：
　

MediaElement.OpacityMask

RadialGradientBrush

　
JavaScript：
　

stop()

pause()

play()

　
　← Click
　
　
　
全螢幕播放　Full-Screen Media Playback
　

　
JavaScript：
　

　
　← Click
　
　
　
視訊檔填塗　Painting With Video
　

Opacity="0" IsMuted="True"

This
<TextBlock.Foreground>
<VideoBrush SourceName="myMediaElement" />
</TextBlock.Foreground>
</TextBlock>

</Canvas>

　← Click

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

2007-06-13T19:18:00.000+08:00

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，在工具箱中都有了 )

About IE 7 Core

2007-06-08T20:39:00.002+08:00

2007‧0716
　
雖然 Windows Vista 已問世好一陣子了，但 Windows XP 目前還是首選 !!
‧Windows 2000 SP4 雖然也很好用，但是太舊了 )
‧Vista 還有驅動程式不相容的問題，而且 64 位元的 OS / App 也尚未普及 )
　
重點是，若是 XP SP2 的用戶，不安裝 IE 7 就太可惜了
　
IE 7 與 Office 2007 很類似，那就是有點返樸歸真的味道：介面清爽多了 ( 當然也可以自訂成複雜一點 )、使用上更順手
IE 7 多了很多新功能，於此不一一贅述，只提幾個比較特殊的功能
　
　
畫面可以縮放：（在 IE 的右下角）
　
　( 也可以按 Ctrl ＋ / － 來縮放 )
　
　這對於年長者或是小朋友言，這是很實用的功能
　
　
Clear Type 的支援
　
　
　
　Clear Type 一開始的目的：主要是針對液晶螢幕，可以讓網頁字型更柔順一點
　但是從 WPF 起，Clear Type 有了新意，所以無論是 TFT-LCD 還是 CRT，都建議開啟 Clear Type 的功能
　
　
防堵釣魚網站：
　
　所謂釣魚網站，舉個簡單的例子：
　‧假設某銀行的網址是 1bank.com.tw
　‧釣魚網站會去申請網址 lbank.com.tw
　　( 1 ( 123 的 1 ) 與 l ( lmn 的 l )長得很像，沒注意的話根本就不會發現 )
　釣魚網站也會編製得與銀行網站一模一樣，然後再利用 E-mail 到處狂寄，說是銀行有特惠活動 ...
　
　等到您依網址進去釣魚網站，輸入您的帳號密碼，釣魚網站馬上就完成了竊取帳號密碼的動作，再轉回原銀行網站的網址
　一切都天衣無縫，您也只會覺得是密碼輸入錯誤，再試一次就過關了 ( 等著荷包大失血唄 )
　
　釣魚網站現在的危害已經遠遠超越病毒、木馬、駭客入侵、…、等等，所以一定要養成好習慣：
　只要是電子交易，一定要自己輸入正確的網址 !!
　因為釣魚網站也會去申請 1bank.com ( ← 沒有 .tw )，一旦您粗心漏鍵入 .tw，一樣會著了他們的道
　
　與所有詐騙集團一樣，釣魚網站的玩法也日新月異：不一定就只是上述這些眾人皆知的步數
　
　但是開啟了防堵釣魚網站的功能之後，IE 會變得鈍 ( lag ) 一點
　若您平常只在固定的網站晃，可以不用開啟此項設定；若您會到處跑，電腦的知識又不夠周全，那麼還是開啟之會比較好
　
　
　
　
　IE 7 當然還有很多與網路安全有關的功能，如：
　
　
　
　
　

　
　
　
扣掉安全性等等的功能之外，IE 7 最重要的新功能就是終於支援了「Tab 標籤」：
　
　

　　　　　　　　　　　　　　▲　　　　　　　　　　　　　▲　　　　　　　　　　　　　▲
　
所謂標籤的功能，就是一個視窗裡，可以納入很多網頁 ( 如上圖，以標籤切換之 )
而不像以前的 IE 6.0，一個網頁就是一個視窗，實在是既吃資源、又佔畫面
　
不過微軟帝國的神經末稍實在是有待加強：
早在 IE 5.0 時代，就有一堆 IE 外掛軟體已支援標籤的功能，還可以在文字或是圖檔的 Link 上，直接拖曳就另開新的標籤網頁
　
IE 7 雖然終於新增了標籤的功能，但卻還是不支援拖曳另開標籤的功能。得先按右鍵、然後再點選之、…，實在是 Stupid 到家了 !!
　　
以下分幾類來討論：
第一、安裝 IE 7 pro 來新增拖曳另開標籤網頁 ( 超級拖拉 ) 等功能
　　　這個功能很重要：
　　　‧可以很快就拖曳出一堆網頁
　　　‧下次重新啟動 IE 時，會自動開啟上次關閉 IE 前的所有網頁
第二、MyIE ( IE 核心 )
第三、GreenBriwser ( IE 核心 )
第四、Maxthon ( IE 核心 )
第五、非 IE 核心
　
　
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
　
　
第一、安裝 IE 7 pro
　
MS 雖然財大氣粗，但很多時後非還是非用他們的產品不可 ( 譬如很多人不喜歡電腦裡裝了一大堆來路不明的 Tools )
故 IE 7 只要加裝一個 add-on ( 附加元件 )，就可以新增一堆功能
　
請先下載並安裝 IE 7 pro：
　

　
　
不用擔心，安裝時可以選擇繁體中文：( 看來這支 Tool 是老共寫的，他們的 Tools 多半會支援繁體 )
　

　
　
安裝好後，重新啟動 IE，就可以在下拉選單 > 工具中找到 IE7Pro Preferences：
　

　
　
其中比較重要的功能：
　
‧超級拖拉
　可以在文字 Link 或是圖檔 Link 上拖曳，就會開啟新的標籤網頁
　
‧滑鼠雙擊關閉索引標籤
　在標籤上連點兩下，就可以關閉該標籤網頁 ( 大半的軟體按 Ctrl + W 也可以關檔 )
　
‧啟用當機還原功能
　若是不幸當機，重新啟動 IE 時，就會自動開啟當機前的所有標籤網頁
　
　
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
　
　
第二、MyIE（IE 核心）
　
MyIE 是 IE 核心瀏覽器最知名的一款
所謂 IE 核心，就是這個東東是基於 IE 而寫的 ( 可視為「外掛」)，沒有 IE，這東東就不能使用
　
MyIE 在 3.2 版以後，就停止開發了
雖然 MyIE 已停止開發，但是其原始碼是開放的，所以就有人以 3.2 版的原始碼為基礎，繼續開發：
　
‧MyIE 3.2 → MyIE2 → Maxthon
　請注意：MyIE 3.2 先，後來才有 MyIE2
　簡言之：MyIE 3.2 是 MyIE 的 3.2 版，MyIE2 則是 MyIE 的第 2 代
　
‧MyIE 3.2 → GreenBrowser
　
‧MyIE 3.2 → GreenBrowser 3.X → MyIE 4 ( MQ 版 )
　
故不管是 MyIE 3.2 / MyIE2，都已是比較舊的版本，無需理會與安裝
而 MyIE 4.X ( MQ 版 )，則是 GreenBrowser 3.X 的精簡版，很少見，也不用理會
　
　
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
　
　
第三、GreenBrOwser（IE 核心）
　
老共有很多有趣的閒人，經常把一些軟體改成免安裝就可以直接使用，並稱其為「綠色軟件」
　
GreenBrowser 就是在相同的理念下開發的 → 解壓縮後就可以直接使用 ( 免安裝 )

筆者個人特別喜歡用 GreenBrowser：
‧綠色軟體，可以隨身攜帶 ( 存在記憶卡中 )
‧再把「我的最愛」與 Cookie 一併存在記憶卡中，就可以走到哪兒用到哪兒
‧很多實用貼心的小功能
‧GreenBrowser 再加上 IE 7 原有的功能，可謂非常強悍且好用
　
　
下載 GreenBrowser：( GreenBrowser 首頁 )
　

　
or　繁體中文站
　
　
GreenBrowser 有很多 IE 所沒有的實用功能，不過寫起來會是一大串，所以各位網友就自行 try see see 囉
　
　
匯出與匯入： ( 僅示範匯出「我的最愛」)
　

　
匯出 Cookie 的方法與上述的步驟相同，不再贅述 ( 匯入的方法也大同小異 )
　　
　
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
　
　
第四、Maxthon（IE 核心）
　
跟 GreenBrowser 一樣，Maxthon 也是從 MyIE 3.2 蛻變而來
也跟 GreenBrowser 一樣，Maxthon 有很多 IE 7 至今仍欠缺的功能 !!
　
基本上不論是安裝 GreenBrowser or Maxthon 都差不了太多，這兩個東東都一樣好用
( 當然也可以同時安裝這兩個，再加上 IE 7，就有三個 Browsers 隨您玩了 )
　
‧主程式
‧繁體語言包 ( 下載 Chinese Traditional > 解壓 > Copy / Paste 到 Language 中即可 )
　
　
很重要的一點：
一昇級為 IE7，不管是 GreenBrowser or Maxthon，這些 IE 核心的 Browser 也跟著昇級
同時這些 IE 核心的 Browser 還有一些 IE7 所欠缺的功能
　
只要安裝 IE 7 之後，就可以有下列的組合：
‧IE 7 + IE7Pro
‧IE 7 核心 + GreebBrowser ( 有無 IE7Pro 都無影響 )
‧IE 7 核心 + Maxthon ( 有無 IE7Pro 都無影響 )
　
　
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
　
　
第五、非 IE 核心
　
這類比較有名的計有：FireFox、Opera、Safari
　
這要從一些歷史開始講起：
話說最早的 Internet ( 網際網路, 即網網相連 ) 就是美國國防部在冷戰時期的 APANET
不過這是軍方的實驗，並沒有走入商業與尋常百姓家
　
後來，Email、Gopher、BBS、FTP、Telnet、…、等等 Internet 的應用相繼問世，Internet 的需求也愈來愈多元、愈來愈旺盛
不過那時除了 Email 之外，其它的系統對一般人言，既不好懂、也無啥實用價值
　
直到丁肇中主持歐洲 12 國合資的同步輻射加速中心 ( CERN ) 裡
有一位叫做 Tim Berners-Lee 的研究人員研發出 WWW、HTTP、URL、HTML 之後
( 主要是為了解決 CERN 內部有著大量研究資料需要即時公佈、傳遞、…、等問題 )
Internet 才開始一日千里
隨著電話撥接轉為寬頻之後，Internet 才走入尋常百姓家
　
WWW 太過成功了，以至於很多人以為 WWW 就是 Internet !
其實 WWW 只不過是 Internet 一種比較為大家所知道的應用罷了
　
WWW 與 HTML 出現後，正好需要一個好一點的瀏覽器來瀏覽與解譯圖文 / 排版
所以第一個像樣的瀏覽器出現了－－ Mosaic
Mosaic 出現後，讓 WWW 初期出現第一道光可鑑人的曙光：
只要有瀏覽器，WWW 就變得親切很多，不再像是學術單位難以理解的東東
於是乎 Mosaic 就商業化為一家後來非常知名的公司－－ Netscape
　
當時微軟還沉浸於 Windows / Office 終於打下主流市場的喜悅中
( 微軟好不容易才打敗 IBM 的 OS/2、IBM 的 Lotus SmartSuite、Borland、… )
誰知道才沒多久，Netscape 就席捲了整個 Internet
　
微軟當時的神經末稍不像現在這麼遲鈍，也感覺到 Internet 的未來不會「太小眾」
所以很快地就推出了 IE 與 MSN Messenger 來應戰。以作業系統綁樁的結果就是：
‧ICQ 一下子就被 MSN 巴死了
‧Netscape 3 與 IE 3 ( Browser 3 時期 ) 開始交戰，Browser 4 時期就已平手
　等到 Browser 5 時期，IE 5 就幹掉了 Netscape 5
　　
IE 6 開始，微軟的 Browser 就天下無敵了
( 其間除了 Opera 這個沒啥人用的瀏覽器還持續更新之外，Netscape 也賣給了 AOL )
微軟也只推出遠遠落後於 PC 版的 IE 給 Mac 族，後來根本就不推 IE for Mac
Apple 也只好自行研發爛爛的瀏覽器－－ Safari
　
Netscape 過繼給富爸爸之後，也極思轉型，故仿效 Linux 的 OpenSource 觀念
成立了 Mozilla 基金會，開放了 Netscape 大部份的原始碼，供程式開發社群持續研發
FireFox 這個瀏覽器就是從 Mozilla 基金會所蛻變出來
　
因為大家對微軟的獨大很有戒心，故很自然地就投射希望在 FireFox 的身上
‧IE 只顧 Windows 版
‧Opera 雖然程式很小，但還是登不上主流的市場，故有往嵌入式設備發展的味道
‧Safari 就算了，連 Mac 族都懶得用
　(【火語錄】：在 Internet 上，Mac 是永遠的二等公民 )
‧FireFox 不止有 Windows 版，更有 Mac / Linux 版，輔一推出，就受到市場的期待
　雖然 FireFox 的市佔率已近 20%，但也開始樹大招風，被發現有很多的漏洞 ....
　
理論上來說，除非 FireFox 在 Windows 的市佔超過 25%，否則以目前的市場來看
還是暫時以 IE 或是 IE 核心的那幾套為主，才可省下很多的麻煩
( FireFox 的用戶目前還是以工程師與勇於嘗新者居多，主流商用者則少很多 )

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

2007-05-30T08:29:00.001+08:00

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 就很好懂了
等到適當的實例，再來仔細討論畫布工具

Ch 0　About

2007-05-29T10:04:00.001+08:00

2007．0530
　
　　‧　.NET Framework 3.0（OS add-on）
　
　　‧　Silverlight（Browser Plug-in）
　
　　‧　幾個例子
　
　　‧　Expression Blend
　
　　‧　Web 2.0 vs. AJAX vs. RIA vs. UX
　
　
　

　
　
　
　
.NET Framework 3.0（OS add-on）
　
　
Windows Vista 已包含 .NET Framework 3.0 ( .NET Framework 3.0 ＝ .NET Framework 2.0 + WPF + WWF + WCF + WCS )
Windows XP SP2、Windows Server 2003 SP1 就得要安裝 .NET Framework 3.0
　
下載 .NET Framework 3.0 唄：
　

　
安裝了 .NET Framework 3.0，才能支援 WPF 的應用：WPF 的 *.EXE ( 筆者稱其為 WPF / *.EXE )、XBAP
　
　
　

　
　
　
　
Silverlight（Browser Plug-In）
　
　
先看看下面幾個例子，再決定要不要玩 Expression Blend 2.x + Silverlight 1.1　
　
Silverlight 與 FlashPlayer 很類似，反正都是網際網路的多媒體播放器
請先安裝 Silverlight 這個瀏覽器的 Plug-Ins：( 才能看下述的例子 )
　

　
本系列的文章，主要只 Focus 在能跨 OS、跨 Browser 的 Silverlight 與設計相關的 WPF / *.EXE
至若要寫程式的 XBAP、 WPF / *.EXE，則點到為止
　
　
　

　
　
　
　
幾個例子
　
　
‧Flash-Like
　
　。
　。
　。
　。
　
　
‧IE-based eBook　( Multimedia、AutoPlay Media Studio、… Killer )
　
　。
　。
　
　
‧SkinBrowser　( iceProjector、Jugglor、MDM、… Killer )
　
　。
　。
　
　
‧3D、VR　( VRML、Cult3D、ViewPoint、… Killer )
　
　△ 支援 3D
　。
　
　
‧Silverlight　( Flash Killer )
　
　△ 視訊檔 ( 視訊檔的邊緣套用筆刷漸層，就會變成 Blur / Feather 去背 )
　△ 全螢幕 ( 按 Esc 鍵 or Windows 鍵，就可以還原 )
　。
　。
　。
　
　
　

　
　
　
　
Expression Blend
　
上述的例子，都是以 Microsoft Expression Studio 中的 Expression Blend 所編製的
　
　
大家第一個最關心的就是 Expression Blend vs. Flash
　
　　筆者只能說：這是一場不公平的戰爭 ( Flash 絕對被痛宰 )
　　所以筆者就擔任真相調查委員會的委員，寫了這一系列的文章 ( 爆冷 ^^||| )
　　除了搞動畫 Flash 目前比較方便之外，在其它方面 Flash 幾無優勢 ...
　
　
大家第二個關心的是 Expression Blend 的資料要到哪裡去找 ?!
　
　　第一、Expression Blend 1.0 已經落伍了，因為不支援 Silverlight
　　　　　在您看到本文時，市面上應該有一些 Expression Blend 1.0 的中文書，花了錢去買舊資訊 ?! 故不用理會那些書 !!
　　　　　請直接使用 Expression Blend 2.X
　
　　第二、Silverlight 1.0 也已經落伍了，因為不支援很多重要的新功能
　　　　　所以請安裝 Silverlight 1.1 ( or higher )
　
　　第三、資料哪裡找 ?! 啊就從這裡開始呀 !! ^++++++++++++++++^
　
　
大家第三個關心的是誰該學習 Expression Blend ?!
　
　　管你是ㄚ貓ㄚ狗、程式設計師 ( 工程師 ) 還是網頁美編 ( 設計師 )，反正任何人都該學就對了：
　
　　‧喜不喜歡微軟是一回兒事，但是 Windows 好用就很重要了
　　　( 哪像啥軟體都沒有的爛 Mac、哪像連安裝都很麻煩的 Linux )
　
　　‧喜不喜歡微軟是一回兒事，但是 Microsoft Office 好用就很重要了
　　　( 雖然現在有 Open Document 的爭論，但是 MS Office 早已是一種標準 )
　
　　‧喜不喜歡微軟是一回兒事，但是您會使用 Windows、您會使用 MS Office、您也會使用 IE
　　　同樣的道理，未來您也會使用 Expression Blend + Silverlight + XAML
　　　( 簡言之：可以與作業系統整合、有著與作業系統相同的語言、執行速度快、廣泛的多媒體支援、… )
　
　　‧喜不喜歡微軟是一回兒事，但是 ActionScript 2.0 與 ActionScript 3.0 不太相容、
　　　Flash MX 2004 與 Flash 5 不太相容、 Flash 8 與 Flash MX 不太相容、…
　　　使用微軟系統的好處是：您在程式語法上投資的時間不會浪費
　　　( C# 到處可用、VB 也到處可用、ASP.NET 與 XAML 一樣到處可用 )
　
　　　未來專為 Windows Vista 撰寫的軟體 ( WPF / *.EXE )，介面部份用的是 XAML
　　　未來 Windows Vista 平台的網際網路應用 ( XBAP )，介面部份用的是 XAML
　　　未來跨平台、跨瀏覽器、跨設備的網際網路應用 ( Silverlight )，介面部份用的是 XAML
　　　未來不管是軟體工程師、網際網路工程師、還是網頁視覺設計師，介面部份用的都會是 XAML
　
　　　也就是說，學完 HTML、CSS、( JavaScript ) 之後，下一個要學的就是 XAML
　　　還好 Expression Blend 是視覺化的軟體，即：
　　　大半的 XAML 語法都不需要自己去 Coding ，Expression Blend 直接就幫您完成了 ( 有點兒類似 Dreamweaver )
　
　
大家最後一個關心的問題是該如何學習 Expression Blend ?!
　
　　Expression Blend + Silverlight 雖然是 Flash + FlashPlayer + Apollo 的 Super Killer
　　但是微軟的這套產品畢竟還是發展中的東東，故中文的資訊一定很有限
　　想要「先佔者優勢」的網友們，請一定要用英文版、看英文資料 !!!!
　　後續的文章筆者會儘量以中英文對照的方式來討論，以期能減少您的「進入障礙」
　
　
　

　
　
　
　
Web 2.0 vs. AJAX vs. RIA vs. UX
　
　
Web 2.0 是一個很空泛的名詞，簡言之就是網站 vs. 網民變成網民 vs. 網民，如：( 網站只提供機制，不製作內容 )
‧YouTube 與無名小站讓網民上傳自己編製的影片或圖片，以供網民欣賞
‧WIKI 是網民集體編撰出來的網路百科全書，以供網民查找資料
‧mySpace 是美國最大的交友網站 ( 韓國的 cyworld 也很類似 )
‧eBay 與 Yahoo 拍賣則是網民之間互相販賣物品
‧上傳圖文很方便的 Blog，還可以開放給網民回應與討論
‧……
不再只是網站負責貼資料，網民負責看資料罷了
　
Web 2.0 在技術方面，通常指的是可以邊下載、邊看資料的技術 ( 不必等到全部下載完才能觀看 )
AJAX 則是 Web 2.0 最具代表性的技術 ( Google Maps 則是引爆 AJAX 的起點 )
其實網路聊天室在發言後不必重新 reload，就是類-AJAX 的觀念
　
AJAX 基本上與 HTML / CSS / JavaScript 一樣，只不過是圖文式的技術，不夠多媒體，互動性也很受限
所以 RIA ( Rich Internet Applications, 網際網路的多媒體應用 ) 式的 Flash 就大受歡迎
　
Windows Vista 之所以會研發了五年才上市
‧Windows 95 ～ 98：3 年
‧Windows 98 ～ 2000：2 年
‧Windows 2000 ～ XP：2 年
‧Windows XP ～ Vista：5 年
主要就是把 Windows 的核心大大地重寫，幅度之大，甚至連 Windows 使用者介面 ( UI, User Interface ) 的部份都獨立出來為 WPF
WPF 一獨立出來後，除了 Windows Vista 的介面利用 WPF 就變成無比華麗之外 ( 現在還有人關心 Mac OSX 嗎 ?!?! ^+++++++^ )
支援 WPF 的軟體 ( *.EXE ) 也可以無比華麗，支援 WPF 的網際網路應用 XBAP 一樣無比華麗
連跨平台、跨瀏覽器、跨設備 ( 如電腦、PDA、行動電話、… ) 的 Silverlight，只用到 WPF 中的 XAML 技術，一樣馬上給它無比華麗 …
　
微軟 WPF 強調的是 RIA ( Rich Interactive Applications, 多媒體互動應用 ) 與 UX ( User eXperience, 使用者經驗 )
‧在 Internet 的位階：HTML → CSS / JavaScript → PHP / JSP / ASP.NET → AJAX → Flash → XBAP or Silverlight
‧在 OS 的位階：DOS → Windows 3.1～ XP → Windows Vista
‧在 Apps 的位階：DOS 的 *.EXE → Windows 3.1～ XP 的 *.EXE → Windows Vista 的 *.EXE
微軟全系列的 OS、Apps、Internet，從 Windows Vista 時代起，已經全面地 RIA 化、UX 化
　
　
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
　
　
微軟的 RIA 與 Adobe 的 RIA ( Rich Internet Applications, 網際網路的多媒體應用 ) 不太一樣
但不管是微軟的 RIA 或是 Adobe 的 RIA：
‧都是以向量為基礎
‧具動畫能力
‧可以展示影音多媒體
‧開放的架構 ( 不管是 FlashPlayer 還是 Silverlight，都公開了 SDK，以利協力廠商開發工具軟體 )
　
　
不過微軟的 RIA ( Silverlight ) 除了上述的基本功能之外，還增加了 Adobe RIA ( Flash ) 所不足或是欠缺的部份：
　
　
支援 3D
　
利用一些 Tools，就可以把常見的 3D 檔轉成一長串的 XAML 語法 → 變成字串物件 → 就可以控制之
　
　
更開放的架構
　
除了 Silverlight SDK 之外，微軟也公開了 Silverlight DOM
如此就可以與 HTML、DOM、CSS、JavaScript、AJAX 整合與互動
　
　
更廣泛的多媒體支援
　
‧直接支援 WMA 與 MP3
‧直接支援 720p HD 與 WMV 之視訊格式
　
　
更易於與企業的網路環境整合
　
‧Flash 雖然也可以與 ASP.NET、PHP、JSP 協同作業，但總是不方便
　而 Adobe Solution 的 Coldfusion、Flex 又太小眾了，在換人 maintain 時，有著高風險
　
‧微軟的 Solution 則很不同：
　除了微軟本身在 Internet 與 Intranet 的環境就很完備之外
　Silverlight 更不設限非用微軟的 Solution ( 如 ASP.NET ) 不可
　管你是 CSS、JavaScript、PHP、JSP、AJAX，一律都可以輕易整合起來，這一點就是 Adobe 所遠遠不能企及的
　
　
更謙卑的態度
　
台灣微軟的經理，光是看到筆者在網路上貼的 Expression Studio 文章
就急著約筆者碰面，並帶著 NoteBook 做簡報
現在的微軟，已不再是以前財大氣粗的微軟了，其重視 HeavyUser 與社群的態度，值得 Adobe 學習
　
　
更核心的業務
　
‧Adobe 的核心業務是 PostScript ( 印刷用的標準語言 ) 與其相關 ( 如 Acrobat、PDF、Illustrator、InDesign、Document Server、… )
　或是大賺其錢的 Photoshop ( 含 Photoshop Elements )
　
　但是 Adobe 併購自 Macromedia 的 Flash / Dreamweaver 與其相關 ( Flex、Coldfusion、Apollo、… )
　並非是 Adobe 的核心業務，所以再怎麼發展，在 Vision 上都會受到核心業務的影響與排擠
　
‧微軟的核心業務是 OS、Office、Internet、Intranet 與程式語言，其中最核心的部份就是 OS !!
　Windows Vista 的 UI 是 WPF，支援 WPF 的語言是 XAML
　
Silverlight 除了是 XAML 的應用之外，同時也是 Internet 的應用，更是一種程式語言的 Player
簡言之，Silverlight 橫跨微軟五大核心業務裡的三種：OS、Internet、程式語言
所以也不用擲笅，微軟當然會全心全力推廣此一相關的技術
　
　
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
　
　
微軟追求的目標：
微軟現在已經超越動態、華麗、互動，而開始追求 UX ( 微軟這次終於擺脫追隨者的惡名，而變成創新的領先群 )
　
‧iPOD 是 PMP ( Portable Media Player, 隨身播放器 ) 面板的 UX
　
‧iPhone 是 PMP 觸控螢幕的 UX
　
‧Wii 是搖桿的 UX
　
‧這也是 UX
　
　
‧微軟 Office 2007 其實也算是軟體操作新的 UX
　
‧微軟 TabletPC 是筆式 OS 的 UX
　
‧微軟 MCE ( Media Center Edition ) 是數位電視的 UX
　
‧微軟新的 Surface ( 研發代號：milan ) 更是觸控電腦的 UX：( 看來也是使用 WPF ?! )
　
　。微軟 Milan 桌面電腦：完全觸控操作
　。微軟的「表面電腦」Milan
　。Microsoft Surface 將給你帶來革命性的改變
　。今日我最美：Microsoft Surface
　。18 分鐘的視訊
　
‧WPF 不只是讓 Windows Vista 有著與以往 OS 不同的 RIA 與 UX
　微軟更進一步釋出權力，讓您也能決定程式 ( WPF / *.EXE ) 、XBAP、Silverlight 的 RIA 與 UX：
　即 Expression Studio 裡面的 Expression Blend，讓您以 XAML 來把玩軟體與網路的 RIA 與 UX

Ch 00　Overview

2007-05-27T21:04:00.000+08:00

2007．0608
　
　　‧　.NET
　
　　‧　.NET Framework
　
　　‧　Windows Presentation Foundation（WPF）
　
　　‧　Silverlight（WPF/E）
　
　　‧　XAML
　
　　‧　XBAP
　
　　‧　Programming Tools for WPF
　
　　‧　Design Tools for WPF
　
　　‧　Tools and Controls for WPF
　
　　‧　DemoSites
　
　　‧　Silverlight 1.1
　
　
　

　
　
　
　
.NET
　
　
　
　
　

　
　
　
　
.NET Framework
　
　
Windows XP / Vista 未來程式的運作架構：.NET Framework 3.0 ( 舊稱 WinFX )
　
　　
　　　　　　　　　　　　　　　( WinFX 是作業系統與應用程式之間的橋樑 )
　
　
而 .NET Framework 3.0 則包含了
‧.NET Framework 2.0
‧Windows Presentation Foundation ( WPF, 舊稱 Avalon ) －－圖形子系統
‧Windows Communication Foundation ( WCF, 舊稱 Indigo ) －－通訊子系統
‧Windows Workflow Foundation ( WWF ) －－把商業流程與網路上的應用加以結合
‧Windows CardSpace ( WCS, 舊稱 InfoCard ) －－身份驗證
‧WinFS －－文件子系統 ( 本來要取代 NTFS，但是現在已暫停開發 )
　

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　( WinFX 是作業系統與應用程式之間的橋樑，但 .NET Framework 3.0 則擴充出更多的功能 )
　
　
簡言之：WinFX → 演變成 → .NET Framework 3.0 ＝ .NET Framework 2.0 + WPF + WCF + WWF + WCS + … ( 但是不含 WinFS )
　
　
這些東東本來都與一般搞設計的無關
但是其中的 WPF，卻關係著次世代多媒體的設計與應用，故也不能不去瞭解 !
　
　
　

　
　
　
　
Windows Presentation Foundation（WPF）：( Windows 多媒體的展示基礎：就是多媒體式的 UI 啦 )
　
　
‧WPF 是 Windows Vista 新的繪圖引擎：提供了豐富的 graphics ( 2D ) , animation ( 動畫 ) , 3D 表現能力
　。Windows Vista 已內建 .NET Framework 3.0
　。Windows XP 必需已安裝 .NET Framework 3.0，才能支援 WPF
　
‧XAML ＝ WPF 的介面 ( UI ) 語言
　傳統上要以 Visual Studio ( C# or VB ) 來寫一個具有漂亮 UI 的軟體是非常的麻煩
　這在 WPF 的情況下已大有改善：介面層採用 XAML，程式層則還是採用 C# or VB
　。XAML 的唸法＝ [ ' zæməl ]
　。C# 的唸法＝ C Sharp
　XAML 能做到的，C# or VB 都能做到 ( 只不過介面的部份以 XAML 來編製會容易很多 )
　C# or VB 能做到的部份，XAML 就不一定能做到了
　
‧WPF / E ＝ Silverlight ( WPF / E ＝ Windows Presentation Foundation / Everywhere, Everywhere = 跨平台、跨瀏覽器 )
　。WPF：作業系統與應用軟體 ( 桌面程式, 即 *.EXE )
　。WPF/E：網頁多媒體 ( Silverlight 很像是 FlashPlayer，但是功能更為強大 )
　
　講 Windows Presentation Foundation / Everywhere 其實很容易誤導大家
　講 XAML Everywhere 其實就好懂多了：WPF 並沒有 Everywhere，有 Everywhere 的只有 XAML
　應用了 WPF 中的 XAML 以達到 Everywhere 的目的＝ WPF / E ( 只用到 XAML，並沒有用到 WPF )
　微軟也怕誤導大家認為 WPF / E ＝ WPF 也可以跨 OS，故把 WPF /E 更名為 Silverlight
　
　但是 .NET Framework 3.0 並不包含 WPF / E ( 微軟在 Windows Vista 之後才推出 Silverlight )
　所以不管是 Vista or XP，都要再安裝 Silverlight，瀏覽器才能觀看 WPF / E 的多媒體效果
　
　請注意：筆者有時後為了與 WPF 對照的方便之故，會使用 WPF / E 一詞，有時後又會直接使用 Silverlight 一詞
　　　　　別忘了，WPF / E ＝ Silverlight

‧Expression Blend ＝微軟專為 WPF ( XAML )、WPF / E ( XAML ) 打造的編輯器
　
　
WPF 是 .NET Framework 3.0 的一部份：
故 WPF 的程式可以直接叫用 .NET Framework 豐富的 APIs，除了易於撰寫 WPF 的程式之外也與 Windows 整合得更緊密
　
Silverlight ( WPF /E ) 並不是 WPF 的一部份：
‧WPF /E 與 WPF 除了都支援 XAML 之外、WPF / E 與 WPF 除了名稱很像之外，這兩個東東在本質其實相差很多 !!
‧為了避免大家把 WPF / E 與 WPF 看成是很類似的東東，故微軟把 WPF / E 更名為 Silverlight
但是 Silverlight 在多媒體的支援廣度、展示效果與速度，還是優於 FlashPlayer
　　
簡單來說，在相同的效果下，速度的快慢： WPF > WPF/E ( Silverlight ) > Apollo ( Flash / FlashPlayer / Flex ) > DHTML
　
　
　

　
　
　
　
Silverlight（WPF/E）
　
　
Flash 萬事受限於時間軸 ( Flash 時間軸的位階太高了，一切都被時間軸綁死 )
Silverlight 時間軸的位階沒那麼高，故在編製上，Silverlight 就比 Flash 彈性多了、也方便多了
　
說 Silverlight 是 FlashPlayer Killer，其實是小看了 Silverlight !!
說 Expression Blend 是 Flash Killer，一樣是小看了 Blend !!
　
　
Silverlight 運用了 WPF 裡面一個共通的技術：XAML
這讓開發 WPF / *.EXE、XBAP、Silverlight 的介面，不需要重複學好幾種不同的語言，一個 XAML 就吃到底
　

　
　
　
XAML ＝微軟專為 WPF 與 WPF/E 所打造的 UI ( RIA / UX ) 開發語言
單獨的 WPF，目前是走不出 .NET 與 IE 的 Windows 系統
但是如下圖，Silverlight 一支援 XAML 之後，XAML 就可以在不需要 .NET ( Windows ) 的情況下跨 OS、跨 Browser、跨 Devices、跨商用、…
　

　　
　
　
Silverlight 的 UI 表現能力，雖然略遜於 WPF 的應用 ( WPF / *.EXE or XBAP )
但是跨 OS + 跨 Browser + 跨 Device + RIA + 與 WPF 都使用相同的 XAML ＝後勢可期 !!
就更遑論 Silverlight 在 UI ( RIA / UX ) 上是如何地超越 AJAX、PHP、JSP、ASP.NET 了
　　

　
　
　

　
　
　
　
XAML
　
　
XAML ＝微軟專為 WPF 與 WPF/E 所打造的開發語言
　
XAML 與 HTML / XML 很類似，都是文字標籤，不是很易於編製
就像 HTML 需要 Dreamweaver、Frontpage、Expression Web、…、等編輯器一樣，XAML 也需要一些視覺化的編輯器或是輔助工具
　
XAML 太新了，所以微軟就推出了自家的 XAML 編輯軟體：Expression Blend
只要是 XAML 檔，就可以載入再加工之
　
　
故 user 就需要各種不同類型的 XAML 轉檔工具，一旦轉成了 XAML 檔，就可以：
　
‧Expression Blend → 載入 XAML → ( C# or VB ) → 超華麗介面的桌面程式 ( *.exe )
　( 因為可以直接叫用 .NET Framework 3.0、並支援 C# or VB，故功能非常強悍 )
　
‧Expression Blend → 載入 XAML → Silverlight → 多媒體、動態的網頁應用
　( Silverlight 目前只支援 XAML，故功能沒有 WPF 那麼強悍 )
　
　
Adobe 要 Flash / Apollo 兩套貴貴軟體才能做的事，現在 Expression Blend 一套就可以做到了
　
　
　
【2D 的 XAML】
　
　在 Expression Blend 按 Ctrl + I ( Add Existing Item ) 輸入檔案：
　
　
　
　
　可以發現在 2D 的方面只支援點陣圖 ( *.jpg 與 *.png ← 即：可以背景透明的 PNG-24 )
　所以就輸入一張背景透明的 PNG 檔：
　
　
　
　
　可以發現在 XAML 中，多了紅框那一行：( 點陣圖是以載入外部圖檔的方式嵌入 )
　
　
　
　
　但是向量圖該怎麼辦呢 ?! 方法至少有三種：
　
　第一、在 Expression Blend 直接繪製 ( 也可以填色，但先省略之 )
　
　　　　
　
　　　　　　　　　　即：向量檔變成了 XAML 檔 ( 不是以載入外部圖檔的方式嵌入，而是變成一串的 XAML 語法 )
　
　
　第二、在 Expression Design 中繪製好了之後，再輸出為 XAML 檔
　
　　　　
　　　　　　一樣是向量檔變成了一串的 XAML 語法
　　　　　　( 向量檔中若是包含點陣圖，其中的點陣圖還是會以載入外部圖檔的方式嵌入，不會變成一串的 XAML 語法 )
　
　
　　　　Expression Design 就可以輸入 AI 檔，然後再轉成 XAML
　
　　　　
　
　第三、Illustrator 也有可以輸出 XAML 檔的 Tools / Plug-Ins
　
　。XAML Exporter　( for Illustrator CS2 )
　
　　這東東目前 ( 2007‧06 ) 還在 0.2 版，但卻很有趣：( 不是 Illustrator 的 Plug-Ins，是一個獨立的小軟體 )
　　可以在開啟 Illustrator 與 XAML Exporter 之後，一按 XAML Exporter，就把 Illustrator 現行開啟的圖檔轉成 XAML
　
　　
　
　
　。XAMLExport　( for Illustrator CS2 )
　
　　這東東就是 Illustrator CS2 的 Plug-Ins 了，支援 WPF 與 WPF/E 的輸出，不過一樣只是 0.1x 版
　
　　
　
　　一則很多人的電腦跑 Illustrator CS2 會跑不太動、再則上述兩個都是 0.1 ～ 0.2 版
　　故目前以 Expression Design 來把 AI 檔轉成 XAML 是最理想的方式
　
　
　
【3D 的 XAML】
　
　
　。ZAM3D
　
　　Flash 的 3D Tools －－ Swift3D 聽過吧 ?! 對，就是同一家公司 ( Electric Rain ) 專為 XAML 打造的 3D Tools：
　　是把 3D 檔 ( 3D 動畫亦可 ) 轉成一串的 XAML 語法喔，不是載入外部的 3D 檔喔 !!
　
　　
　
　　看個簡單的小範例唄 ( 必需已安裝 Silverlight )
　
　
　　ZAM3D 可以載入 DXF / 3DS 檔，然後再轉成 XAML 檔：
　
　　
　
　
　。3D 檔 → XAML
　
　　這類的 Tools 非常多：
　　有 MAYA to XAML、Lightwave to Xaml Converters、Online converter from 3ds to XAML、
　　XAML Export Script for Blender ( 3D Tools for the WPF )、Deep Exploration、…
　
　
　
【Audio / Video 的 XAML】
　
　
　。在 Expression Blend 中輸入 Audio 檔：以載入外部樂音檔的方式嵌入
　
　　
　
　
　。在 Expression Blend 中輸入 Video 檔：以載入外部視訊檔的方式嵌入
　
　　
　
　
　
至此下個簡單的結論：
　
‧XAML 是 WPF、WPF/W 共同的開發語言
　
‧微軟的 Expression Blend 是編製 XAML 的利器
　　
‧向量檔與 3D 檔都可以轉成一串的 XAML 語法（Blend 可以載入該 XAML 檔再加工之）
　　
‧點陣圖、聲音檔、視訊檔則都是以載入外部檔案的方式嵌入到 XAML 中（Blend 可以載入該 XAML 檔再加工之）
　
‧Silverlight 簡單來說就是 XAML Player
　
　
　

　
　
　
　
XBAP
　
　
XBAP ( XAML Browser Application ) ＝以 XAML 來搞 UI、在瀏覽器 ( 把瀏覽器當 OS ) 中執行的程式，可取代過去的 ActiveX control ( 如 Flash )、Java Applet
　
安裝了 Visual Studio 2005 Extensions for .NET Framework 3.0 之後 ( 沒安裝前是顯示 WinFX )，就可以編撰 XBAP 的應用了：
( Expression Blend 2 Preview 目前為止，還無法直接生出 XBAP 的應用 )
　　

　
　
同一個 XBAP 應用，可以發佈為 *.XBAP 的網頁格式：( 在 IE 中瀏覽 )
　

　
　
同一個 XBAP 應用也可以發佈為 *.EXE 的格式：( 即 Windows 應用程式 )
　

　
( 上兩圖摘自微軟網站 )
　
Visual Studio 2005 實在是非常強大的開發工具：
‧Visual Studio 2005 可以開發一般的 Windows 程式 ( 桌面程式，即 *.exe )
‧Visual Studio 2005 Extensions for .NET Framework 3.0 可以開發 WPF / XAML 華麗介面的 Windows 程式
‧Visual Studio 2005 Extensions for .NET Framework 3.0 可以開發 XBAP
‧Visual Studio 2005 的下一代－－ Visual Studio Orcas，更可以直接開發 Silverlight
　
　
　
很多時候 WPF / *.EXE 並不會比 XBAP 來得好用 ( 雖然單一應用來說，WPF / *.EXE 會比較強 )：
尤其是 XBAP + ClickOnce ( ClickOnce 與 XBAP 都是在 Visual Studio 2005 中發佈 )
XBAP 雖然只能在 .NET Framework 3.0 + IE 下執行 ( 不能跨平台 )，但是其網際網路的支援，比起 WPF / *.EXE 來說實用多了
　
　

　
( 本 Blogger 主要的 Target 是 Designer，不是 Programmer，所以 XBAP 也只點到為止 )
　
　
　

　
　
　
　
Programming Tools for WPF
　
　
Base Environment
　
作業系統與網頁 Plug-Ins 總得先備齊吧
‧Windows XP SP2 ( or Windows Server 2003 Service Pack 1 ) + .NET Framework 3.0 ( Windows Vista 已內建 .NET Framework 3.0 )
‧Silverlight
　
程式撰寫的環境
‧Visual Studio 2005 with SP1 and Windows Vista Support Files　
　( 也有 Free 的 Visual Studio 2005 Express 可以下載，並已包含了大半會用到的功能 )
‧Visual Studio 2005 Extensions for .NET Framework 3.0 ( WCF & WPF )
　( Visual Studio 2005 的下一代－－ Visual Studio Orcas Beta 1 也已經開放下載了 )
‧Windows SDK
‧Expression Blend
‧Expression Design
　
多媒體的編製環境
Microsoft Expression Studio 計有：
。Expression Web ( 網頁編製 )
。Expression Design ( 向量繪圖 )
。Expression Blend ( 多媒體編製與程式撰寫 )
。Expression Media ( 多媒體檔案管理 )
等 4 套軟體，但是只有 Expression Design 、Expression Blend 才與 XAML 有關
　
　
Tools and Utilities
　
‧早期多半都是使用 WinFX SDK 中的 XAMLPad
　現在則有更好用的 XAML Pad 工具：XamlPadX、Kaxaml 與 XamlCruncher
　上述三個 PadTools 各有所長，最好是全部下載試用後，再選一個適合自己的
　( 別小看這些 Tools：Pad 類的 Tools，還是很多工程師的最愛 )
　
　XAMLpadX：
　
　
　
　KaXAML：
　
　
　
　XAML Cruncher：
　
　
　
‧其它的 Tools：Lutz Roeder's .NET Reflector、Snoop、Performance Profiling Tools for WPF、Flexible Application Template
　
　
Building a Code Toolbox
　
3D Tools for WPF ( 3D 表面控制 )、Kevin's Bag-o-Tricks ( 一堆控制物件 )、UI Automation Stress ( 壓力測試 )
　
　
Sample Applications
　
‧兩個 Visual Studio 範例
　。Healthcare Prototype
　。Woodgrove Finance Application
‧一個視訊教學 ( 請先看這個，72.5MB )
　
　
Tips and Tricks
　
上述 ( Programming Tools for WPF ) 都是參考 Tim Sneath 的文章 ( 筆者有小部份增減 )
若是怕英文，就看簡體版唄。剩下的瑣碎部份，就不多提了
　
　
　

　
　
　
　
Design Tools for WPF
　
　
上述是工程師可能會用到的，所以那些英文他們自然看得懂
至若搞設計的就簡單多了：
　
‧Expression Blend
　專為 XAML 打造的編輯器
　
‧Expression Design
　專為 XAML 打造的繪圖軟體 ( 可以載入 AI 檔、再轉成 XAML )
　
　　多媒體的編製環境
　　Microsoft Expression Studio 計有：
　　。Expression Web ( 網頁編製 )
　　。Expression Design ( 向量繪圖 )
　　。Expression Blend ( 多媒體編製與程式撰寫 )
　　。Expression Media ( 多媒體檔案管理 )
　　等 4 套軟體，但是只有 Expression Design 、Expression Blend 才與 XAML 有關
　
‧Adobe Illustrator
　Illustrator CS2 已經有 Plug-Ins 可供 XAML 的輸出 ( 不過都只是 0.1 ～ 02. 版 )

‧ZAM 3D
　專為 XAML 打造的 3D 軟體 ( 可以載入 DXF 與 3DS 檔、再轉成 XAML )
　
　
　　

　
　
　
　
Tools and Controls for WPF
　
　
XAML 編輯器
　
‧Expression Blend
　微軟自家的 XAML ( WPF、WPF/E ) 編輯器，把玩 WPF 的第一選擇 !!
　Blend 1.0 只支援 WPF / *.EXE，即將推出的 Blend 2.0 則支援 Silverlight

‧Expression Design
　RIA 的基礎一定是向量，故微軟也推出了 XAML 的向量編輯器 Expression Design
　除了可以原生出 XAML 檔之外，也可以讀入 Illustrator 檔、再轉成 XAML
　
‧Aurora XAML Designer
　你 Flash 是閃光對不對 ?! 你 Silverlight 是銀光閃閃對不對 ?!
　好，這家公司叫做極光 ( Aurora )，大家一起來閃一閃＝..＝
　
　
　　
　( 這也是 XAML 的編輯器，但是試用版只能使用 20 次，故筆者沒充份的時間也不敢去 Try。不過看起來還不錯用 )
　
‧Visual Studio 2005 extensions for .NET Framework 3.0 ( WCF & WPF )
　在前面的 Programming Tools for WPF 中有提到：
　。Visual Studio 2005 with SP1 and Windows Vista Support Files
　。Visual Studio 2005 Express
　。Visual Studio Orcas Beta 1
　
　我們知道 Visual Studio 2005 的功能強大：可以編撰並發佈 WPF / *.EXE、XBAP、…
　所以
　。Visual Studio 2005 的 user 最好能下載並昇級到 SP1
　　若是 Vista 的 user，當然就去下載 Windows Vista Support Files
　。如果想要把玩 .NET Framework 3.0 的新功能，就安裝 Visual Studio 2005 extensions for .NET Framework 3.0 ( WCF & WPF )
　。若是想嚐新，更可以去試用 Visual Studio Orcas Beta 1
　。當然啦，若是沒錢買 Visual Studio 2005，也可以去下載免費、而且具備 Visual Studio 2005 大半功能的 Visual Studio 2005 Express
　
‧當然啦，文字式的 XAML 編輯器也有利於徹底瞭解 XAML：XAMLPad、XAMLpadX 、KaXAML、XAML Cruncher
　
　
……………………………………………………………………………………………………………………………………………………………………………………
　
　
3D Tools for XAML

　
‧ZAM3D
　最方便、簡易、順手的 XAML 3D Tool
　
　ZAM3D 可以載入 3DS / DXF 檔：
　
　
　
　Expression Blend ( WPF / *.EXE ) 可以載入 obj 檔：
　
　
　
　有了 ZAM3D 與 Expression Blend，幾乎已不需要其它的 3D Tools 了
　
‧Deep Exploration
　可以輸入超過 40 種各種的 3D 格式檔、稍加修改之、輸出為 XAML 檔
　
　。Deep Exploration 5.0 CAD Edition：
　
　　
　
　。沒有不支援的 3D 格式：( 3DS MAX、MAY、Softimage｜XSI )
　
　　
　
　。主畫面：
　
　　
　
　。支援超多 3D 檔案格式間的轉檔：
　
　　
　　
‧MAYA to XAML
　免費的 MAYA 轉 XAML 工具
　　　
‧Online converter from 3ds to xaml
　線上轉檔 ( 3DS2XAML ) 的網站
　
‧Lightwave to Xaml Converters
　Lightwave 轉 XAML 工具
　
‧Xaml Export Script for Blender
　Blender 是一個跨平台、Free 的 3D 軟體 ( 宇宙大爛片蜘蛛人２，就是以 Blender 製作的 )，可以參考 WIKI
　
　
……………………………………………………………………………………………………………………………………………………………………………………
　
　
2D Tools for XAML

　
‧Fireworks to XAML Exporter
　把 Adobe / Macromedia 的 Fireworks 檔，輸出為 XAML
　
‧Adobe Illustrator to WPF/XAML Export Plug-In
　Iluustrator CS2 的 Plug-In ( 前面有提過 )
　
‧XamlXporter for Illustrator
　Illustrator CS2 的 XAML Tool ( 前面有提過 )
　
‧SWF2XAML: A Flash to XAML Conversion Tool
　把 SWF 檔轉成 XAML ( 也還只是 0.2 版 )
　
　
……………………………………………………………………………………………………………………………………………………………………………………
　
　
Controls
　
‧NetAdvantage for WPF 2007
　一堆 WPF 的 controls
　
‧Chart FX for WPF
　2D, 3D, animation, and data binding capabilities of WPF
　
‧Actipro Wizard
　遵循微軟 Wizard 97 的 WPF 控制元件
　
‧DataGrid for WPF
　免費、但是專業且全功能的 WPF 資料格 ( Data Drid ) 控制元件 ( Demo )
　
‧Wpf-Ribbon
　遵照 Office 2007 Ribbon ( 帶狀工具板 ) 的 WPF 控制元件
　該公司同時也有 Windows Forms 的 Ribbon control
　
‧Actipro Ribbon
　另一家 Office 2007 Ribbon ( 帶狀工具板 ) 的 WPF 控制元件
　
‧blendables
　一堆 WPF 的 controls
　
　
　

　
　
　
　
DemoSites
　
　
‧XBAP　( WindowsXP 需安裝 .NET Framework 3.0 )
　
　。日本旭山動物園　( 右鍵轉地球，左鍵點選 )
　
　。Warner 華納
　
　。大英圖書館善本書展示
　
　。全球氣象圖　( 右下角可以切換平面或是球體。左右鍵都有功能，三個寬扁藍鍵也有功能 )
　
　。CNET Japan　( 按 ↑ ↓ 鍵唄 )
　
　。SHISEIDO
　
　。小日本無厘頭的 Windows Vista　( 按左下角的攝影機，就可以 VR )
　
　。金融應用

　。Data Grids
　　
　
‧Silverlight 1.0　( 需安裝 Browser Plug-In: Silverlight 1.0 β )
　
　。FOX Movies　( 可以直接播放 WMV，不像 Flash 還要轉成 *.flv )
　
　。翻書效果　( 右下角處一按，就有飛梭功能 )
　
　。YouTube - Like　( 輕鬆就搞出類似 YouTube 的效果 )
　
　。強力介面　( 可縮放、拖曳移動 )
　
　。Office 2007 - Like
　
　。鍵盤鋼琴　( Z ～ M：白鍵　SDGHJ：黑鍵 )
　
　
‧Silverlight 1.1　( 需安裝 Browser Plug-In: Silverlight 1.0 α )
　
　。模擬航空訂票系統　( 先拖曳兩個城市、再拖曳右側的日期，下方就會出現轉機等飛航資訊 )
　
　。影音播放　( 先等它跑玩一次 ← Hosting 在國外，所以比較慢 )
　　‧在影音嵌入與播放面板等功能，Flash 完全不是對手
　　‧在視訊畫面上按一下，就全螢幕；再按一次 ( or 按 Esc 鍵 )，就恢復正常
　
　。社交圈
　
　。射擊遊戲　( 按 ASDW 鍵 )
　
　。魔法寶石
　
　。西洋棋
　
　
　
Silverlight + 華麗的 WPF / *.EXE ＝ Expression Blend 一套就搞定了
　
還需要 Adobe 貴貴的 Flash、Flash Player、Apollo 幹嗎 ?!
　
　
　

　
　
　
　
Silverlight 1.1
　
　

　
　
　
請先看看 Silverlight 1.1 的架構圖：( Click 看大圖 )
　

　
　
　
Application Platform
　
很重要地，.NET 支援 LAMP ( Linux + Apache + MySQL + PHP )
　

　
　
　
Services
　
Web Service 目前還是以支援微軟的為主
　

　
　
　
Tools
　
.NET 的主要開發軟體：Visual Studio ( Programmer ) 與 Expression Studio ( Designer )
　

　
　
　
Framework Languages
　
整個 .NET Framework 支援的程式語言：
‧主要的是 C#、VB、Jscript ( 微軟的 JavaScript，比一般的 JavaScript 架構更大，但也相容之 )
‧未來主要會再支援 VBx ( 即：VB 10 )
　

　
　
　
Platforms
　
Silverlight 1.1 除了 Windows 之外，也支援 Mac OSX
( 比較有趣的是，也將支援永遠不死的 Windows 2000 )
在 Browser 方面，則全數支援
　

　
　
　
Presentation Framework
　
展示層，看看就好。本系列是以設計為主，不是偏程式語言
　

　
　
　
Communications Framework
　
通訊層，看看就好
　

　
　
　
Data Framework
　
資料層，看看就好
　

　
　
　
Presentation Core
　
展示核心
支援所有的 Browser、支援 XAML、支援的多媒體格式夠多
　
很多人說 Silverlight ( WPF / E ) 是 WPF 的子集 ( subset )，這不是很正確的說法
應該說 Silverlight 支援的 XAML 是 WPF 的子集 ( 即：XAML 才是 WPF 的子集 )
　

　
　
　
Common Language Runtime（CLR）
　
這個 CLR ( 多種語言的通用執行環境 ) 就重要了：
Silvetlight 1.0 只支援 JavaScript，但是 Silverlight 1.1 就支援多種語言的通用執行環境
( Silverlight 1.1 也有 BCL, Base Class Library。CLR 與 BCL 是 Silverlight 1.1 最有力的雙手 )
　
如此，CLR 就可以做到：
‧記憶體管理
‧安全性驗證與執行
‧例外錯誤處理
‧執行 C# or VB 編譯後的程式，比原生的 JavaScript 快上數百倍

光是 CLR 與 BCL，就可以讓 FlashPlayer 變成玩具 ...
　

　
　
　
Base Classes
　
資料類別，看看就好
　

　
　
　
　
　
跟 Silverlight 1.1 相較，FlashPlayer 有著先天上的缺陷：
　
‧FlashPlayer 沒有 OS 相關技術的直接支援
　
‧FlashPlayer 的技術老舊、架構也不周全
　
‧FlashPlayer 只有 ActionScript 一種語言
　
　。對工程師來說太簡單，所以不屑玩（故反而不會玩，因為要先克服 Flash 的基礎用法）
　
　。對設計師而言則太難，所以沒幾個人會玩

Ch 01-01　調整工作空間　Adjusting your workplace

2007-05-26T12:31:00.001+08:00

2007‧0608
　

　
　
　　‧　改變佈景主題　Changing Themes
　
　　　　　　Menu > Tools > Options > Workplace > Theme > dark or light
　　　　　　Menu > Tools > Options > Workplace > Workplace zoom > 50 ～ 150
　
　　‧　改變藝術底板的顏色　Changing the background color of the artboard
　
　　　　　　Menu > Tools > Options > Artboard > Background
　
　　‧　切換編製頁面　Changing authoring views
　
　　　　　　F11：Design
　　　　　　F12：XAML
　
　　‧　切換工作空間的模式　Changing workspaces
　
　　　　　　F6：Design Workplace
　　　　　　F7：Animation Workplace
　　　　　　Menu > Window > Reset Active Workplace ( Ctrl + Shift + R )
　
　　‧　顯示或隱藏面板　Showing or hiding panels
　
　　　　　　Tab or F4
　
　　‧　工作區的縮放與移動　Zooming and panning
　
　　　　　　Pan ( DbClick、Space )
　　　　　　Zoom ( DbClick、Alt )
　
　
　

　
　
　
　
改變佈景主題　Changing Themes
　
　
下拉選單 > Tools > Options，點選 Workplace ( 工作空間 )，再修改 Theme
　

　
　
( 1 / 2 )
Expression Dark ( 深色系 )
　

　
　
Expression light ( 淡色系 )
　

　
　
筆者個人比較喜歡深色系的主題，因為比較有工作站軟體的質感。但是下拉選單的對比過強 ( 接近純黑 vs. 白字 / 白線 )，則有點刺眼
　
　
( 2 / 2 )
Workspace zoom ( 工作空間縮放 )：100%
　

　
　
Workspace zoom ( 工作空間縮放 )：150%
　

　
zoom 到 150%，就可以看出來 Expression Blend 整個介面都是向量字 ( ClearType )、向量圖，如此就能縮放不失真
整個 WPF，也是如此：介面都是縮放不失真的向量 ( 比 Flash 還向量得更徹底 )
　
如果您的螢幕不大，或是想要有比較大的工作區：就把 Workspace zoom 調到低於 100%
　
　
　　　　Windows Vista 的文字呈現預設是 ClearType
　　　　也可以在 Vista 傳統設定中找到與 XP 一樣的設定 ( 如下圖 )
　　　　若是 XP 的用戶，請儘量改成是 ClearType、並習慣之：
　　　　因為未來 for Windows Vista ( WPF ) 的應用軟體，都會以此方式行之
　　　
　
　
　

　
　
　
　
改變藝術底板的顏色　Changing the background color of the artboard
　
　
開啟一個專案檔後，才能看到 Artboard
　

　
　
依下圖就可以修改 Artboard 的背景色
　

　
Artboard 的底色並不會影響到成品的底色，Artboard 的底色只是個人喜好的自訂項
　
　
　

　
　
　
　
切換編製頁面　Changing authoring views
　
　
按 F11 / F12 就可以切換之：( Design 是設計模式，XAML 是語法模式 )
　

　
　
乍看之下，這與 Dreamweaver / Frontpage / Expression Web 很類似，都有設計與語法的標籤頁面可以切換
　
但 Expression Blend 實則是很革命性的概念：
Expression Blend 同時是桌面程式 ( *.exe ) 與網頁 ( Silverlight ) 的編製軟體
以前軟體程式工程師 ( *.exe )、網頁程式工程師 ( ASP / PHP / JSP / … )、網頁設計師 ( HTML / CSS )、UI 設計師 ( *.exe 的 UI ) 這四種專業人員
使用的軟體都不一樣，彼此的專業共同性也不高
而 Expression Blend 打破了這個限制：一般的案子，現在大家可以共用同一個軟體了
即：程式設計師 ( XAML ) 與視覺設計師 ( Design ) 都共用同一個軟體，這讓協同作業的效率大大地提高
　
不過以台灣的生態而言
工程師 ( 程式設計師 ) 以後多少都要得懂一點基本的美編，才能完全掌控 Blend
而美編 ( 網頁設計師 ) 以前好不容易才克服了 HTML / CSS，現在則又要多學 XAML 了
　
　
　

　
　
　
　
切換工作空間的模式　Changing workspaces
　
　
( 1 / 2 )
按 F6 / F7 就可以切換之：( Design 是設計模式，Animation 是動畫模式 )
　
Design Workplace
　

　
　
Animation Workplace
　

　
　
( 2 / 2 )
這是 Blend 的介面

　
　　　　按下圖紅框處可以搬移面板
　
　　　　
　
　
筆者的個人習慣是使用雙螢幕 ( 22" + 19" )，所以就把右側的面板都搬到另一顆螢幕 ( 工作區就可以大很多了 )
　

　
　　　　即移動下述的面板到另一顆螢幕
　
　　　　
　
　
大致就是下圖的樣子 ( 工作區大了很多。再搭配前述的 Workplace zoom，工作區還可以更大 )
　

　
　
隨時都可以還原成 Blend 預設的配置：下拉選單 > Window > Reset Active Workplace ( 快速鍵：Ctrl + Shift + R )
　

　
　　　　Reset Active Workplace ( 還原 作用中 的工作空間 )：指的是只對正在作用中的 Workplace 還原為預設的面版配置
　　　　換句話說：
　　　　若是已更動了 Design Workplace ( F6 ) 的面版配置，而在 Animation Workplace ( F7 ) 中執行 Reset Active Workplace
　　　　這並不會影響到 Design Workplace ( F6 ) 的面版配置 ( 反之亦然 )
　
　
　　　　Blend 的預設配置是沒有 Results 的面板，可以在下拉選單 > Window > Results 叫出
　
　　　　
　
　
　　　　Blend 的這五個面板都很常用
　　　　‧Interaction ( 互動面板 )
　　　　‧Project ( 專案面板 )
　　　　‧Propeties ( 性質面板 )
　　　　‧Resources ( 資源面板 )
　　　　‧Results ( 結果面板 )
　
　　　　其中比較特殊的是 Results 面板：
　
　　　　在網頁的專案中，比較用不到 Results 面板
　
　　　　
　
　
　　　　但是在執行檔 ( *.exe ) 的專案中，Results 面板就很重要了
　
　　　　
　
　　　　　　　　因為 Results 面板會顯示程式錯誤等重要的資訊：
　
　　　　　　　　
　
　
　
不管是 Design Workplace ( F6 ) 還是 Animation Workplace ( F7 )，其實面板都一模一樣
差別只在於在 Animation Workplace ( F7 ) 時，因為要有時間軸，所以 Interaction 面板被放置在下方，以利時間軸的擺置：
　

　
　
　

　
　
　
　
顯示或隱藏面板　Showing or hiding panels
　
　
按 Tab 鍵 or F4，就可以把所有的面板隱藏起來 ( 再按一次就會出現 ):

　
至此已有 Workplace zoom、拖曳面板 到另一個螢幕 ( 雙螢幕適用 ) 與 Tab / F4 鍵 等三種方法，可以讓工作區更大
　
　
　

　
　
　
　
工作區的縮放與移動　Zooming and panning
　
　
在 Workplace zoom、拖曳面板與 Tab / F4 鍵設定後，工作區已不可能再變大
再來就是工作區：
　
Pan Tool ( 工作區手形移動工具 ) 與 Photoshop 的手形工具 相同，主要是把長或寬大於 Artboard 的工作區移動，以利編輯
( 連按兩下 Pan Tool，工作區就會在 Artboard 區置中 )
　
Zoom Tool ( 工作區顯示縮放 ) 也與 Photoshop 的顯示縮放工具相同
( 除了滑鼠左鍵 + Alt 鍵 可以縮小之外，連按兩下 Zoom Tool，就會顯示為 100% 的大小 )
　

　

　　
Expression Blend 的 Pan / Zoom Tool 與 Photoshop 幾乎完全一樣，再輔以 Workplace zoom、拖曳面板 與 Tab / F4 鍵
這些都能有效地增進編製的效率

【火星人】Expression Blend 2.X ( Silverlight )

Index

A010

A009

A008

A007

A006

A005

A004

色碼表

Silverlight Streaming

離題大系

010

009

008

不必 Decompiler

更像網頁編製（Applications = Code + Markup）

JavaScript 的重生

3D 檔 → XAML

視訊檔縮放

圖檔縮放

100 個不使用 Flash / 換用 Blend + Silverlight 的理由

Ch 01-10

Ch 01-09

Ch 01-08

Ch 01-07

Ch 01-06

Ch 01-05　專案管理　Managing Your Projects（2）

Ch 01-04　專案管理　Managing Your Projects（1）

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

Roadmap

About IE 7 Core

火星文

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

Ch 0　About

Ch 00　Overview

Tools

Tutorial

Ch 01-01　調整工作空間　Adjusting your workplace

10 個例子建立觀念（01）　Windowless Windows

【火星人】Expression Blend 2.X ( Silverlight )

Index

A010

A009

A008

A007

A006

A005

A004

色碼表

Silverlight Streaming

離題大系

010

009

008

不必 Decompiler

更像網頁編製（Applications = Code + Markup）

JavaScript 的重生

3D 檔 → XAML

視訊檔縮放

圖檔縮放

100 個不使用 Flash / 換用 Blend + Silverlight 的理由

Ch 01-10

Ch 01-09

Ch 01-08

Ch 01-07

Ch 01-06

Ch 01-05 專案管理 Managing Your Projects（2）

Ch 01-04 專案管理 Managing Your Projects（1）

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

Roadmap

About IE 7 Core

火星文

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

Ch 0 About

Ch 00 Overview

Tools

Tutorial

Ch 01-01 調整工作空間 Adjusting your workplace

10 個例子建立觀念（01） Windowless Windows

Ch 01-05　專案管理　Managing Your Projects（2）

Ch 01-04　專案管理　Managing Your Projects（1）

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

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

Ch 0　About

Ch 00　Overview

Ch 01-01　調整工作空間　Adjusting your workplace

10 個例子建立觀念（01）　Windowless Windows