顯示具有 Expression Blend 標籤的文章。 顯示所有文章
顯示具有 Expression Blend 標籤的文章。 顯示所有文章

2012年1月29日 星期日

如何設定Silverlight的背景透明效果

授課時曾經數次有學員問到,Silverlight動畫可否做到像Flash動畫的背景透明效果(對於設計銜接上的彈性會較高)?答案是當然可以,只是每次都沒有很適當的場合或時間可以說明,現在將細節做法公布在此囉!

程式設計師的做法:
請找到xaml檔,例如在Expression Blend裡的MainPage.xaml,點選滑鼠右鍵,選擇外部編輯(預設應該會開啟記事本之類的文字編輯器),或直接使用Visual Studio進行編輯,將裡面的<UserControl>裡的 <Grid x:Name="LayoutRoot" Background="White"/> 程式碼,改為 <Grid x:Name="LayoutRoot" Background="transparent"> ,然後再開啟網頁,將Silverlight的.xap檔案插入後,切換到網頁程式碼模式,將 <param name="background" value="white" /> 改為 <param name="background" value="transparent" /> ,並再將下一行裡插入 <param name="windowless" value="true" /> 即可!

上面這種辦法是程式設計師採用修改程式碼的方式,可是對於美編設計師來說,可能會覺得像是無字天書看不懂或者是擔心改錯code,那有無適合美編設計師的修改模式呢?答案當然是有的,請參考以下資料。

美編設計師的做法:
在Expression Blend裡,點選「物件與時間軸」裡的「LayoutRoot」,在「屬性」裡,將Alpha數值按著滑鼠左鍵不放,往左拖曳。關於Alpha參數與Background 屬性的細節說明,若您有興趣,可以到此處的MSDN取得更詳細資料。
1

也就是將Alpha數值變成0%,此時可以看到工作區裡的白色背景已經不見了,變成透明背景,製作透明背景,必須將背景設定成單色,不能將背景設定成漸層色或者是放入一個填滿背景區域的圖片呦!
2

過來就是您在Blend裡製作動畫等步驟,做完記得「專案 / 執行專案」,取得Silverlight的.xap檔案。

接著請開啟Expression Web,新增一個網頁,因為我們要測試透明背景是否正常,建議按下滑鼠右鍵,選擇「網頁屬性」,將「色彩 / 背景」設定成跟白色差異性較大的其他顏色。
3

請將之前在Blend裡產生的.xap檔案放到網站中,滑鼠游標置入網頁裡要放入的位置,選擇「插入 / 媒體 / Silverlight」。
4

請在置入的Silverlight上按下滑鼠右鍵,選擇「ActiveX控制項」。
5

請在「物件標籤」裡設定此Silverlight的寬高尺寸。
6

重點是要在「參數」裡,點選「background」這個屬性,點選「修改」鈕。
7

將「資料」裡面改輸入成「transparent」,按下「確定」鈕。
8

回到參數的畫面後,按下「新增」鈕。
9

「名稱」請輸入「windowless」,「資料」請輸入「true」,按下「確定」鈕。關於windowless屬性的細節說明,若您有興趣,可以到此處的MSDN取得更詳細資料。
10

剛剛新增的「windowless」參數已經出現在「參數」裡的清單中了,請再按下「確定」鈕。
11

完成後請到瀏覽器測試看看,應該可以看到您的Silverlight物件的背景是透明的呦!
12

您也可以將網頁放入背景圖片,測試一下Silverlight物件仍舊維持著背景透明的效果。
13



2011年4月1日 星期五

台科大推廣教育中心-2.5小時讓Expression Studio網頁製作輕鬆上手講座,100元參加體驗價

相信已經有不少人看我的部落格、Facebook、微網誌裡的介紹,或者是經由微軟的宣傳管道得知Expression Studio走唱團活動目前正火熱展開中,但這個活動由於瞄準的是需要有企業或機構單位,且需要一次參加者有10人以上且必須自備場地,對於許多個人、SOHO工作室、微型企業等族群只能望之興嘆無法申請,不過這些族群注意囉!目前您也有個參加機會囉!

台科大推廣教育中心目前與微軟配合,推出唯一一場2.5小時讓Expression Studio網頁製作輕鬆上手講座(錯過就沒啦!之後不曉得還有哪個單位願意主辦咧!),上述族群想要得知Expression Studio走唱團活動主要都在講啥嗎?想要快速認識Expression Studio的話這是個好機會,台科大僅收參加者每人場地維護費100元,您就可以跟台科大人員一起聽課學習囉!

