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.
Última actualización el
May 03, 2021 05:48:54 PM GMT
Utilice este artículo para obtener más información sobre cómo utilizar los componentes personalizables.
El componente proporciona una función o un grupo de componentes personalizables y reutilizables relacionados, con el fin de mejorar la productividad para los creadores de publicidad. Anteriormente, Animate admitía componentes Flash que se utilizaban con objetivos basados en Flash. A partir de esta versión, Animate es compatible con HTML5 Canvas.
-
HTML5 Canvas -
Seleccione Ventana > Componentes.
Componentes predeterminados -
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).
Arrastre y suelte los componentes -
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.
Salida del componente de previsualización
Nota:
Los componentes se añaden al documento HTML como elementos DOM, así que debe consultar los fragmentos de código Componente (Fragmentos de código > Lienzo HTML5 > Componentes) para añadir interactividad a los componentes.
Adición de interactividad a los componentes con fragmentos de código
-
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.
Fragmentos de código predeterminados -
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.
Ejemplo
Utilice el ejemplo siguiente para aprender a utilizar los fragmentos de código cuando se controla la reproducción del vídeo mediante código.
-
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.
Colocar los botones -
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 asigna un nombre de instancia al botón seleccionado. Podrá ver el código recién añadido en el panel Acciones.
Adición de fragmentos de código -
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.
Código añadido 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>.
Mover el código dentro de las etiquetas -
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.
Nota:
Puede ver el atributo className de cada componente en el Inspector de propiedades. Utilice estos nombres de clase para aplicar aspectos a los componentes con CSS. Utilice el componente de CSS para cargar su CSS personalizada. El componente CSS permite seleccionar cualquier archivo CSS local que se incluya en la película.
Instalación de componentes distribuidos
Los diseñadores o desarrolladores de Animate pueden instalar el componente del archivo ZXP distribuido usando la utilidad Gestionar extensiones. Para obtener más información, consulte Instalar extensiones.
Requisito previo
Instalación de componentes
Para instalar componentes distribuidos puede realizar los pasos siguientes:
-
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 obtener más información, consulte Instalar extensiones.
-
Para ver los componentes instalados en Animate, 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.
Inicia sesión en tu cuenta