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

  • [アーティクル]

このページは WPF プロジェクトにのみ適用されます。

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

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

Cc294743.alert_note(ja-jp,Expression.10).gifメモ :

トリガは、Microsoft Silverlight 1.0 プロジェクトでは使用できません。また、オーディオ ファイルまたはビデオ ファイルを Silverlight 1.0 プロジェクトに追加しても、タイムラインは作成されません。Silverlight 1.0 プロジェクトでストーリーボードを制御する方法については、「Silverlight プロジェクト内のメディアの再生を制御します。」を参照してください。
Cc294743.alert_caution(ja-jp,Expression.10).gif注意 :

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

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

  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(ja-jp,Expression.10).png ボタンをクリックします。timeline.Begin メソッドを呼び出す 2 番目の既定のアクションがリストに表示されます。

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

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

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

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

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

    Cc294743.alert_tip(ja-jp,Expression.10).gifヒント :

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

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

    Cc294743.alert_tip(ja-jp,Expression.10).gifヒント :

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

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

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

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

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

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

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

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

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

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

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

関連項目

概念

Silverlight アプリケーションのストーリーボードを制御するボタンの作成