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.

En el ejemplo siguiente se muestra cómo controlar la reproducción de vídeo al desencadenar la escala de tiempo de vídeo cuando el puntero entra y sale del área de visualización del vídeo. Para obtener más información acerca de cómo modificar las escalas de tiempo, vea Animación, Desencadenadores e interactividad del usuario y Control de eventos e interactividad del usuario. Este ejemplo establece desencadenadores en los eventos MouseEnter y MouseLeave de un objeto de la mesa de trabajo. Para obtener una lista de otros eventos en los que puede establecer desencadenadores, vea la Referencia rápida de eventos de WPF.

[!NOTA]

Los desencadenadores no están disponibles en los proyectos de Microsoft Silverlight 1.0. Además, cuando se agrega un archivo de audio o vídeo a un proyecto de Silverlight 1.0, no se crea ninguna escala de tiempo. Para obtener instrucciones acerca de cómo controlar los guiones gráficos en un proyecto de Silverlight 1.0, vea Controlar la reproducción de elementos multimedia en un proyecto de Silverlight.

Precaución:
Para trabajar con elementos multimedia de Microsoft Expression Blend, debe tener el Reproductor de Windows Media 10 instalado en el equipo. Puede descargar el Reproductor de Windows Media 10 desde el sitio web de Windows Media.

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

1. Para asignar más espacio al panel Interacción en el área de trabajo de Expression Blend, cambie al Área de trabajo de animación (F6). Esta acción mueve el panel Interacción debajo de la mesa de trabajo.

2. 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.

3. Para agregar el archivo de vídeo a la mesa de trabajo, 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 al archivo de vídeo.

   • Si se seleccionó una escala de tiempo antes de agregar el archivo multimedia a la mesa de trabajo, é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 obtener acceso al procedimiento completo que muestra la forma de agregar medios a la mesa de trabajo, vea el tema Insertar un archivo de imagen, audio o vídeo en el documento activo.

4. 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 el evento Window.Loaded. De manera predeterminada, se iniciará la escala de tiempo del vídeo. El objetivo es que el vídeo se reproduzca cuando el puntero esté sobre el área de visualización del vídeo y que se detenga cuando el puntero salga de dicha área. La primera tarea consiste en detener el vídeo en cuanto empiece al cargarse la ventana de la aplicación.

5. 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 timeline.Begin.

6. Haga clic en el cuadro de lista desplegable de método y seleccione Pausa. El panel Interacción debe ser 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

   

7. Para conectar la escala de tiempo de la película a un evento del mouse, debe agregar un nuevo desencadenador de eventos. Haga clic en el botón Agregar desencadenador de evento  debajo de Desencadenadores. Aparecerá un nuevo desencadenador de eventos predeterminado en la lista para cuando se genere el evento Window.Loaded.

8. 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.

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

9. 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 element.MouseEnter. Todavía no se ha creado ninguna acción.

   Sugerencia:

   Si usa 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, los usuarios no sabrán dónde mover el puntero porque el elemento multimedia no estará visible en la aplicación. Como alternativa, puede agregar un botón a la mesa de trabajo y crear un desencadenador para el evento Click del botón.

10. Haga clic en el botón Agregar nueva acción  al lado de Cuando se origina element.MouseEnter. Aparecerá una acción predeterminada en la lista, que llama al método timeline.Begin.

11. Dado que la escala de tiempo se inicia al cargarse la ventana, cambie el método a timeline.Pause. Ahora, la película se detendrá cuando el puntero se mueva sobre el área de visualización.

12. Agregue otro desencadenador de eventos () y cámbielo para que sea Cuando se origina element.MouseLeave.

13. Agregue una acción nueva () que llame al método timeline.Resume. Ahora, la película se seguirá reproduciendo cuando el puntero salga del área de visualización. Como alternativa, puede elegir detener y reiniciar la película en lugar de pausarla y reanudarla.

    Agregar las acciones y desencadenadores de eventos MouseEnter y MouseLeave para pausar y reanudar la película

    

14. 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.

15. Pruebe la aplicación (F5). Vea el comportamiento del área de visualización de la película cuando mueve el puntero por la misma.

Vea también

Conceptos

Crear un botón que controle un guión gráfico en una aplicación de Silverlight