要報名這個講座,請洽台科大服務人員,課程網址 http://cec.ntust.edu.tw/CourseInfo.aspx?id=1076

對了,另外提醒說明的是,此講座時間總長度應為2.5小時,台科大課程網頁上只標2小時,是因為其系統限制時數不能標小數點,所以才標成2小時,實際講座長度正確的是2.5小時才對啦!歡迎有興趣認識微軟新軟體技術的人前往參加!



2011年3月26日 星期六

製作Silverlight的Deep Zoom網頁動畫效果(二)

在上一篇製作Silverlight的Deep Zoom網頁動畫效果(一)裡,我們學習到了不需要寫程式,也可以產生Deep Zoom放大縮小的特效,但若此特效只想要在Expression Blend裡設計的部分區域使用,則可以參考本篇文章,順便也可以藉此了解一下,如何參照額外的.dll檔來進行擴增,以快速加入某些新功能。

請先到Expression gallery 下載 DeepZoom Touch & Mouse這外掛的行為(Behavior)檔案,網址在http://gallery.expression.microsoft.com/DeepZoomTouch/,點選位於右下角的「DOWNLOAD BEHAVIOR」鈕,下載DeepZoomTouch.zip檔案到您的電腦裡。

 

完成下載後,記得將檔案解壓縮,會看到產生的目錄裡有一個DeepZoomTouch.dll,請記得此檔所在位置。

 

開啟Expression Blend,在功能表上選擇「檔案 / 新增專案」。
21

選擇「Silverlight / Silverlight 應用程式+網站」,給予名稱與資料夾位置後,語言選擇C#,版本選擇4.0,按下「確定」鈕。
22

 

請先到「專案」裡,在此專案名稱下的「參照」上,按下滑鼠右鍵選擇「新增參照」。
23

 

將位置選擇到之前我們下載並解壓縮後的DeepZoomTouch.dll後,按下「開啟舊檔」鈕。

24

加入參照後,需要執行功能表上的「專案 / 重建專案」。

25

此時再回到「專案」區裡,就可以看到產生了一個「ClientBin」的資料夾,請在此資料夾上按下滑鼠右鍵,選擇「在Windows檔案總管中開啟資料夾」。
26

請另外開一個檔案總管,把在上一篇文章裡,使用Deep Zoom Composer產生的檔案(兩個資料夾與一個.xml)進行複製。
27

將資料複製到剛才在Expression Blend裡,「在Windows檔案總管中開啟資料夾」所打開的資料夾下。
28

完成後請回到Expression Blend,在「專案」裡「ClientBin」的資料夾上,按下滑鼠右鍵,選擇「重新整理資料夾」。

29

就可以看到剛剛複製過去的資料。
30

接著請在「資產 / 位置」裡,挑選「MultiScaleImage」物件,並將此物件使用滑鼠拖曳到「物件與時間軸」裡的「LayoutRoot」下面。
31

如此「LayoutRoot」下就會顯示出「MultiScaleImage」物件。

32

維持點選「MultiScaleImage」物件的狀態,在「屬性 / 一般屬性」裡的「Source」按下「選擇影像」鈕。

33

挑選dzc_output.xml,就可以看到MultiScaleImage物件裡已經有顯示圖片了,您可以再使用工具箱上的「選取」工具,將MultiScaleImage物件移到適當位置以及調整大小。

34

完成後的MultiScaleImage物件,目前仍是無法支援使用滑鼠滾輪變大變小的DeepZoom效果,還需要到「資產 / 位置 / DeepZoomTouch.dll」裡,將DeepZoomMouse物件拖曳到MultiScaleImage物件下。

35

完成上述步驟後,請選擇功能表上的「專案 / 執行專案」,到瀏覽器上看一下效果吧!確實可以完成一個局部區域影像的DeepZoom效果,在上面使用滑鼠滾輪,確實可以達成放大縮小的動畫特效。

36



2011年3月24日 星期四

製作Silverlight的Deep Zoom網頁動畫效果(一)

這一次來介紹不需要寫程式,也可以做到酷炫的微軟新型態Silverlight動畫,產生Deep Zoom放大縮小的特效,並了解怎樣在各軟體間切換記行整合運用。

