Controlar elementos multimedia con los desencadenadores en una escala de tiempo

Los elementos multimedia pueden incluir referencias a archivos de audio (como los archivos WAV) o a archivos de vídeo (como los archivos WMV). Puede usar desencadenadores de eventos en una escala de tiempo de animación para controlar la reproducción de archivos multimedia.

El ejemplo siguiente muestra cómo controlar la reproducción de vídeo desencadenando la escala de tiempo de vídeo cuando el mouse entra y sale del área de visualización del vídeo. Para obtener más información sobre cómo manipular escalas de tiempo, vea Animación e interactividad. Este ejemplo establece desencadenadores en los eventos MouseEnter y MouseLeave de un objeto del área de diseño. Para obtener una lista de otros eventos en los que puede establecer desencadenadores, vea la Referencia rápida de eventos.

Para trabajar con los elementos multimedia de Microsoft® Expression Blend™, debe tener instalado en el equipo el Reproductor de Windows Media® 10. Puede descargar el Reproductor de Windows Media 10 desde el sitio Web de Windows Media (puede estar en inglés).

Para controlar la reproducción de vídeo con el mouse

Para dar más espacio al panel Interacción en el área de trabajo de Expression Blend, cambie al Área de trabajo de animación (F7).
Esta acción mueve el panel Interacción debajo del área de diseño.
En Objetos y escala de tiempo, active el objeto al que desea agregar el vídeo; para ello, haga doble clic en el objeto. Por ejemplo, para agregar el vídeo a la raíz de la aplicación, haga doble clic en LayoutRoot.
Para agregar el archivo de vídeo al área de diseño, primero agregue el archivo de vídeo al proyecto (Ctrl+I) y, a continuación, haga doble clic en el archivo de vídeo en el panel Proyecto.
Se creará un elemento multimedia en Objetos y escala de tiempo con la propiedad Source establecida en la ruta de acceso del archivo de vídeo.
- Si se seleccionó una escala de tiempo antes de agregar el archivo multimedia al área de diseño, éste se insertará en esa escala de tiempo y se programará para que se inicie en la ubicación del cabezal de reproducción actual.
- Si no hay ninguna escala de tiempo seleccionada, se creará una para el elemento multimedia y éste se agregará a la nueva escala de tiempo desde la marca de 0 segundos.
Para ver un procedimiento completo que muestra cómo agregar elementos multimedia al área de diseño, vea el tema Insertar un archivo de audio o de vídeo en el documento activo.
En Desencadenadores, en el panel Interacción, se habrá agregado un nuevo desencadenador de eventos para el evento Window.Loaded. Haga clic en Window.Loaded para ver la acción que desencadena este evento. De manera predeterminada, se iniciará la escala de tiempo del vídeo.
El objetivo es que el vídeo se reproduzca cuando el mouse esté sobre el área de visualización del vídeo y que se detenga cuando el mouse deje dicha área. La primera tarea será detener el vídeo tan pronto como empiece cuando se cargue la ventana de la aplicación.
En Desencadenadores, haga clic en el botón Agregar nueva acción junto a Cuando se origina Window.Loaded.
Aparecerá una segunda acción predeterminada en la lista, que llama al método escalaDeTiempo.Begin.
Haga clic en el cuadro desplegable del método y seleccione Pausa.
El panel Interacción debe tener un aspecto similar a la siguiente imagen. Ahora, el vídeo se iniciará y se detendrá inmediatamente cuando se cargue la ventana de la aplicación.

Agregar otra acción al desencadenador de eventos Window.Loaded
Para conectar la escala de tiempo de la película a un evento del mouse, es necesario agregar un nuevo desencadenador de eventos. Haga clic en el botón Agregar desencadenador de evento en Desencadenadores.
Aparecerá un nuevo desencadenador de eventos predeterminado en la lista para cuando se produzca el evento Window.Loaded.
Haga clic en la lista desplegable de objetos para cambiar la selección de Window al nombre del elemento multimedia. Por ejemplo, en la imagen anterior, el nombre del elemento multimedia es SampleMovie_wmv.

Si no ve el nombre del elemento multimedia, selecciónelo en Objetos y escala de tiempo y vuelva a intentar este paso.

Haga clic en la lista desplegable de métodos para cambiar la selección de Loaded a MouseEnter. El evento MouseEnter está en la categoría UIElement.
Ahora, el desencadenador deberá mostrar Cuando se origina elemento.MouseEnter. Todavía no se ha creado ninguna acción.

Si está usando un archivo de audio en lugar de un archivo de vídeo, puede seleccionar el evento MouseEnter para el elemento multimedia que contiene el archivo de vídeo; sin embargo, el usuario no sabrá dónde mover el mouse porque el elemento multimedia no estará visible en la aplicación. Como alternativa, puede agregar un botón al área de diseño y crear un desencadenador para el evento Click del botón.

Haga clic en el botón Agregar nueva acción junto a Cuando se origina elemento.MouseEnter.
Aparecerá una acción predeterminada en la lista que llamará al método escalaDeTiempo.Begin.
La escala de tiempo ya se ha iniciado cuando el objeto Window se cargó; por tanto, cambie el método a escalaDeTiempo.Pause.
Ahora, la película se detendrá cuando el mouse se mueva sobre el área de visualización.
Agregue otro desencadenador de eventos () y cámbielo para que muestre Cuando se origina elemento.MouseLeave.
Agregue una nueva acción () que llame al método escalaDeTiempo.Resume.
Ahora, la película se seguirá reproduciendo cuando el mouse deje el área de visualización. Como alternativa, puede elegir detener y reiniciar la película en lugar de hacer una pausa y reanudarla.

Agregar las acciones y desencadenadores de eventos MouseEnter y MouseLeave para pausar y reanudar la película
Para garantizar que el vídeo cambie de tamaño con la ventana, establezca las siguientes propiedades en el panel Propiedades:
- En la sección avanzada de la categoría Multimedia en el panel Propiedades, establezca la propiedad Stretch del elemento multimedia en Uniform. Esta configuración conserva la relación de aspecto del área de visualización del vídeo.
- En la categoría Diseño del panel Propiedades, establezca los valores de Width y Height del elemento multimedia en Auto. Esta configuración permite que el área de visualización del vídeo cambie de tamaño con la ventana de la aplicación. Si el área de visualización del vídeo no cambia de tamaño con la ventana de la aplicación, compruebe que el elemento multimedia está incluido en un elemento de panel con un tamaño específico.
Pruebe la aplicación (F5). Vea el comportamiento del área de visualización de la película cuando mueve el mouse por la misma.