Uso de componentes en HTML5 Canvas

Seleccione Archivo > Nuevo.

Elija Avanzado entre las pestañas en la parte superior de la pantalla, en el cuadro de diálogo Nuevo documento y, a continuación, seleccione la opción HTML5 Canvas.

Seleccione Ventana > Componentes.

Seleccione Componentes > Vídeo. Arrastre y suelte los componentes asociados al lienzo. 

Seleccione la Instancia del componente de vídeo en el escenario y consulte y modifique los parámetros en el inspector de propiedades. El parámetro Origen permite seleccionar el archivo de vídeo desde una ubicación local o proporcionar cualquier URL para reproducir el vídeo (formatos .mp4, .ogg, .ogv o .webm). 

Seleccione “Coincidir con dimensiones de origen” para que el tamaño del reproductor de vídeo se ajuste a las dimensiones del vídeo de entrada. Esta característica solo funciona con vídeos mp4. Para otros tipos de vídeo, ajuste el tamaño de la instancia de vídeo manualmente en el escenario para asegurarse de que la relación de aspecto sigue siendo la misma.

Pulse Ctrl+Intro (CMD+Intro en Mac) para previsualizar la película. El vídeo se reproducirá en el navegador predeterminado. Puesto que los controles son visibles de forma predeterminada, podrá verlos cuando pase el ratón por encima del vídeo en un navegador.

Se puede seguir el mismo procedimiento para utilizar otros componentes.

Seleccione Ventana > Componentes.

Para añadir interactividad a los componentes, seleccione el panel Ventana > Fragmentos de código. Puede ver la asignación de los diferentes comportamientos de los componentes disponibles.

En la pantalla Fragmentos de código, seleccione HTML5 Canvas > Componentes.

En función del componente seleccionado, haga doble clic en el fragmento de código correspondiente para mostrar el fragmento de código en el panel Acciones. Para obtener más información sobre la adición de interactividad en los fragmentos de código, consulte Cómo añadir interactividad mediante fragmentos de código en Animate CC. 

Seleccione la instancia de vídeo en el escenario y desactive la función Reproducción automática en el inspector de propiedades. 

Haga doble clic en el componente Botón dos veces en el panel Componentes para crear dos instancias en el escenario y colocar los botones. También puede arrastrarlos y soltarlos directamente desde el panel Componentes al escenario.

Seleccione la instancia del primer botón y cambie la etiqueta por Reproducir en el inspector de propiedades, y la del segundo botón por Detener. 

Abra el panel Fragmentos de código haciendo clic en Ventana > Fragmentos de código. Vaya a HTML5 Canvas > Componentes y expanda la sección Interfaz de usuario. 

Seleccione el botón Reproducir en el escenario, haga doble clic en el evento de clic de botón en panel Fragmentos de código y haga clic en Aceptar.Animate CC asigna un nombre de instancia al botón seleccionado. Podrá ver el código recién añadido en el panel Acciones.

Seleccione el vídeo en el escenario y expanda la sección Vídeo en Fragmentos de código. Haga doble clic en Reproducir un vídeo. El código necesario para reproducir el vídeo se añade al panel Acciones.

Para reproducir el vídeo cuando se hace clic en el botón, sitúe ese código entre la sección <Start your custom code> y <End your custom code>. 

Para añadir un código para detener el vídeo, seleccione el botón de pausa, asigne el nuevo controlador de clic en el botón y añada el código para detener el vídeo.

Previsualice la película. Haga clic en el botón de reproducción para reproducir el vídeo y, a continuación, haga clic en el botón Pausa para detener el vídeo. 

Haga doble clic en el archivo ManageExtensions.exe. Se mostrará el cuadro de diálogo Gestionar extensiones.

Haga clic en Instalar una extensión y seleccione la extensión (archivo .zxp) que quiera instalar.

Para ver los componentes instalados en Animate CC, haga clic en Ventana > Componente. Se mostrará el cuadro de diálogo Componentes. 

Haga clic en el icono de hamburguesa situado en el extremo superior derecho y haga clic en Volver a cargar componentes.