請下載Deep Zoom Composer這個英文版免費軟體,http://www.microsoft.com/downloads/en/details.aspx?familyid=457b17b7-52bf-4bda-87a3-fa8a4673f8bf&displaylang=en,並安裝完成(若您很早之前有完過此軟體,請重新下載安裝,版本有更新)。

 

開啟Deep Zoom Composer,選擇「New Project」。

1

 

設定好名稱與目錄位置,按下「OK」鈕。

2

 

在「Import」階段裡,按下「Add image」鈕,匯入幾張您要製作的圖檔。3

 

可匯入圖擋(格式為.tif、.jpg、.bmp、.png),建議匯入的圖檔解析度需要較高些,未來效果會較佳。4

 

按下到「Compose」階段裡,在下方「Images」區裡,使用「Selection」工具,點選某張圖片,按下滑鼠左鍵不放拖曳到主視覺區裡,移動到合適的位置裡再放開。

5-1

 

在主視覺區裡,使用「Selection」工具,點選某張圖片,會出現8個白色節點,可以將滑鼠游標移至某個白節點上,使用滑鼠左鍵拖曳,以對此圖片進行尺寸大小的調整。

5-2

 

當需要將畫面放大以利調整時,可以使用「Zoon」工具進行畫面放大,若同時按下鍵盤上的「Alt」鍵,則會變成畫面縮小的功能。

5

 

需要移動到畫面不同區域時,則可以使用「Pan」工具。

6

 

依此類推上述步驟,完成各圖片置入主視覺區的動作

7

 

按下到「Export」階段裡。

8

 

在「Setting」裡,在「Output type」中選擇「Silverlight Deep Zoom」,「Name」裡輸入您想要的名稱,在「Location」裡按下「Browse…」鈕選擇輸出路徑,「Export options」裡選擇「Expor as a collection(multiple images)」,「Templates」選擇「Deep Zoom Navigation(Default)」,在「Image settings」裡的「Format」裡,可以選擇輸出的圖檔格式為JPEG或PNG,「Quality」裡可以設定圖片壓縮率(數值越小檔案壓縮越小,但品質也會越來越差,本選項若上面選擇成PNG則不會出現),「Image Width」則可設定圖片寬度尺寸,上述設定確認後,請按下「Export」鈕。

9

 

完成後可以按下「View Image Folder」。

10

 

可以看到輸出的檔案與目錄。

11

如果要將剛剛設計的Deep Zoom放到網頁上,可以使用Microsoft Expression Web,開啟一個網頁後,滑鼠游標點選在網頁裡,選擇工具列上的「插入 / 媒體 / Deep Zoom」。

12

 

選擇剛剛檔案輸出的目錄位置,點選dzc_output.xml檔案,按下「開啟舊檔」鈕。

13

 

會出現如下視窗,可以在此調整關高大小與縮放速度,按下「確認」鈕,系統會產生對應的javascript檔案,即可完成置入Deep Zoom效果物件到網頁裡。

13-1

 

後續若您需要變更此置入物件的寬高大小,可以在此物件上滑鼠左鍵點兩下,會出現ActiveX控制項設定視窗。

14

 

若您是希望將此Deep Zoom效果,之後轉到Microsoft Expression Blend裡使用,則在Deep Zoom Composer裡的「Templates」,必須選擇成「Expression Blend 4 + Source」的選項進行匯出,會變成一個可以使用Expression Blend 或Visual Studio開啟的專案檔。

15

 

請開啟Expression Bleng,在功能表列上選擇「檔案 / 開啟專案/解決方案」。

16

 

請將瀏覽的目錄選擇到之前Deep Zoom Composer輸出的目錄下,就可以看到一個.sln的專案檔,請按下「開啟舊檔」鈕。

17

 

在「專案」裡,就可以看到xaml原始檔以及相關使用C#開發的原始檔,可以使用Expression Blend 裡的各種功能加以增加功能或修飾調整,如果需要寫更多的程式功能,也可以在某個檔案上按下滑鼠右鍵,選擇「在Visual Studio編輯」。

18

 

完成後可以選擇「專案 / 執行專案」進行確認。

19

 

預設出現的功能畫面如下圖所示。

20

 

若此特效只想要在Expression Blend裡設計的部分區域使用,有興趣者可以參考另一篇文章製作Silverlight的Deep Zoom網頁動畫效果(二)



Related Posts Plugin for WordPress, Blogger...

訂閱RSS