內容 索引 搜尋
 

在時間軸中使用觸發程序來控制媒體

媒體元素可以包含對音訊檔案 (如 WAV 檔案) 或視訊檔案 (如 WMV 檔案) 的參照。您可以在動畫時間軸中使用事件觸發程序來控制媒體的播放。

下列範例顯示如何藉由在滑鼠移入和移出視訊檢視區域時觸發視訊時間軸的方式，以控制視訊的播放。如需如何操作時間軸的詳細資訊，請參閱動畫和互動功能。此範例會對畫板上的物件設定 MouseEnter 和 MouseLeave 事件的觸發程序。如需其他可以設定觸發程序的事件清單，請參閱事件快速參考。

警告

為了要在 Microsoft® Expression Blend™ 中使用媒體，您必須在電腦上安裝 Windows Media® Player 10。您可以從 Windows Media 網站下載 Windows Media Player 10。

使用滑鼠控制視訊的播放

  1. 若要增加 Expression Blend 工作區中的 [互動] 面板空間，請切換至 [動畫工作區] (F7)。
    此動作會將 [互動] 面板移至畫板底下。
  2. 在 [物件與時間軸] 下，按兩下要新增視訊的物件以啟動該物件。例如，若要將視訊新增至應用程式的根目錄，請按兩下 [LayoutRoot]。
  3. 將視訊檔案新增至畫板，方法是先將視訊檔案新增至專案 (CTRL+I)，然後按兩下 [專案] 面板中的視訊檔案。
    [物件與時間軸] 下會建立媒體元素，Source 屬性會設為視訊檔案的路徑。
    • 如果在將媒體檔案新增至畫板之前就已選取時間軸，媒體便會插入該時間軸中，並且排定在目前的磁頭位置開始。
    • 如果未選取任何時間軸，則會建立新的媒體時間軸，再將媒體新增到新時間軸，並從 0 秒標記開始。
    如需將媒體新增至畫板的完整程序，請參閱將音訊或視訊檔案插入使用中的文件主題。
  4. [互動] 面板的 [觸發程序] 下已經新增了 Window.Loaded 事件的事件觸發程序。按一下 Window.Loaded 即可查看 Window.Loaded 事件所觸發的動作。預設會啟動視訊時間軸。
    我們想要讓視訊在滑鼠移入視訊檢視區域時播放，並且在滑鼠移出視訊檢視區域時停止。第一項工作將是在載入應用程式視窗而開始播放視訊時，立即暫停視訊。
  5. 在 [觸發程序] 下，按一下 [當引發 Window.Loaded 時] 旁的 [新增動作] 按鈕 事件按鈕。
    清單中會出現第二個預設動作，這個動作會呼叫 timeline.Begin 方法。
  6. 按一下方法下拉方塊，然後選取 [暫停]。
    [互動] 面板看起來應該類似下圖。現在，視訊會在載入應用程式視窗時啟動並立即暫停。

    將另一個動作新增至 Window.Loaded 事件觸發程序

    將另一個動作新增至 Window.Loaded 事件觸發程序

  7. 若要將影片時間軸連接至滑鼠事件，您必須新增事件觸發程序。按一下 [觸發程序] 下的 [新增事件觸發程序] 按鈕 事件按鈕。
    清單中會出現在引發 Window.Loaded 事件時適用的新預設事件觸發程序。
  8. 按一下物件下拉清單，將選取項目從 [Window] 變更為您的媒體元素名稱。例如，在上圖中媒體元素的名稱為 SampleMovie_wmv。
    提示

    如果您沒看到您的媒體元素名稱，請在 [物件與時間軸] 下加以選取，然後重試這個步驟。
  9. 按一下方法下拉清單，將選取項目從 [Loaded] 變更為 [MouseEnter]。MouseEnter 事件位於 UIElement 類別中。
    而觸發程序現在應該是 [當引發 element.MouseEnter 時]。目前還沒有建立任何動作。
    提示

    如果您所使用的是音訊檔案而非視訊檔案，則可以針對含有該視訊檔案的媒體元素選取 MouseEnter 事件。不過，因為應用程式不會顯示媒體元素，所以使用者並不知道要將滑鼠移到何處。此外，您也可以在畫板上新增一個按鈕，並針對該按鈕的 Click 事件建立觸發程序。
  10. 按一下 [當引發 element.MouseEnter 時] 旁的 [新增動作] 按鈕 事件按鈕。
    清單中會出現預設動作，這個動作呼叫 timeline.Begin 方法。
  11. 因為時間軸已經在載入 Window 時開始，所以請將方法變更為 timeline.Pause。
    現在，當滑鼠移入檢視區域時，影片就會暫停。
  12. 新增另一個事件觸發程序 (事件按鈕)，並且變更為 [當引發 element.MouseLeave 時]。
  13. 新增一個會呼叫 timeline.Resume 方法的動作 (事件按鈕)。
    現在，當滑鼠移出檢視區域時，影片就會繼續播放。此外，您也可以選擇停止再重新播放影片，而不是暫停再繼續播放影片。

    新增 MouseEnter 和 MouseLeave 事件觸發程序以及會暫停再繼續播放影片的動作

    新增 MouseEnter 和 MouseLeave 事件觸發程序以及會暫停再繼續播放影片的動作

  14. 若要確保視訊媒體會調整視窗大小，請設定 [屬性] 面板中的下列屬性：
    • 在 [屬性] 面板的 [Media] 類別進階區段中，將媒體元素的 [Stretch] 屬性設為 [Uniform]。此設定會保留視訊檢視區域的外觀比例。
    • 在 [屬性] 面板的 [版面配置] 類別中，將媒體元素的 [Width] 與 [Height] 設為 [Auto]。此設定可讓視訊檢視區域隨著應用程式視窗調整大小。如果您的視訊檢視區域不會隨著應用程式視窗調整大小，請檢查媒體元素是否包含在具有特定大小的面板元素中。
  15. 測試您的應用程式 (F5)。在影片檢視區域中移動滑鼠時，觀察影片檢視區域的行為。