タイムラインでのトリガーを使用したメディア コントロール

  • [アーティクル]

このページは WPF プロジェクトにのみに適用

メディア要素には、オーディオ ファイル (WAV ファイルなど) またはビデオ ファイル (WMV ファイルなど) への参照を含めることができます。アニメーション タイムラインでイベント トリガーを使用して、メディアの再生をコントロールできます。

次の例では、マウス ポインターがビデオ表示領域に出入りするタイミングでビデオ タイムラインを動作させることによって、ビデオの再生をコントロールする方法を説明します。タイムラインの変更の詳細については、「アニメーション オブジェクト」および「イベントに応答するコードを記述」を参照してください。この例では、アートボード上のオブジェクトの MouseEnter イベントと MouseLeave イベントにトリガーを設定します。トリガーを設定できるイベントの一覧については、「コントロール、プロパティ、およびイベント リファレンス」を参照してください。

Caution note注意 :

Microsoft Expression Blend でメディアを使用するには、Windows Media Player 10 をインストールしておく必要があります。Windows Media Player 10 は、Windows Media Cc294743.xtlink_newWindow(ja-jp,Expression.40).png のページからダウンロードできます。

マウス ポインターを使用してビデオの再生をコントロールするには

  1. F6 キーを押してアニメーション ワークスペースに切り替え、[オブジェクトとタイムライン] パネルが表示されるスペースを広げます。[オブジェクトとタイムライン] パネルがアートボードの下に移動します。

  2. [オブジェクトとタイムライン] パネルで、ビデオを追加するオブジェクトをダブルクリックしてアクティブにします。たとえば、アプリケーションのルートにビデオを追加する場合は、[LayoutRoot] オブジェクトをダブルクリックします。

  3. まず、Ctrl キーを押しながら I キーを押して、目的のビデオ ファイルをプロジェクトに追加します。次に [プロジェクト] パネルでそのビデオ ファイルをダブルクリックして、アートボードにビデオ ファイルを追加します。[オブジェクトとタイムライン] パネルにメディア要素が作成され、その要素の [Source] プロパティが、追加したビデオ ファイルのパスに設定されます。

    • タイムラインを選択してからアートボードにメディア ファイルを追加した場合、メディアはそのタイムラインに挿入され、現在の再生ヘッドの位置から開始するようにスケジュール設定されます。

    • タイムラインを選択していない場合は、新たに作成されるメディア タイムラインにメディアが追加され、0 秒のマークの位置から開始します。

    メディアをアートボードに追加する方法については、「作業中のドキュメントへのオーディオまたはビデオ ファイルの挿入」を参照してください。

  4. [トリガー] パネルに [Window.Loaded] イベントの新しいイベント トリガーが追加されます。Window.Loaded イベントによってトリガーされるアクションを見るには、[Window.Loaded] をクリックします。既定では、ビデオ タイムラインの再生が開始されるようになっています。しかし、ここでは、ポインターがビデオ表示領域に入るとビデオが再生され、ビデオ表示領域から離れると停止するようにします。そのため、まず、アプリケーション ウィンドウを読み込んでビデオの再生が開始される直前に一時停止状態にする必要があります。

  5. [トリガー] パネルで、[Window.Loaded の発生時] の横にある [新しいアクションの追加] Cc294743.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(ja-jp,Expression.40).png をクリックします。timeline.Begin メソッドを呼び出す 2 番目の既定のアクションがリストに表示されます。

  6. メソッドのドロップダウン ボックスをクリックし、[一時停止] を選択します。[トリガー] パネルは、次の図のようになります。これで、アプリケーション ウィンドウの読み込み時に、ビデオが開始すると同時に一時停止するようになります。

    Window.Loaded イベント トリガーへの新しいアクションの追加

    Cc294743.eb6a6c52-1702-4c26-a700-a8e7d92e06e5(ja-jp,Expression.40).png

  7. このムービー タイムラインをマウス イベントに連動して動作させるには、新しいイベント トリガーを追加する必要があります。[トリガー] パネルの [イベント トリガーの追加] Cc294743.671c69bb-32e9-4ef9-9837-29403524abd0(ja-jp,Expression.40).pngをクリックします。[Window.Loaded イベント発生時] 一覧に、新しい既定のイベント トリガーが表示されます。

  8. オブジェクトのドロップダウン リストをクリックし、既定で選択されている [ウィンドウ] をメディア要素の名前に変更します。たとえば、前の図では、メディア要素の名前は SampleMovie_wmv です。

    tip noteヒント :

    リストに目的のメディア要素の名前が表示されない場合は、[オブジェクトとタイムライン] パネルでその要素を選択してから、もう一度やり直してください。

  9. メソッドのドロップダウン リストをクリックし、既定で選択されている [Loaded] を [MouseEnter] に変更します。MouseEnter イベントは、[UIElement] カテゴリの下に表示されます。これで、トリガーが [element.MouseEnter の発生時] と表示されるようになります。アクションはまだ作成されていません。

    tip noteヒント :

    ビデオ ファイルではなくオーディオ ファイルを使用している場合は、ビデオ ファイルを含むメディア要素に対して MouseEnter イベントを選択できます。ただし、メディア要素がアプリケーションに表示されないため、ユーザーにはポインターが移動している位置がわかりません。代案として、アートボード上にボタンを追加して、このボタンの Click イベントにトリガーを作成することができます。

  10. [element.MouseEnter の発生時] の横にある [新しいアクションの追加 ] Cc294743.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(ja-jp,Expression.40).png をクリックします。timeline.Begin メソッドを呼び出す既定のアクションがリストに表示されます。

  11. タイムラインはウィンドウの読み込み時に既に開始しているため、メソッドを timeline.Pause に変更します。これで、ポインターが表示領域に入ると、ムービーが一時停止するようになります。

  12. 新しいイベント トリガーを追加し (Cc294743.671c69bb-32e9-4ef9-9837-29403524abd0(ja-jp,Expression.40).png)、追加したトリガーを [element.MouseLeave の発生時] と表示されるように変更します。

  13. timeline.Resume メソッドを呼び出す新しいアクションを追加 (Cc294743.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(ja-jp,Expression.40).png) します。これで、ポインターが表示領域を離れると、ムービーの再生が再開されるようになります。ムービーを一時停止して再開する代わりに、ムービーを停止して最初から再生するようにすることもできます。

    ムービーを一時停止および再開するために MouseEnter と MouseLeave にイベント トリガーとアクションを追加

    Cc294743.526e02a2-01a7-429f-88c4-d7532257c802(ja-jp,Expression.40).png

  14. ビデオ メディアのサイズをウィンドウ サイズに合わせて変更するには、[プロパティ] パネルで次のプロパティを設定します。

    • [プロパティ] パネルの [メディア] カテゴリの詳細セクションで、メディア要素の [Stretch ] プロパティを [Uniform] に設定します。この設定により、ビデオ表示領域の縦横比が維持されます。

    • [プロパティ] パネルの [レイアウト] カテゴリで、メディア要素の Width および Height の両プロパティを [自動] に設定します。この設定により、ビデオ表示領域のサイズがアプリケーション ウィンドウに合わせて変更されます。ビデオ表示領域のサイズがアプリケーション ウィンドウのサイズに応じて変更されない場合は、メディア要素が、特定のサイズが指定されたパネル要素に含まれていないかどうかを確認してください。

  15. F5 キーを押して、アプリケーションをテストします。ポインターをムービー表示領域の内外に移動させて、ムービー表示領域の動作を確認してください。

Copyright ©2011 by Microsoft Corporation. All rights reserved.