【火星人】Expression Blend 2.X ( Silverlight ): Ch 01-05　專案管理　Managing Your Projects（2）

　　‧　在網頁置入 Silverlight
　
　　‧　Silverlight 1.0 基礎（2）
　
　　　　。　動畫與互動範例　Animations and Interactivity
　　
　　　　　　-　動畫　Animations
　
　　　　　　-　語法與滑鼠事件　Scripting ans Mouse Events
　
　　　　。　幾個例子　Sample Controls
　
　　‧　媒體的播放　Starting and Stopping a Media Element
　
　　‧　兩個時間軸的 Fade In / Out
　
　
　

　
　
　
　
在網頁置入 Silverlight
　
　
在網頁（Blogger）中置入 Silverlight，以目前來看，有一點小難度：
　
第一、硬碟空間必得要能支援 XAML 檔（部份的虛擬主機並不支援 XAML 檔，故要置入 Silverlight 就會有困難）
　
　　　　基於一些理由，有些虛擬主機業者的 FTP，不允許常用副檔名之外的任何檔案上傳
　　　　故 Silverlight 最重要的 XAML 檔就可能因此而不能上傳
　
　　　　碰到這種情況，就只能換一家主機商了，或是把 XAML 檔傳到 Google 的 Page Creator ( 路徑都要設定正確 )
　　　　 Google 實用的服務非常多，筆者日後會有專文介紹之
　
　
　　　　這種情況難道真的無解嗎 ?! 有的，而且成功率頗高，請先下載：( 或看網頁 ← *.xaml 已更名為 *.html )
　
　　　　
　
　　　　把 *.xaml 更名為 *.html ( 相關的路徑與檔名記得要跟著修改 )，一樣可以執行
　
　
第二、置入 Silverlight 要靠 <DIV>　
　
　　　　 微軟笨蛋法：
　　　　一開始，按照 Expression Blend 的專案面板，您會覺得至少要 5 個檔案，才能搞出一個 Silverlight：
　　　　 Default.html, Default.html.js, Scene.xaml, Scene.xaml.js, Silverlight.js
　
　　　　後來，按照筆者的解說，其中有講到：一個 Silverlight 檔，共計至少需要 4 個檔案
　
　
　　　　 火星小技法：
　　　　其實還可以再精簡
　　　　 ‧Silverlight.js 是放在 <head> 之中，拿來呼叫用的，不去動它
　　　　 ‧Scene.xaml 是描述介面用的，不去動它
　　　　 ‧Default.html.js 這個 JavaScript，則可以併入到 HTML 中
　　　　所以最後可以只剩下三個檔案：
　　　　 Default.html, Scene.xaml, Silverlight.js
　
　　　　在上述第一點的下載檔中，您可以發現不管視訊檔的話，真的就只有三個檔案
　　　　 ( 不過 *.xaml 檔，已被更名為 *.html 檔了 )
　
　
　　　　上述不管是採用哪一種方法，最後都是靠 Div 來置入 Silverlight
　
　
　　　　採用 DIV 的好處就是：
　　　　 ‧不會有下圖 ActiveX control 的警告出現 ( Flash 與 Silverlight 都是 ActiveX control )
　　　　 ‧也不會有後述 <object>、<embed> 的虛線出現
　
　　　　
　
　
第三、Silverlight 不支援 <object> ?!
　
　　　　 Flash 嵌入 HTML 計有兩種方法：<object> 與 <embed>
　　　　 ‧<object> 是 IE ActiveX control 的置入方式
　　　　 ‧<embed> 則是 Netscape 的方式
　　　　顧忌微軟的獨大，所以 IE 之外的瀏覽器，多半只支援 <embed>
　
　　　　既然 Silverlight 與 FlashPlayer 一樣，都是 Browser 的 Plug-In，所以一定支援 <object> 與 <embed>
　　　　就先看看 <object> 的範例 ( 開啟左述的範例後，按右鍵 > 檢視原始碼可看 HTML 碼 )

　　　　第一、套用 <object> 的語法可以讓 HTML 碼更精簡，連原先 Default.html.js 的 JavaScript 都可以去除了
　　　　　　　( 但其中控制視訊檔的 JavaScript 則不能去除 )
　
　　　　第二、很不幸地，跟 Flash 一樣，會在 Silverlight 的四周出現虛線，要按一下才會消失
　　　　　　　( 在 GreenBrowser 不會出現虛線，但是在 IE 則會 )
　
　　　　詳細的討論，請看離題大系
　
　　　　採 <object> 的方式，不需要在 <head>中載入 JavaScript，但是會在四周出現虛線
　
　
第四、Silverlight 不支援 <embed> ?!
　
　　　　既然支援 <object>，就一定也支援 <embed>：範例
　　　　是的，優點都一樣，缺點也都一樣，詳細的討論也一樣在離題大系中
　
　　　　採 <embed> 的方式，不需要在 <head>中載入 JavaScript，但是會在四周出現虛線
　
　
第五、非在 Blogger 中嵌入 Silverlight 不可 !!
　
　　　　不怕虛擬主機商副檔名的不支援、可以採 <DIV>、<object>、<embed> 的方式嵌入網頁
　　　　但是 Blogger 限制太多，無法貼 Silverlight 該怎麼辦呢 ?!
　　　　既然敢自稱是火星大神，俺當然有解啦：^++++++++++++++++++++++++++++++^
　
　　　　詳細的討論，請看離題大系
　
　　　　在下圖按右鍵，便知是 Silverlight
　
　　　　

　
　　　　把 embed 改寫成 JavaScript：可以去掉虛線，同時也避開了 Blogger 的限制
　
　
第六、Silverlight Streaming
　
請先看本例：( 點選其中的 Default.html：Expression Media Encoder 搞的，有播放面板 )
　

　
　
這涉及三個問題：
‧本例要幹嘛用的 ?! 是要在 Blogger 中置入 Silverlight 嗎 ?!
‧Expression Media Encoder 是啥 ?!
‧微軟 Silverlight Streaming 又是啥 ?!
　
分述如后：
‧本例是以 Expression Media Encoder 搞出來的
‧搞出來以後，再篩選一下檔案，就可以上傳到微軟 Silverlight Streaming 免費的 4GB 空間
‧上傳到 Silverlight Streaming 後，改一下語法，就可以置入到 Blogger
　
詳細的討論見 Silverlight Streaming

按右鍵便知這是 Silverlight ( 還附上完整的播放面板，其中還有全螢幕的按鍵 )
播放面板是 XAML 檔，也就是說，可以自行編修
　
試想：Google 免費的 Blogger + PageCreator，再加上微軟免費的 Silverlight Streaming
　　　這可以有多少的玩法呀 ! 甚至是一般 Art ( 設計 ) 在商業上的玩法 !!
　
　
　　　Silverlight ( XAML、Expression Blend ) 或許一開始並不好學
　　　但只要一克服，馬上就能輕易搞出各種 Flash 難以做到的效果，並且還擁有最大的自由度 !!
　
　
第七、Silverlight 的另類置入方式
　