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

  • 發行項

本頁僅適用 WPF 專案

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

下列範例說明如何藉由在滑鼠移入和移出視訊檢視區域時觸發視訊時間軸的方式，控制視訊的播放。如需有關如何修改時間軸的詳細資訊，請參閱動畫、觸發程序與使用者互動功能和事件處理及使用者互動功能。此範例會對畫板上的物件設定 MouseEnter 與 MouseLeave 事件的觸發程序。如需其他可以設定觸發程序的事件清單，請參閱 WPF 事件快速參照。

Cc294743.alert_note(zh-tw,Expression.10).gif注意事項：

Microsoft Silverlight 1.0 專案中無法使用觸發程序。此外，當您新增音訊或視訊檔案至 Silverlight 1.0 專案時，並不會建立時間軸。如需如何在 Silverlight 1.0 專案中控制腳本的指示，請參閱在 Silverlight 專案中控制媒體播放。
Cc294743.alert_caution(zh-tw,Expression.10).gif警告：

若要在 Microsoft Expression Blend 中使用媒體，您必須在電腦上安裝 Windows Media Player 10。您可以從 Windows Media 首頁下載 Windows Media Player 10。

使用滑鼠控制視訊播放

  1. 若要增加 Expression Blend 工作區中的 [互動] 面板空間，請切換至 [動畫工作區] (F6)。此動作會將 [互動] 面板移至畫板底下。

  2. 在 [物件與時間軸] 下，按兩下要新增視訊的物件以啟動該物件。例如，若要將視訊新增至應用程式的根目錄，請按兩下 [LayoutRoot]。

  3. 將視訊檔案新增至畫板，方法是先將視訊檔案新增至專案 (CTRL+I)，然後按兩下 [專案] 面板中的視訊檔案。[物件與時間軸] 下會建立媒體元素，且其 [Source] 屬性會設為視訊檔案的路徑。

    • 如果在將媒體檔案新增至畫板之前就已選取時間軸，媒體便會插入該時間軸中，並且排定在目前的播放點位置開始。

    • 若未選取任何時間軸，則會建立新的媒體時間軸，再將媒體新增到新時間軸，並從 0 秒標記開始。

    如需新增媒體至畫板的完整程序，請參閱將影像、音訊或視訊檔案插入至使用中的文件主題。

  4. [互動] 面板的 [觸發程序] 下已新增了 [Window.Loaded] 事件的事件觸發程序。按一下 [Window.Loaded] 即可查看 [Window.Loaded] 事件所觸發的動作。預設會啟動視訊時間軸。我們想要讓視訊在指標移入視訊檢視區域時播放，並且在指標移出視訊檢視區域時停止。第一項工作是在載入應用程式視窗而開始播放視訊時，立即暫停視訊。

  5. 在 [觸發程序] 下，按一下 [當引發 Window.Loaded 時] 旁的 [新增動作] Cc294743.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(zh-tw,Expression.10).png 按鈕。清單中會出現第二個預設動作，呼叫 [timeline.Begin] 方法。

  6. 按一下方法下拉式方塊，然後選取 [暫停]。[互動] 面板應如下圖所示。現在，視訊會在載入應用程式視窗時啟動並立即暫停。

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

    Cc294743.eb6a6c52-1702-4c26-a700-a8e7d92e06e5(zh-tw,Expression.10).png

  7. 若要將影片時間軸連接至滑鼠事件，您必須新增事件觸發程序。按一下 [觸發程序] 下的 [新增事件觸發程序] Cc294743.671c69bb-32e9-4ef9-9837-29403524abd0(zh-tw,Expression.10).png 按鈕。清單中會出現在引發 [Window.Loaded] 事件時適用的新預設事件觸發程序。

  8. 按一下物件下拉式清單，將選取項目從 [Window] 變更為您的媒體元素的名稱。例如，在上圖中媒體元素的名稱為 [SampleMovie_wmv]。

    Cc294743.alert_tip(zh-tw,Expression.10).gif秘訣：

    若未看到您的媒體元素名稱，請在 [物件與時間軸] 下加以選取，然後重試這個步驟。

  9. 按一下方法下拉式清單，將選取項目從 [Loaded] 變更為 [MouseEnter]。[MouseEnter] 事件位於 [UIElement] 類別中。觸發程序現在應顯示為 [當引發 element.MouseEnter 時]。目前還沒有建立任何動作。

    Cc294743.alert_tip(zh-tw,Expression.10).gif秘訣：

    若您是使用的音訊檔案而非視訊檔案，您可以為包含視訊檔案的媒體元素選取 [MouseEnter] 事件。不過，使用者將無法知道應將其指標移至何處，因為媒體元素不會顯示在應用程式中。此外，您也可以在畫板上新增一個按鈕，並針對該按鈕的 Click 事件建立觸發程序。

  10. 按一下 [當引發 element.MouseEnter 時] 旁的 [新增動作] Cc294743.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(zh-tw,Expression.10).png 按鈕.清單中會出現一個預設動作，呼叫 [timeline.Begin] 方法。

  11. 時間軸已在載入 Window 時開始，因此請將方法變更為 [timeline.Pause]。現在，當指標移入檢視區域時，影片就會暫停。

  12. 新增另一個事件觸發程序 (Cc294743.671c69bb-32e9-4ef9-9837-29403524abd0(zh-tw,Expression.10).png) 並加以變更，使其顯示為「當引發 element.MouseLeave 時」。

  13. 新增呼叫 [timeline.Resume] 方法的新動作 (Cc294743.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(zh-tw,Expression.10).png)。現在，當指標移出檢視區域時，影片就會繼續播放。此外，您也可以選擇先停止再重新播放影片，而不是暫停再繼續播放影片。

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

    Cc294743.526e02a2-01a7-429f-88c4-d7532257c802(zh-tw,Expression.10).png

  14. 若要確保視訊媒體會調整視窗大小，請設定 [屬性] 面板中的下列屬性：

    • 在 [屬性] 面板的 [媒體] 類別進階區段中，將媒體元素的 [Stretch] 屬性設為 [Uniform]。此設定會保留視訊檢視區域的長寬比。

    • 在 [屬性] 面板的 [版面配置] 類別中，將媒體元素的 [Width] 與 [Height] 設為 [Auto]。此設定可讓視訊檢視區域隨著應用程式視窗調整大小。若您的視訊檢視區域不會隨著應用程式視窗調整大小，請檢查媒體元素是否包含在具有特定大小的面板元素中。

  15. 測試您的應用程式 (F5)。在影片檢視區域中移動指標時，觀察影片檢視區域的行為。

請參閱

概念

建立可控制 Silverlight 應用程式中腳本的按鈕