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 pointer enters and leaves the video viewing area. For more information about how to modify timelines, see Animating objects and Hook up to an existing event handler method. 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 Controls, properties, and events reference (Blend).

To control video playback with the mouse pointer

1. To give more space to the Objects and Timeline panel in the Blend workspace, switch to the Animation Workspace (F6). This action moves the Objects and Timeline panel under the artboard.

2. In the Objects and Timeline panel, activate the object into which you want to add the video by clicking the object. For example, to add the video to the root of your application, 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 the video file in the Project panel. A media element is created in the Objects and Timeline panel 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 starting at the 0-second mark.

   For a complete procedure that shows you how to add media to the artboard, see the topic Insert an audio or video file into the active document.

4. In the Triggers 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 pointer is over the video viewing area, and stop when the pointer leaves the video viewing area. The first task is to pause the video as soon as it starts when the application window is loaded.

5. In the Triggers panel, click Add new action  next to When Window.Loaded is raised. A second default action appears in the list, calling the timeline.Begin method.

6. Click the method drop-down box and select Pause. The Triggers panel should resemble 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

   

7. To connect the movie timeline to a mouse event, you must add a new event trigger. Click Add event trigger  in the Triggers panel. A new default event trigger appears in the list for when the Window.Loaded event is raised.

8. Click the object drop-down 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 Wildlife_wmv.

   Tip

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

9. Click the method drop-down 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, users will not know where to move their pointer because the media element will not be visible in your application. Alternatively, you can add a button to the artboard and create a trigger for the button's Click event.

10. Click Add new action  next to When element.MouseEnter is raised. A default action appears in the list, calling the timeline.Begin method.

11. The timeline was already started when the Window was loaded, so change the method to timeline.Pause. Now the movie will pause when the pointer moves across the viewing area.

12. Add another event trigger () and change it to read When element.MouseLeave is raised.

13. Add a new action () calling the timeline.Resume method. Now the movie will continue playing when the pointer leaves the viewing area. Alternatively, you could have decided to stop and restart the movie instead of pausing and resuming.

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

    

14. To make sure that video media resizes 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 whether the media element is contained in a panel object that has a specific size.

15. Test your application (F5). Watch the behavior of the movie viewing area when you move the pointer through it.