Content Index Search
 

Control media using triggers in a timeline

A media element can contain a reference to an audio file (such as a WAV file) or a video file (such as a WMV file). You can use event triggers in an animation timeline to control media playback.

The following example shows you how to control video playback by triggering the video timeline when the mouse enters and leaves the video viewing area. For more information about how to manipulate timelines, see Animation and interactivity. This example sets triggers on the MouseEnter and MouseLeave events of an object on the artboard. For a list of other events on which you can set triggers, see the Events quick reference.

Warning

In order to work with media in Microsoft® Expression Blend™, you must have Windows Media® Player 10 installed on your computer. You can download Windows Media Player 10 from the Windows Media Web site.

To control video playback with the mouse

  1. To give more space to the Interaction panel in the Expression Blend workspace, switch to the Animation Workspace (F7).
    This action moves the Interaction panel below the artboard.
  2. Under Objects and Timeline, activate the object into which you want to add the video by double-clicking the object. For example, to add the video to the root of your application, double-click LayoutRoot.
  3. Add the video file to the artboard by first adding the video file to your project (CTRL+I), and then double-clicking on the video file in the Project panel.
    A media element is created under Objects and Timeline with the Source property set to the path of your video file.
    • If a timeline was selected before you added the media file to the artboard, the media will be inserted into that timeline, and the media will be scheduled to start at the current playhead location.
    • If no timeline is selected, a new media timeline will be created and the media will be added to the new timeline beginning at the 0 second mark.
    For a complete procedure showing you how to add media to the artboard, see the topic Insert an audio or video file into the active document.
  4. Under Triggers in the Interaction panel, a new event trigger has been added for the Window.Loaded event. Click Window.Loaded to see the action that is triggered by the Window.Loaded event. By default, the video timeline is started.
    We want to make the video play when the mouse is over the video viewing area, and stop when the mouse leaves the video viewing area. The first task will be to pause the video as soon as it starts when the application window is loaded.
  5. Under Triggers, click the Add new action button Events button next to When Window.Loaded is raised.
    A second default action appears in the list, calling the timeline.Begin method.
  6. Click on the method dropdown box and select Pause.
    The Interaction panel should look similar to the following image. The video will now start and immediately pause when the application window is loaded.

    Adding another action to the Window.Loaded event trigger

    Adding another action to the Window.Loaded event trigger

  7. To connect the movie timeline to a mouse event, you need to add a new event trigger. Click the Add event trigger button Events button under Triggers.
    A new default event trigger appears in the list for when the Window.Loaded event is raised.
  8. Click on the object dropdown list to change the selection from Window to the name of your media element. For example, in the previous image, the name of the media element is SampleMovie_wmv.
    Tip

    If you do not see the name of your media element, select it under Objects and Timeline and then try this step again.

  9. Click on the method dropdown to change the selection from Loaded to MouseEnter. The MouseEnter event is in the UIElement category.
    The trigger should now read When element.MouseEnter is raised. No actions have been created yet.
    Tip

    If you are using an audio file instead of a video file, you can select the MouseEnter event for the media element that contains the video file, however the user will not know where to move their mouse because the media element will not be visible in your application. You can alternatively add a button to the artboard and create a trigger for the button's Click event.

  10. Click the Add new action button Events button next to When element.MouseEnter is raised.
    A default action appears in the list, calling the timeline.Begin method. 
  11. The timeline has already been started when the Window was loaded, so change the method to timeline.Pause.
    Now the movie will pause when the mouse moves over the viewing area.
  12. Add another event trigger (Events button) and change it to read When element.MouseLeave is raised.
  13. Add a new action (Events button) calling the timeline.Resume method.
    Now the movie will continue playing when the mouse leaves the viewing area. Alternatively, you could have chosen to stop and restart the movie instead of pause and resume.

    Adding MouseEnter and MouseLeave event triggers and actions to pause and resume the movie

    Adding MouseEnter and MouseLeave event triggers and actions to pause and resume the movie

  14. To ensure that video media will resize with the window, set the following properties in the Properties panel:
    • In the advanced section of the Media category of the Properties panel, set the Stretch property of your media element to Uniform. This setting preserves the aspect ratio of the video viewing area.
    • In the Layout category of the Properties panel, set the Width and Height of your media element to Auto. This setting allows the video viewing area to resize with the application window. If your video viewing area does not resize with the application window, see if the media element is contained in a panel element that has a specific size.
  15. Test your application (F5). Watch the behavior of the movie viewing area when you move the mouse through it.