零元學Expression Blend 4 - Chapter 7 什麼?影片不再是印象中的方框框!!!看Blend 4如何把影片鑲入字裡


本章將教大家如何在Blend 4裡新增Media Element,以及運用Video Brush讓影片鑲入你所設定的字裡,使影片不再是傳統的呈現方式。


 

 

本章將教大家如何在Blend 4裡新增Media Element,以及運用Video Brush讓影片鑲入你所設定的字裡,使影片不再是傳統的呈現方式。

 

就是要讓不會的新手都看的懂!

 

 

01 新增一個專案

我們按照前面教學的相同方法新增一個專案,打開Blend 4 後選擇Top Menu的 File->New Project(快捷鍵Shift+Ctrl+N),選擇Silverlight Application+ Website為你的項目類型。

接著點擊左邊工具列最下方的Assets「>>」,直接在Search上鍵入MediaElement;請把MediaElement直接拖拉到主要工作區

image

 

 

02 設定影片

接著我們在Properties下找到Media

    (1)AutoPlay:設定是否自動播放,這邊我們勾選確認狀態。

    (2)Balance:這邊我們不做調整。

    (3)IsMuted:勾選的話,就是靜音模式,這邊我們不做選取。

    (4)Position:指定你影片開始的位置。

    (5)Source:你的影片來源,可以給他一個連結或是從你的電腦選取。

        (注意:Blend 4 支援的影片格式只有.mp3、.mp4、.asf、.asx、.wma、.wmv)

    (6)Volume:影片播放的音量,這邊我們用預設的0.5即可。

        (若你設為0,就是靜音;若是設定1以上,則聲音會越來越大。)

 

瞭解每個設定的功能後,我們來設定影片:

      在 Source貼上連結,或是直接點選Source後方的「‧‧‧」,從你的電腦選一個符合Blend 4 支援格式的影片。

 

此範例的影片檔案,請複製此連結,或是用你自己喜歡的檔案也可以。

image

 

 

03 測試影片-播放

在Source放入連結或檔案後,主要工作區會出現影片的開始畫面(片頭),(若MeidaElement的Layout太小,請調整至影片能完全看到的大小。

接著我們按下鍵盤上的 "F5",等到狀態列出現Build Succeed會自動跑出預設瀏覽器,內容就是我們設定的影片。

 

04 新增文字

點選左方ToolsTextBoxs,在主要工作區拖拉出一個文字方塊,打上你喜歡的字後,在Properties->Text下更改文字的狀態,範例的文字為72pt、粗體。

7-3

 

05 重頭戲來了!!!!!

接下來,我們要使影片能夠鑲入文字裡,這是一個很簡單但很重要的動作喔!

 

在選取MediaElement的狀態下,點選TopMenuTools->Make Brush Resource->Make VideoBrush Resource,並為VideoBrush Resource命名,範例命名為Media GaGa。

7-4

 

06 改變TextBox的筆刷

請先點選TextBox後,於Properties->Brush->Foreground,單擊後面的小方點->Local Resource,你會發現出現了我們剛剛建立的VideoBrush,選取它就完成啦!

7-5

 

接著我們按下鍵盤上的 "F5",神奇的事情就發生了!!

是否發現我們的字裡面已經鑲入了影片?

7-6

 

07 編輯VideoBrush

我們可以針對VideoBrush做編輯。

點選Resource->[UserControl],你會看到我們建立的VideoBrush-Media GaGa,請單擊最後方的下三角形,可以編輯筆刷。

Opacity可調整鑲進字裡影片的透明度。

其他設定與我先前的教學相同,可以參考來做設定。

7-7

 

 

 

 

 

 

本篇的教學就到此。

(若有任何錯誤的地方,請各位前輩或同好能不吝指教,小女子都會虛心接受;若是你喜歡我的教學,請給我點鼓勵,謝謝。)

 

 

 

一步一步邁向HIE之路

 

喜歡我文章請推我一下或給我個回應,你的鼓勵會給我無限的動力喔!

若是您有其他問題或是特別需要,請在文章回應處留言,我會盡快回覆您